@devalok/shilp-sutra 0.6.2 → 0.8.0

package/dist/ui/toast.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as r from "react";
 import { Provider as p, Root as i, Action as d, Close as n, Description as l, Title as c, Viewport as m } from "../primitives/react-toast.js";
 import { cva as u } from "class-variance-authority";
-import { IconX as b } from "@tabler/icons-react";
+import { IconX as x } from "@tabler/icons-react";
 import { cn as a } from "./lib/utils.js";
-const C = p, x = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const C = p, b = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   m,
   {
-    ref: o,
+    ref: s,
     className: a(
       "fixed top-0 z-toast flex max-h-screen w-full flex-col-reverse p-ds-05 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       e
@@ -16,7 +16,7 @@ const C = p, x = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
     ...t
   }
 ));
-x.displayName = m.displayName;
+b.displayName = m.displayName;
 const v = u(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-ds-03 overflow-hidden rounded-ds-md border p-ds-05 pr-ds-06 shadow-03 transition-all duration-moderate-02 data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
@@ -33,21 +33,21 @@ const v = u(
       color: "neutral"
     }
   }
-), w = r.forwardRef(({ className: e, color: t, ...o }, f) => /* @__PURE__ */ s(
+), w = r.forwardRef(({ className: e, color: t, ...s }, f) => /* @__PURE__ */ o(
   i,
   {
     ref: f,
     role: "status",
     "aria-live": "polite",
     className: a(v({ color: t }), e),
-    ...o
+    ...s
   }
 ));
 w.displayName = i.displayName;
-const y = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const y = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   d,
   {
-    ref: o,
+    ref: s,
     className: a(
       "inline-flex h-ds-sm shrink-0 items-center justify-center rounded-ds-md border border-border bg-transparent px-ds-04 text-ds-md font-medium transition-colors hover:bg-layer-02 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-[0.38] group-[.destructive]:border-border-error group-[.destructive]:hover:bg-error-surface",
       e
@@ -56,33 +56,33 @@ const y = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
   }
 ));
 y.displayName = d.displayName;
-const g = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const g = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   n,
   {
-    ref: o,
+    ref: s,
     className: a(
-      "absolute right-ds-02 top-ds-02 min-h-6 min-w-6 flex items-center justify-center rounded-ds-md p-ds-02 text-text-secondary opacity-70 transition-opacity hover:text-text-primary hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+      "absolute right-ds-02 top-ds-02 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-md p-ds-02 text-text-secondary opacity-70 transition-opacity hover:text-text-primary hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
       e
     ),
     "toast-close": "",
     ...t,
-    children: /* @__PURE__ */ s(b, { className: "h-ico-sm w-ico-sm" })
+    children: /* @__PURE__ */ o(x, { className: "h-ico-sm w-ico-sm" })
   }
 ));
 g.displayName = n.displayName;
-const N = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const N = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   c,
   {
-    ref: o,
+    ref: s,
     className: a("text-ds-md font-semibold [&+div]:text-ds-sm", e),
     ...t
   }
 ));
 N.displayName = c.displayName;
-const h = r.forwardRef(({ className: e, ...t }, o) => /* @__PURE__ */ s(
+const h = r.forwardRef(({ className: e, ...t }, s) => /* @__PURE__ */ o(
   l,
   {
-    ref: o,
+    ref: s,
     className: a("text-ds-md opacity-[0.9]", e),
     ...t
   }
@@ -95,5 +95,5 @@ export {
   h as ToastDescription,
   C as ToastProvider,
   N as ToastTitle,
-  x as ToastViewport
+  b as ToastViewport
 };

package/dist/ui/tooltip.js

@@ -1,24 +1,13 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
-import * as r from "react";
-import { Root as s, Provider as n, Trigger as m, Portal as l, Content as o } from "../primitives/react-tooltip.js";
-import { cn as p } from "./lib/utils.js";
-const u = n, T = s, h = m, f = r.forwardRef(({ className: e, sideOffset: a = 4, ...i }, d) => /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(
-  o,
-  {
-    ref: d,
-    sideOffset: a,
-    className: p(
-      "z-tooltip overflow-hidden rounded-ds-md bg-text-primary px-ds-04 py-ds-02b text-ds-sm text-text-inverse shadow-02 duration-fast-02 ease-productive-entrance animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      e
-    ),
-    ...i
-  }
-) }));
-f.displayName = o.displayName;
+import * as s from "react";
+import { Root as r, Provider as n, Trigger as m, Portal as l, Content as o } from "../primitives/react-tooltip.js";
+import { cn as f } from "./lib/utils.js";
+const u = n, T = r, h = m, p = s.forwardRef(({ className: e, sideOffset: a = 4, ...i }, d) => t(l, { children: t(o, { ref: d, sideOffset: a, className: f("z-tooltip overflow-hidden rounded-ds-md bg-text-primary px-ds-04 py-ds-02b text-ds-sm text-text-inverse shadow-02 duration-fast-02 ease-productive-entrance animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", e), ...i }) }));
+p.displayName = o.displayName;
 export {
   T as Tooltip,
-  f as TooltipContent,
+  p as TooltipContent,
   u as TooltipProvider,
   h as TooltipTrigger
 };

package/llms-full.txt

@@ -197,7 +197,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Props:
     variant: "subtle" | "solid" | "outline" | "secondary" (alias->subtle) | "destructive" (alias->solid+error)
     color: "default" | "info" | "success" | "error" | "warning" | "brand" | "accent" | "teal" | "amber" | "slate" | "indigo" | "cyan" | "orange" | "emerald"
-    size: "sm" | "md" | "lg"
+    size: "xs" | "sm" | "md" | "lg"
     dot: boolean (shows leading dot indicator)
     onDismiss: () => void (shows X button when provided)
     children: ReactNode
@@ -353,6 +353,24 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
   <Code variant="block">{`const x = 1;\nconsole.log(x);`}</Code>
 - Gotchas: "block" renders as <pre><code>, "inline" renders as <code>
 
+## ColorInput
+- Import: @devalok/shilp-sutra/ui/color-input
+- Server-safe: No
+- Props:
+    value: string (hex color, e.g. "#d33163")
+    onChange: (value: string) => void
+    presets: string[] (optional preset color swatches)
+    disabled: boolean
+    className: string
+- Defaults: value="#000000", disabled=false
+- Example:
+  <ColorInput
+    value={color}
+    onChange={setColor}
+    presets={['#d33163', '#2563eb', '#16a34a']}
+  />
+- Gotchas: Uses native color picker under the hood; value must be a valid hex string
+
 ## Collapsible
 - Import: @devalok/shilp-sutra/ui/collapsible
 - Server-safe: No
@@ -372,12 +390,12 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Server-safe: No
 - Props:
     options: ComboboxOption[] (REQUIRED) — { value: string, label: string, description?: string, icon?: ReactNode, disabled?: boolean }
-    value: string | string[]
-    onValueChange: (value: string | string[]) => void (REQUIRED)
+    DISCRIMINATED UNION — type depends on `multiple` flag:
+    Single (default): multiple?: false, value: string, onValueChange: (value: string) => void
+    Multiple: multiple: true, value: string[], onValueChange: (value: string[]) => void
     placeholder: string (default: "Select...")
     searchPlaceholder: string (default: "Search...")
     emptyMessage: string (default: "No results found")
-    multiple: boolean (default: false)
     disabled: boolean
     triggerClassName: string
     maxVisible: number (default: 6, max dropdown items before scroll)
@@ -387,7 +405,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     multiple
     options={tagOptions}
     value={selectedTags}
-    onValueChange={(v) => setSelectedTags(v as string[])}
+    onValueChange={setSelectedTags}
     placeholder="Select tags..."
   />
 - Gotchas:
@@ -575,6 +593,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Gotchas:
     - HTML native "size" attribute is excluded — use CSS width instead
     - state="error" sets aria-invalid automatically
+    - Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
 
 ## InputOTP
 - Import: @devalok/shilp-sutra/ui/input-otp
@@ -1116,6 +1135,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Example:
   <Textarea size="lg" state="error" placeholder="Describe the issue..." />
 - Gotchas: state="error" sets aria-invalid automatically; all sizes are vertically resizable
+    - Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
 
 ## Toast / Toaster
 - Import: @devalok/shilp-sutra/ui/toast, @devalok/shilp-sutra/ui/toaster
@@ -1302,6 +1322,36 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
   />
 - Gotchas: Opens with Ctrl+K / Cmd+K by default
 
+## ConfirmDialog
+- Import: @devalok/shilp-sutra/composed/confirm-dialog
+- Server-safe: No
+- Props:
+    open: boolean (REQUIRED, controlled)
+    onOpenChange: (open: boolean) => void (REQUIRED)
+    title: string (REQUIRED)
+    description: string (REQUIRED)
+    confirmText: string (default: "Confirm")
+    cancelText: string (default: "Cancel")
+    color: "default" | "error" (controls confirm button color)
+    loading: boolean (default: false, disables buttons and shows spinner)
+    onConfirm: () => void | Promise<void> (REQUIRED)
+- Defaults: confirmText="Confirm", cancelText="Cancel", color="default", loading=false
+- Example:
+  const [open, setOpen] = useState(false)
+  <ConfirmDialog
+    open={open}
+    onOpenChange={setOpen}
+    title="Delete project?"
+    description="This action cannot be undone."
+    color="error"
+    confirmText="Delete"
+    loading={isDeleting}
+    onConfirm={async () => { await deleteProject(); setOpen(false) }}
+  />
+- Gotchas:
+    - Dialog stays open after confirm — consumer must close it via onOpenChange
+    - Built on AlertDialog internally
+
 ## ContentCard
 - Import: @devalok/shilp-sutra/composed/content-card
 - Server-safe: Yes
@@ -1486,13 +1536,41 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     onChange: (html: string) => void
     className: string
     editable: boolean (default: true)
+    onImageUpload?: (file: File) => Promise<string> — return URL. If omitted, images paste as base64
+    onFileUpload?: (file: File) => Promise<{ url: string; name: string; size: number }> — enables file attachments. If omitted, non-image files ignored
+    mentions?: MentionItem[] — static list for @mention autocomplete
+    onMentionSearch?: (query: string) => Promise<MentionItem[]> — async search, takes precedence over static mentions
+    onMentionSelect?: (item: MentionItem) => void — callback when mention selected
+- MentionItem: { id: string; label: string; avatar?: string }
 - Props (RichTextViewer):
     content: string (REQUIRED, HTML string)
     className: string
+- Features:
+    Formatting: bold, italic, underline, strikethrough, highlight, headings (H2/H3), blockquote
+    Lists: bullet, ordered, task lists (checkboxes)
+    Code: inline code, code blocks
+    Links: auto-link, inline URL editor popover
+    Images: paste/drop/toolbar upload, base64 fallback or custom upload callback
+    File attachments: drop/paste/toolbar, renders as download card [icon filename (size)]
+    Mentions: type @ for autocomplete dropdown (static or async)
+    Emoji: toolbar picker (emoji-mart, lazy loaded) + :shortcode: inline suggestions
+    Text alignment: left/center/right
+    Horizontal rule
 - Example:
   <RichTextEditor content={html} onChange={setHtml} placeholder="Write your message..." />
+  <RichTextEditor
+    content={html}
+    onChange={setHtml}
+    mentions={[{ id: '1', label: 'Aarav' }]}
+    onImageUpload={async (file) => uploadAndReturnUrl(file)}
+    onFileUpload={async (file) => ({ url: uploadUrl, name: file.name, size: file.size })}
+  />
   <RichTextViewer content={savedHtml} />
-- Gotchas: Requires @tiptap/react, @tiptap/starter-kit, @tiptap/extension-placeholder as peer deps
+- Gotchas:
+    Requires Tiptap peer deps: @tiptap/react, @tiptap/starter-kit, @tiptap/extension-placeholder, plus extension-specific peers (image, link, underline, highlight, task-list, task-item, text-align, mention, suggestion)
+    Emoji picker requires @emoji-mart/react + @emoji-mart/data peers
+    Images without onImageUpload are stored as base64 in HTML — large images bloat content
+    Mention rendering in viewer always works (no mention props needed, just the HTML)
 
 ## ScheduleView
 - Import: @devalok/shilp-sutra/composed/schedule-view
@@ -1558,17 +1636,20 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Server-safe: No
 - Props:
     user: AppCommandPaletteUser | null — { name, role? }
+    isAdmin: boolean (shows admin command groups regardless of user.role; takes precedence over role-based detection)
     extraGroups: CommandGroup[]
     onNavigate: (path: string) => void
     onSearch: (query: string) => void
     searchResults: SearchResult[] — { id, title, snippet?, entityType, projectId?, metadata? }
-    onSelectResult: (result: SearchResult) => void
+    isSearching: boolean (shows loading state while search is in progress)
+    onSearchResultSelect: (result: SearchResult) => void
 - Example:
   <AppCommandPalette
     user={{ name: 'John', role: 'admin' }}
+    isAdmin={true}
     onNavigate={(path) => router.push(path)}
     searchResults={results}
-    onSelectResult={(r) => router.push(`/${r.entityType}/${r.id}`)}
+    onSearchResultSelect={(r) => router.push(`/${r.entityType}/${r.id}`)}
   />
 
 ## AppSidebar
@@ -1601,7 +1682,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Server-safe: No
 - Props:
     currentPath: string
-    user: BottomNavbarUser | null — { name, role? }
+    user: BottomNavbarUser | null (optional) — { name, role? }. Not required to render.
     primaryItems: BottomNavItem[] (max 4 recommended) — { title, href, icon, exact? }
     moreItems: BottomNavItem[] (overflow items in "More" menu)
     className: string
@@ -1642,13 +1723,25 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     onFetchMore: () => void
     onMarkRead: (id: string) => void
     onMarkAllRead: () => void
-    onNotificationClick: (notification: Notification) => void
+    onNavigate: (path: string) => void — called when a notification with a route is clicked
+    getNotificationRoute: (notification: Notification) => string | null — returns route for a notification; defaults to () => null when not provided (no hardcoded routes)
+    footerSlot: ReactNode — content rendered in a sticky footer below the scroll area (e.g., "View all" link)
+    emptyState: ReactNode — replaces the default empty state UI when there are no notifications
+    headerActions: ReactNode — extra action buttons rendered after the "Mark all read" button in the header
+    popoverClassName: string — override default popover dimensions via className
+    onDismiss: (id: string) => void — when provided, each notification shows a dismiss/close button; called with the notification id
 - Example:
   <NotificationCenter
     notifications={notifications}
     onMarkRead={markAsRead}
     onMarkAllRead={markAllAsRead}
-    onNotificationClick={(n) => router.push(`/notifications/${n.id}`)}
+    onNavigate={(path) => router.push(path)}
+    getNotificationRoute={(n) => n.entityType === 'task' ? `/tasks/${n.entityId}` : null}
+    onDismiss={(id) => dismissNotification(id)}
+    footerSlot={<Link href="/notifications">View all notifications</Link>}
+    emptyState={<p>You're all caught up!</p>}
+    headerActions={<Button variant="ghost" size="sm">Settings</Button>}
+    popoverClassName="w-[480px]"
   />
 
 ## NotificationPreferences
@@ -1658,13 +1751,18 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     preferences: NotificationPreference[] — { id, userId?, projectId, channel, minTier, muted }
     projects: NotificationProject[] — { id, title }
     isLoading: boolean
-    onSave: (preference: { projectId, channel, minTier, muted }) => void
-    onDelete: (id: string) => void
+    onSave: (preference: { projectId, channel, minTier, muted }) => void | Promise<void>
+    onToggleMute: (preference: NotificationPreference) => void | Promise<void>
+    onUpdateTier: (preference: NotificationPreference, newTier: string) => void | Promise<void>
+    onDelete: (preferenceId: string) => void | Promise<void>
+    className: string
 - Example:
   <NotificationPreferences
     preferences={prefs}
     projects={projectList}
     onSave={handleSavePref}
+    onToggleMute={handleToggleMute}
+    onUpdateTier={handleUpdateTier}
     onDelete={handleDeletePref}
   />
 
@@ -1680,7 +1778,15 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     onAiChatClick: () => void
     mobileLogo: ReactNode
     notificationSlot: ReactNode (render NotificationCenter here)
+    userMenuItems?: UserMenuItem[] — custom items between Profile and Dark/Light Mode toggle
     className: string
+- UserMenuItem: { label: string, icon?: ReactNode, href?: string, onClick?: () => void, separator?: boolean, color?: string, badge?: string | boolean, disabled?: boolean }
+    href — navigates via onNavigate callback
+    onClick — custom action (takes precedence over href)
+    separator — renders a DropdownMenuSeparator before this item
+    color — semantic text color (e.g. "error" → text-error)
+    badge — string for count badge, true for dot indicator
+    disabled — greys out the item
 - Example:
   <TopBar
     pageTitle="Dashboard"
@@ -1688,6 +1794,10 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     onNavigate={(p) => router.push(p)}
     onLogout={handleLogout}
     notificationSlot={<NotificationCenter notifications={notifications} />}
+    userMenuItems={[
+      { label: 'Changelog', icon: <IconNews />, href: '/changelog', badge: '3' },
+      { label: 'Shortcuts', icon: <IconKeyboard />, onClick: () => openModal() },
+    ]}
   />
 
 ---

package/llms.txt

@@ -65,6 +65,7 @@ Components with two-axis system: Button, Badge, Alert, Chip, Toast, Banner, Prog
 - SearchInput: size(sm|md|lg) + loading, onClear
 - NumberInput: value + onValueChange, min, max, step (controlled only)
 - Textarea: size(sm|md|lg) state(default|error|warning|success)
+- ColorInput: value(hex string) onChange(value) presets(string[]) disabled
 - Checkbox: checked, onCheckedChange, error(boolean), indeterminate(boolean)
 - Switch: checked, onCheckedChange, error(boolean)
 - RadioGroup > RadioGroupItem(value)
@@ -87,7 +88,7 @@ NOTIFICATION SELECTION GUIDE:
   - Toast: transient notification triggered by user action (needs Toaster + useToast)
 
 ### Data Display
-- Badge: variant(subtle|solid|outline) color(default|info|success|error|warning|brand|accent + 7 category colors) size(sm|md|lg) + onDismiss
+- Badge: variant(subtle|solid|outline) color(default|info|success|error|warning|brand|accent + 7 category colors) size(xs|sm|md|lg) + onDismiss
 - Chip: variant(subtle|outline) color(default|primary|success|error|warning|info + 7 category) size(sm|md|lg) label(string, REQUIRED) + onDismiss, onClick
 - Avatar: size(xs|sm|md|lg|xl) shape(circle|square|rounded) status(online|offline|busy|away) > AvatarImage + AvatarFallback
 - Card: variant(default|elevated|outline|flat) interactive(boolean) > CardHeader > CardTitle, CardDescription; CardContent; CardFooter
@@ -128,6 +129,7 @@ NOTIFICATION SELECTION GUIDE:
 - Wire accessibility: const { state, helperTextId } = useFormField(); then aria-describedby={helperTextId}, aria-invalid={state === 'error'}
 
 ### Composed Components
+- ConfirmDialog: open, onOpenChange, title, description, onConfirm + confirmText, cancelText, color(default|error), loading
 - PageHeader: title, subtitle, breadcrumbs[], actions(ReactNode)
 - AvatarGroup: users[], max(number), size(sm|md|lg), showTooltip
 - StatusBadge: status(active|pending|approved|rejected|completed|blocked|cancelled|draft) color(success|warning|error|info|neutral) size(sm|md)
@@ -136,17 +138,18 @@ NOTIFICATION SELECTION GUIDE:
 - PriorityIndicator: priority(LOW|MEDIUM|HIGH|URGENT) display(compact|full)
 - SimpleTooltip: wraps Tooltip compound into single component
 - DatePicker, DateRangePicker, DateTimePicker, TimePicker
-- RichTextEditor, RichTextViewer
+- RichTextEditor: Tiptap editor — bold/italic/underline/strike/highlight, headings, blockquote, lists (bullet/ordered/task), code, links, images (paste/drop/upload), file attachments, @mentions, emoji picker + :shortcode:, text alignment, HR. Props: onImageUpload?, onFileUpload?, mentions?, onMentionSearch?, onMentionSelect?
+- RichTextViewer: read-only renderer for RichTextEditor HTML content (renders all above content types)
 - CommandPalette, MemberPicker
 - ErrorDisplay, GlobalLoading
 - Loading skeletons: CardSkeleton, TableSkeleton, BoardSkeleton, ListSkeleton, DashboardSkeleton, etc.
 
 ### Shell Components (app-level layout)
-- TopBar: pageTitle, user, onNavigate, onLogout, notificationSlot, mobileLogo
+- TopBar: pageTitle, user, onNavigate, onLogout, notificationSlot, mobileLogo, userMenuItems?(UserMenuItem[] — custom items between Profile and theme toggle, supports icon, href, onClick, separator, badge, disabled, color)
 - AppSidebar: navigation tree with NavItem[], NavGroup[]
-- BottomNavbar: mobile navigation
-- NotificationCenter: notifications[], onDismiss, onRead
-- AppCommandPalette: search results, user info
+- BottomNavbar: mobile navigation, user is optional (not required to render)
+- NotificationCenter: notifications[], onMarkRead, onMarkAllRead, onNavigate, getNotificationRoute?(returns string|null, fallback null), footerSlot?, emptyState?, headerActions?, popoverClassName?, onDismiss?(id)
+- AppCommandPalette: user, isAdmin, onNavigate, onSearch, searchResults, isSearching, onSearchResultSelect
 
 ### Hooks
 - useToast(): returns { toast, toasts, dismiss } — toast({ title, description, color })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",
@@ -81,6 +81,10 @@
       "import": "./dist/ui/code.js",
       "types": "./dist/ui/code.d.ts"
     },
+    "./ui/color-input": {
+      "import": "./dist/ui/color-input.js",
+      "types": "./dist/ui/color-input.d.ts"
+    },
     "./ui/collapsible": {
       "import": "./dist/ui/collapsible.js",
       "types": "./dist/ui/collapsible.d.ts"
@@ -289,6 +293,10 @@
       "import": "./dist/composed/command-palette.js",
       "types": "./dist/composed/command-palette.d.ts"
     },
+    "./composed/confirm-dialog": {
+      "import": "./dist/composed/confirm-dialog.js",
+      "types": "./dist/composed/confirm-dialog.d.ts"
+    },
     "./composed/content-card": {
       "import": "./dist/composed/content-card.js",
       "types": "./dist/composed/content-card.d.ts"
@@ -398,6 +406,10 @@
       "import": "./dist/tailwind/index.js",
       "types": "./dist/tailwind/index.d.ts"
     },
+    "./utils": {
+      "import": "./dist/ui/lib/utils.js",
+      "types": "./dist/ui/lib/utils.d.ts"
+    },
     "./fonts/*": "./fonts/*"
   },
   "files": [
@@ -416,14 +428,23 @@
     "prepublishOnly": "pnpm build"
   },
   "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
+    "@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",
+    "@tiptap/extension-highlight": "^2.0.0",
+    "@tiptap/extension-image": "^2.0.0",
+    "@tiptap/extension-link": "^2.0.0",
+    "@tiptap/extension-mention": "^2.0.0",
+    "@tiptap/extension-placeholder": "^2.0.0",
+    "@tiptap/extension-task-item": "^2.0.0",
+    "@tiptap/extension-task-list": "^2.0.0",
+    "@tiptap/extension-text-align": "^2.0.0",
+    "@tiptap/extension-underline": "^2.0.0",
     "@tiptap/react": "^2.0.0",
     "@tiptap/starter-kit": "^2.0.0",
-    "@tiptap/extension-placeholder": "^2.0.0",
+    "@tiptap/suggestion": "^2.0.0",
     "d3-array": "^3.0.0",
     "d3-axis": "^3.0.0",
     "d3-format": "^3.0.0",
@@ -435,12 +456,12 @@
     "d3-transition": "^3.0.0",
     "date-fns": "^4.0.0",
     "input-otp": "^1.0.0",
-    "react-markdown": "^10.0.0"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-markdown": "^10.0.0",
+    "tailwindcss": "^3.4.0"
   },
   "peerDependenciesMeta": {
-    "@tabler/icons-react": {
-      "optional": true
-    },
     "@tanstack/react-table": {
       "optional": true
     },
@@ -453,9 +474,42 @@
     "@tiptap/starter-kit": {
       "optional": true
     },
+    "@tiptap/extension-highlight": {
+      "optional": true
+    },
+    "@tiptap/extension-image": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-mention": {
+      "optional": true
+    },
     "@tiptap/extension-placeholder": {
       "optional": true
     },
+    "@tiptap/extension-task-item": {
+      "optional": true
+    },
+    "@tiptap/extension-task-list": {
+      "optional": true
+    },
+    "@tiptap/extension-text-align": {
+      "optional": true
+    },
+    "@tiptap/extension-underline": {
+      "optional": true
+    },
+    "@tiptap/suggestion": {
+      "optional": true
+    },
+    "@emoji-mart/data": {
+      "optional": true
+    },
+    "@emoji-mart/react": {
+      "optional": true
+    },
     "d3-array": {
       "optional": true
     },
@@ -491,6 +545,9 @@
     },
     "react-markdown": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -502,12 +559,24 @@
     "tailwind-merge": "^3.0.1"
   },
   "devDependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@tabler/icons-react": "^3.37.1",
     "@tanstack/react-table": "^8.21.2",
     "@tanstack/react-virtual": "^3.13.19",
-    "@tiptap/extension-placeholder": "^2.11.5",
-    "@tiptap/react": "^2.11.5",
-    "@tiptap/starter-kit": "^2.11.5",
+    "@tiptap/core": "^2.27.2",
+    "@tiptap/extension-highlight": "^2.27.2",
+    "@tiptap/extension-image": "^2.27.2",
+    "@tiptap/extension-link": "^2.27.2",
+    "@tiptap/extension-mention": "^2.27.2",
+    "@tiptap/extension-placeholder": "^2.27.2",
+    "@tiptap/extension-task-item": "^2.27.2",
+    "@tiptap/extension-task-list": "^2.27.2",
+    "@tiptap/extension-text-align": "^2.27.2",
+    "@tiptap/extension-underline": "^2.27.2",
+    "@tiptap/react": "^2.27.2",
+    "@tiptap/starter-kit": "^2.27.2",
+    "@tiptap/suggestion": "^2.27.2",
     "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",
     "d3-format": "^3.1.2",