@devalok/shilp-sutra 0.6.2 → 0.7.0

package/dist/ui/input.js

@@ -1,57 +1,31 @@
 "use client";
 import { jsx as i, jsxs as c } from "react/jsx-runtime";
-import * as u from "react";
-import { cva as f } from "class-variance-authority";
+import * as f from "react";
+import { cva as u } from "class-variance-authority";
 import { cn as m } from "./lib/utils.js";
-const b = f(
-  [
-    "flex w-full font-sans",
-    "bg-field text-text-primary",
-    "border border-border rounded-ds-md",
-    "placeholder:text-text-placeholder",
-    "hover:bg-field-hover",
-    "transition-colors duration-fast-01",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:border-border-interactive",
-    "disabled:cursor-not-allowed disabled:opacity-[0.38]",
-    "read-only:bg-layer-02 read-only:cursor-default"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-ds-sm text-ds-sm px-ds-03",
-        md: "h-ds-md text-ds-base px-ds-04",
-        lg: "h-ds-lg text-ds-lg px-ds-05"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-), p = u.forwardRef(
-  ({ className: t, type: d, state: e, size: l, startIcon: r, endIcon: s, ...n }, a) => {
-    const o = /* @__PURE__ */ i(
-      "input",
-      {
-        type: d,
-        className: m(
-          b({ size: l }),
-          r && "pl-ds-08",
-          s && "pr-ds-08",
-          e === "error" && "border-border-error focus-visible:ring-error",
-          e === "warning" && "border-border-warning focus-visible:ring-warning",
-          e === "success" && "border-border-success focus-visible:ring-success",
-          t
-        ),
-        "aria-invalid": e === "error" || void 0,
-        ref: a,
-        ...n
-      }
-    );
-    return !r && !s ? o : /* @__PURE__ */ c("div", { className: "relative flex items-center w-full", children: [
-      r && /* @__PURE__ */ i("span", { className: "absolute left-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: r }),
-      o,
-      s && /* @__PURE__ */ i("span", { className: "absolute right-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: s })
-    ] });
-  }
-);
+const b = u([
+  "flex w-full font-sans",
+  "bg-field text-text-primary",
+  "border border-border rounded-ds-md",
+  "placeholder:text-text-placeholder",
+  "hover:bg-field-hover",
+  "transition-colors duration-fast-01",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:border-border-interactive",
+  "disabled:cursor-not-allowed disabled:opacity-[0.38]",
+  "read-only:bg-layer-02 read-only:cursor-default"
+], {
+  variants: {
+    size: {
+      sm: "h-ds-sm text-ds-sm px-ds-03",
+      md: "h-ds-md text-ds-base px-ds-04",
+      lg: "h-ds-lg text-ds-lg px-ds-05"
+    }
+  },
+  defaultVariants: { size: "md" }
+}), p = f.forwardRef(({ className: t, type: d, state: e, size: l, startIcon: r, endIcon: s, ...n }, a) => {
+  const o = i("input", { type: d, className: m(b({ size: l }), r && "pl-ds-08", s && "pr-ds-08", e === "error" && "border-border-error focus-visible:ring-error", e === "warning" && "border-border-warning focus-visible:ring-warning", e === "success" && "border-border-success focus-visible:ring-success", t), "aria-invalid": e === "error" || void 0, ref: a, ...n });
+  return !r && !s ? o : c("div", { className: "relative flex items-center w-full", children: [r && i("span", { className: "absolute left-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: r }), o, s && i("span", { className: "absolute right-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: s })] });
+});
 p.displayName = "Input";
 export {
   p as Input,

package/dist/ui/label.js

@@ -3,21 +3,7 @@ import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import * as d from "react";
 import { Root as e } from "../primitives/react-label.js";
 import { cn as n } from "./lib/utils.js";
-const p = d.forwardRef(({ className: t, required: r, children: a, ...o }, m) => /* @__PURE__ */ s(
-  e,
-  {
-    ref: m,
-    className: n(
-      "font-sans text-ds-md font-medium text-text-primary leading-none peer-disabled:opacity-[0.38]",
-      t
-    ),
-    ...o,
-    children: [
-      a,
-      r && /* @__PURE__ */ i("span", { className: "text-text-error ml-ds-01", "aria-hidden": "true", children: "*" })
-    ]
-  }
-));
+const p = d.forwardRef(({ className: r, required: t, children: a, ...o }, m) => s(e, { ref: m, className: n("font-sans text-ds-md font-medium text-text-primary leading-none peer-disabled:opacity-[0.38]", r), ...o, children: [a, t && i("span", { className: "text-text-error ml-ds-01", "aria-hidden": "true", children: "*" })] }));
 p.displayName = e.displayName;
 export {
   p as Label

package/dist/ui/popover.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
-import * as s from "react";
+import * as n from "react";
 import { Root as i, Anchor as m, Trigger as p, Portal as l, Content as t } from "../primitives/react-popover.js";
 import { cn as c } from "./lib/utils.js";
-const u = i, P = p, v = m, f = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, n) => /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
+const u = i, v = p, P = m, f = n.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, s) => /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
   t,
   {
-    ref: n,
+    ref: s,
     align: a,
     sideOffset: r,
     className: c(
-      "z-dropdown w-72 rounded-ds-lg border border-border bg-layer-01 p-ds-05 text-text-primary shadow-03 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+      "z-popover w-72 rounded-ds-lg border border-border bg-layer-01 p-ds-05 text-text-primary shadow-03 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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
     ),
     ...d
@@ -19,7 +19,7 @@ const u = i, P = p, v = m, f = s.forwardRef(({ className: e, align: a = "center"
 f.displayName = t.displayName;
 export {
   u as Popover,
-  v as PopoverAnchor,
+  P as PopoverAnchor,
   f as PopoverContent,
-  P as PopoverTrigger
+  v as PopoverTrigger
 };

package/dist/ui/separator.js

@@ -1,24 +1,9 @@
 "use client";
-import { jsx as p } from "react/jsx-runtime";
-import * as e from "react";
+import { jsx as i } from "react/jsx-runtime";
+import * as l from "react";
 import { Root as o } from "../primitives/react-separator.js";
-import { cn as s } from "./lib/utils.js";
-const f = e.forwardRef(
-  ({ className: a, orientation: r = "horizontal", decorative: m = !0, ...t }, l) => /* @__PURE__ */ p(
-    o,
-    {
-      ref: l,
-      decorative: m,
-      orientation: r,
-      className: s(
-        "shrink-0 bg-border-subtle",
-        r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        a
-      ),
-      ...t
-    }
-  )
-);
+import { cn as p } from "./lib/utils.js";
+const f = l.forwardRef(({ className: a, orientation: r = "horizontal", decorative: t = !0, ...e }, m) => i(o, { ref: m, decorative: t, orientation: r, className: p("shrink-0 bg-border-subtle", r === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", a), ...e }));
 f.displayName = o.displayName;
 export {
   f as Separator

package/dist/ui/spinner.js

@@ -5,42 +5,7 @@ const l = {
   sm: "h-ico-sm w-ico-sm",
   md: "h-ico-md w-ico-md",
   lg: "h-ico-lg w-ico-lg"
-}, t = a.forwardRef(
-  ({ size: e = "md", className: s, ...i }, n) => /* @__PURE__ */ r("span", { role: "status", children: [
-    /* @__PURE__ */ r(
-      "svg",
-      {
-        ref: n,
-        className: c("animate-spin motion-reduce:animate-none", l[e], s),
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        ...i,
-        children: [
-          /* @__PURE__ */ o(
-            "circle",
-            {
-              cx: "12",
-              cy: "12",
-              r: "10",
-              stroke: "var(--color-border-subtle)",
-              strokeWidth: "4",
-              fill: "none"
-            }
-          ),
-          /* @__PURE__ */ o(
-            "path",
-            {
-              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
-              fill: "var(--color-interactive)"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ o("span", { className: "sr-only", children: "Loading..." })
-  ] })
-);
+}, t = a.forwardRef(({ size: e = "md", className: s, ...i }, n) => r("span", { role: "status", children: [r("svg", { ref: n, className: c("animate-spin motion-reduce:animate-none", l[e], s), viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...i, children: [o("circle", { cx: "12", cy: "12", r: "10", stroke: "var(--color-border-subtle)", strokeWidth: "4", fill: "none" }), o("path", { d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z", fill: "var(--color-interactive)" })] }), o("span", { className: "sr-only", children: "Loading..." })] }));
 t.displayName = "Spinner";
 export {
   t as Spinner

package/dist/ui/switch.js

@@ -3,26 +3,7 @@ import { jsx as e } from "react/jsx-runtime";
 import * as n from "react";
 import { Root as o, Thumb as d } from "../primitives/react-switch.js";
 import { cn as r } from "./lib/utils.js";
-const c = n.forwardRef(({ className: t, error: a, ...s }, i) => /* @__PURE__ */ e(
-  o,
-  {
-    className: r(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-transparent shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-[0.38] data-[state=checked]:bg-interactive data-[state=unchecked]:bg-border-strong",
-      a && "border-border-error data-[state=checked]:bg-error",
-      t
-    ),
-    ...s,
-    ref: i,
-    children: /* @__PURE__ */ e(
-      d,
-      {
-        className: r(
-          "pointer-events-none block h-ico-md w-ico-md rounded-ds-full bg-text-on-color shadow-02 ring-0 transition-transform duration-fast-01 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-        )
-      }
-    )
-  }
-));
+const c = n.forwardRef(({ className: t, error: a, ...s }, i) => e(o, { className: r("peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-transparent shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-[0.38] data-[state=checked]:bg-interactive data-[state=unchecked]:bg-border-strong", a && "border-border-error data-[state=checked]:bg-error", t), ...s, ref: i, children: e(d, { className: r("pointer-events-none block h-ico-md w-ico-md rounded-ds-full bg-text-on-color shadow-02 ring-0 transition-transform duration-fast-01 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0") }) }));
 c.displayName = o.displayName;
 export {
   c as Switch

package/dist/ui/tabs.js

@@ -12,60 +12,33 @@ const R = m, v = r.createContext({ variant: "line" }), p = f("inline-flex items-
     }
   },
   defaultVariants: { variant: "line" }
-}), u = f(
-  "inline-flex items-center justify-center whitespace-nowrap font-sans text-ds-md font-medium transition-[color,background-color,border-color,box-shadow] duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-[0.38]",
-  {
-    variants: {
-      variant: {
-        line: [
-          "px-ds-05 py-ds-03 -mb-px border-b-2 border-transparent",
-          "text-text-secondary hover:text-text-primary",
-          "data-[state=active]:border-interactive data-[state=active]:text-interactive"
-        ],
-        contained: [
-          "px-ds-05 py-ds-02b rounded-ds-md",
-          "text-text-secondary hover:text-text-primary",
-          "data-[state=active]:bg-layer-01 data-[state=active]:shadow-01 data-[state=active]:text-text-primary"
-        ]
-      }
-    },
-    defaultVariants: { variant: "line" }
-  }
-), x = r.forwardRef(({ className: t, variant: e, ...a }, n) => {
-  const i = e ?? "line";
-  return /* @__PURE__ */ s(v.Provider, { value: { variant: i }, children: /* @__PURE__ */ s(
-    c,
-    {
-      ref: n,
-      className: o(p({ variant: i }), t),
-      ...a
+}), u = f("inline-flex items-center justify-center whitespace-nowrap font-sans text-ds-md font-medium transition-[color,background-color,border-color,box-shadow] duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-[0.38]", {
+  variants: {
+    variant: {
+      line: [
+        "px-ds-05 py-ds-03 -mb-px border-b-2 border-transparent",
+        "text-text-secondary hover:text-text-primary",
+        "data-[state=active]:border-interactive data-[state=active]:text-interactive"
+      ],
+      contained: [
+        "px-ds-05 py-ds-02b rounded-ds-md",
+        "text-text-secondary hover:text-text-primary",
+        "data-[state=active]:bg-layer-01 data-[state=active]:shadow-01 data-[state=active]:text-text-primary"
+      ]
     }
-  ) });
+  },
+  defaultVariants: { variant: "line" }
+}), x = r.forwardRef(({ className: t, variant: e, ...a }, n) => {
+  const i = e ?? "line";
+  return s(v.Provider, { value: { variant: i }, children: s(c, { ref: n, className: o(p({ variant: i }), t), ...a }) });
 });
 x.displayName = c.displayName;
 const g = r.forwardRef(({ className: t, variant: e, ...a }, n) => {
   const i = r.useContext(v), b = e ?? i.variant;
-  return /* @__PURE__ */ s(
-    l,
-    {
-      ref: n,
-      className: o(u({ variant: b }), t),
-      ...a
-    }
-  );
+  return s(l, { ref: n, className: o(u({ variant: b }), t), ...a });
 });
 g.displayName = l.displayName;
-const y = r.forwardRef(({ className: t, ...e }, a) => /* @__PURE__ */ s(
-  d,
-  {
-    ref: a,
-    className: o(
-      "mt-ds-05 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
-      t
-    ),
-    ...e
-  }
-));
+const y = r.forwardRef(({ className: t, ...e }, a) => s(d, { ref: a, className: o("mt-ds-05 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2", t), ...e }));
 y.displayName = d.displayName;
 export {
   R as Tabs,

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
@@ -1302,6 +1320,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 +1534,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 +1634,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 +1680,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 +1721,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 +1749,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 +1776,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 +1792,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 })