tembro 4.0.1 → 4.1.0

package/packages/cli/vendor/src/components/modern/rich-text-editor.tsx

@@ -7,8 +7,13 @@ import Link from "@tiptap/extension-link"
 import Placeholder from "@tiptap/extension-placeholder"
 import {
   BoldIcon,
-  CodeIcon,
+  Code2Icon,
+  EraserIcon,
+  Heading1Icon,
   Heading2Icon,
+  Heading3Icon,
+  MinusIcon,
+  PilcrowIcon,
   ItalicIcon,
   LinkIcon,
   ListIcon,
@@ -31,6 +36,14 @@ export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "defaultValu
   editable?: boolean
   autoFocus?: boolean
   minHeight?: number
+  maxHeight?: number
+  maxLength?: number
+  toolbar?: boolean
+  stickyToolbar?: boolean
+  toolbarSize?: "compact" | "default"
+  features?: RichTextFeature[]
+  showCharacterCount?: boolean
+  showWordCount?: boolean
   onLinkRequest?: (currentHref?: string) => string | null | undefined
   labels?: {
     editor?: string
@@ -38,7 +51,32 @@ export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "defaultValu
   }
 }
 
+export type RichTextFeature =
+  | "history"
+  | "bold"
+  | "italic"
+  | "strike"
+  | "code"
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "paragraph"
+  | "bulletList"
+  | "orderedList"
+  | "blockquote"
+  | "codeBlock"
+  | "horizontalRule"
+  | "link"
+  | "clearFormatting"
+
+const defaultFeatures: RichTextFeature[] = [
+  "history", "bold", "italic", "strike", "code", "heading1", "heading2", "heading3", "paragraph",
+  "bulletList", "orderedList", "blockquote", "codeBlock", "horizontalRule", "link", "clearFormatting",
+]
+
 type ToolbarAction = {
+  feature: RichTextFeature
+  group: string
   label: string
   icon: React.ComponentType<{ className?: string }>
   active?: boolean
@@ -54,23 +92,42 @@ function contentForEditor(value: string, output: "text" | "html") {
   return output === "html" ? value : `<p>${escapeHtml(value)}</p>`
 }
 
-function EditorToolbar({ editor, onLinkRequest, label }: { editor: Editor; onLinkRequest?: RichTextEditorProps["onLinkRequest"]; label: string }) {
+function EditorToolbar({ editor, onLinkRequest, label, features = defaultFeatures, sticky = false, size = "default" }: { editor: Editor; onLinkRequest?: RichTextEditorProps["onLinkRequest"]; label: string; features?: RichTextFeature[]; sticky?: boolean; size?: "compact" | "default" }) {
+  const [, refresh] = React.useReducer((value) => value + 1, 0)
+  React.useEffect(() => {
+    const update = () => refresh()
+    editor.on("transaction", update)
+    editor.on("selectionUpdate", update)
+    return () => {
+      editor.off("transaction", update)
+      editor.off("selectionUpdate", update)
+    }
+  }, [editor])
+
   const linkHref = editor.getAttributes("link").href as string | undefined
   const actions: ToolbarAction[] = [
-    { label: "Undo", icon: Undo2Icon, disabled: !editor.can().undo(), run: () => editor.chain().focus().undo().run() },
-    { label: "Redo", icon: Redo2Icon, disabled: !editor.can().redo(), run: () => editor.chain().focus().redo().run() },
-    { label: "Bold", icon: BoldIcon, active: editor.isActive("bold"), run: () => editor.chain().focus().toggleBold().run() },
-    { label: "Italic", icon: ItalicIcon, active: editor.isActive("italic"), run: () => editor.chain().focus().toggleItalic().run() },
-    { label: "Strike", icon: StrikethroughIcon, active: editor.isActive("strike"), run: () => editor.chain().focus().toggleStrike().run() },
-    { label: "Inline code", icon: CodeIcon, active: editor.isActive("code"), run: () => editor.chain().focus().toggleCode().run() },
-    { label: "Heading", icon: Heading2Icon, active: editor.isActive("heading", { level: 2 }), run: () => editor.chain().focus().toggleHeading({ level: 2 }).run() },
-    { label: "Bullet list", icon: ListIcon, active: editor.isActive("bulletList"), run: () => editor.chain().focus().toggleBulletList().run() },
-    { label: "Ordered list", icon: ListOrderedIcon, active: editor.isActive("orderedList"), run: () => editor.chain().focus().toggleOrderedList().run() },
-    { label: "Blockquote", icon: QuoteIcon, active: editor.isActive("blockquote"), run: () => editor.chain().focus().toggleBlockquote().run() },
+    { feature: "history", group: "history", label: "Undo", icon: Undo2Icon, disabled: !editor.can().undo(), run: () => editor.chain().focus().undo().run() },
+    { feature: "history", group: "history", label: "Redo", icon: Redo2Icon, disabled: !editor.can().redo(), run: () => editor.chain().focus().redo().run() },
+    { feature: "bold", group: "marks", label: "Bold", icon: BoldIcon, active: editor.isActive("bold"), run: () => editor.chain().focus().toggleBold().run() },
+    { feature: "italic", group: "marks", label: "Italic", icon: ItalicIcon, active: editor.isActive("italic"), run: () => editor.chain().focus().toggleItalic().run() },
+    { feature: "strike", group: "marks", label: "Strike", icon: StrikethroughIcon, active: editor.isActive("strike"), run: () => editor.chain().focus().toggleStrike().run() },
+    { feature: "code", group: "marks", label: "Inline code", icon: Code2Icon, active: editor.isActive("code"), run: () => editor.chain().focus().toggleCode().run() },
+    { feature: "paragraph", group: "blocks", label: "Paragraph", icon: PilcrowIcon, active: editor.isActive("paragraph"), run: () => editor.chain().focus().setParagraph().run() },
+    { feature: "heading1", group: "blocks", label: "Heading 1", icon: Heading1Icon, active: editor.isActive("heading", { level: 1 }), run: () => editor.chain().focus().toggleHeading({ level: 1 }).run() },
+    { feature: "heading2", group: "blocks", label: "Heading 2", icon: Heading2Icon, active: editor.isActive("heading", { level: 2 }), run: () => editor.chain().focus().toggleHeading({ level: 2 }).run() },
+    { feature: "heading3", group: "blocks", label: "Heading 3", icon: Heading3Icon, active: editor.isActive("heading", { level: 3 }), run: () => editor.chain().focus().toggleHeading({ level: 3 }).run() },
+    { feature: "bulletList", group: "lists", label: "Bullet list", icon: ListIcon, active: editor.isActive("bulletList"), run: () => editor.chain().focus().toggleBulletList().run() },
+    { feature: "orderedList", group: "lists", label: "Ordered list", icon: ListOrderedIcon, active: editor.isActive("orderedList"), run: () => editor.chain().focus().toggleOrderedList().run() },
+    { feature: "blockquote", group: "lists", label: "Blockquote", icon: QuoteIcon, active: editor.isActive("blockquote"), run: () => editor.chain().focus().toggleBlockquote().run() },
+    { feature: "codeBlock", group: "insert", label: "Code block", icon: Code2Icon, active: editor.isActive("codeBlock"), run: () => editor.chain().focus().toggleCodeBlock().run() },
+    { feature: "horizontalRule", group: "insert", label: "Horizontal rule", icon: MinusIcon, run: () => editor.chain().focus().setHorizontalRule().run() },
+    { feature: "clearFormatting", group: "clear", label: "Clear formatting", icon: EraserIcon, run: () => editor.chain().focus().unsetAllMarks().clearNodes().run() },
   ]
 
-  if (onLinkRequest) {
+  if (onLinkRequest && features.includes("link")) {
     actions.push({
+      feature: "link",
+      group: "link",
       label: "Set link",
       icon: LinkIcon,
       active: editor.isActive("link"),
@@ -84,26 +141,31 @@ function EditorToolbar({ editor, onLinkRequest, label }: { editor: Editor; onLin
   }
 
   if (editor.isActive("link")) {
-    actions.push({ label: "Remove link", icon: UnlinkIcon, run: () => editor.chain().focus().unsetLink().run() })
+    actions.push({ feature: "link", group: "link", label: "Remove link", icon: UnlinkIcon, run: () => editor.chain().focus().unsetLink().run() })
   }
 
+  const visibleActions = actions.filter((action) => features.includes(action.feature))
+
   return (
-    <div role="toolbar" aria-label={label} className="flex flex-wrap gap-1 border-b p-1.5">
-      {actions.map((action) => {
+    <div role="toolbar" aria-label={label} data-size={size} data-sticky={sticky || undefined} className={cn("flex flex-wrap items-center gap-1 border-b bg-background/95 p-1.5", sticky && "sticky top-0 z-10 backdrop-blur", size === "compact" && "flex-nowrap overflow-x-auto p-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden")}>
+      {visibleActions.map((action, index) => {
         const Icon = action.icon
+        const showSeparator = index > 0 && visibleActions[index - 1]?.group !== action.group
         return (
-          <button
-            key={action.label}
-            type="button"
-            title={action.label}
-            aria-label={action.label}
-            aria-pressed={action.active || undefined}
-            disabled={action.disabled}
-            className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent aria-pressed:text-foreground disabled:pointer-events-none disabled:opacity-40"
-            onClick={action.run}
-          >
-            <Icon className="size-4" />
-          </button>
+          <React.Fragment key={action.label}>
+            {showSeparator ? <span role="separator" aria-orientation="vertical" className="mx-0.5 h-5 w-px shrink-0 bg-border" /> : null}
+            <button
+              type="button"
+              title={action.label}
+              aria-label={action.label}
+              aria-pressed={action.active || undefined}
+              disabled={action.disabled}
+              className={cn("grid size-8 shrink-0 place-items-center rounded-md p-0 text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring aria-pressed:bg-accent aria-pressed:text-foreground disabled:pointer-events-none disabled:opacity-40", size === "compact" && "size-7")}
+              onClick={action.run}
+            >
+              <Icon className="size-4" />
+            </button>
+          </React.Fragment>
         )
       })}
     </div>
@@ -119,6 +181,14 @@ function MountedRichTextEditor({
   editable = true,
   autoFocus = false,
   minHeight = 144,
+  maxHeight,
+  maxLength,
+  toolbar = true,
+  stickyToolbar = false,
+  toolbarSize = "default",
+  features = defaultFeatures,
+  showCharacterCount = false,
+  showWordCount = false,
   onLinkRequest,
   labels,
   className,
@@ -145,6 +215,14 @@ function MountedRichTextEditor({
       onValueChange?.(output === "html" ? nextEditor.getHTML() : nextEditor.getText())
     },
   })
+  const [, refreshCount] = React.useReducer((value) => value + 1, 0)
+
+  React.useEffect(() => {
+    if (!editor) return
+    const update = () => refreshCount()
+    editor.on("update", update)
+    return () => { editor.off("update", update) }
+  }, [editor])
 
   React.useEffect(() => {
     if (!editor || value === undefined) return
@@ -160,16 +238,21 @@ function MountedRichTextEditor({
     <div
       data-slot="rich-text-editor"
       data-disabled={!editable || undefined}
-      className={cn("overflow-hidden rounded-md border bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring data-[disabled]:opacity-60", className)}
+      data-over-limit={editor && maxLength !== undefined && editor.getText().length > maxLength || undefined}
+      className={cn("overflow-hidden rounded-md border bg-background shadow-sm transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/25 data-[disabled]:opacity-60 data-[over-limit=true]:border-destructive", className)}
       {...props}
     >
-      {editor && editable ? <EditorToolbar editor={editor} onLinkRequest={onLinkRequest} label={labels?.toolbar ?? "Text formatting"} /> : null}
+      {editor && editable && toolbar ? <EditorToolbar editor={editor} onLinkRequest={onLinkRequest} label={labels?.toolbar ?? "Text formatting"} features={features} sticky={stickyToolbar} size={toolbarSize} /> : null}
       <EditorContent
         editor={editor}
         aria-label={labels?.editor ?? "Rich text editor"}
-        className="[&_.tiptap]:px-3 [&_.tiptap]:py-2.5 [&_.tiptap]:outline-none [&_.tiptap_a]:text-primary [&_.tiptap_a]:underline [&_.tiptap_blockquote]:border-l-2 [&_.tiptap_blockquote]:pl-3 [&_.tiptap_h2]:text-lg [&_.tiptap_h2]:font-semibold [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:pl-6 [&_.tiptap_p.is-editor-empty:first-child:before]:pointer-events-none [&_.tiptap_p.is-editor-empty:first-child:before]:float-left [&_.tiptap_p.is-editor-empty:first-child:before]:h-0 [&_.tiptap_p.is-editor-empty:first-child:before]:text-muted-foreground [&_.tiptap_p.is-editor-empty:first-child:before]:content-[attr(data-placeholder)] [&_.tiptap_ul]:list-disc [&_.tiptap_ul]:pl-6"
-        style={{ minHeight }}
+        className="overflow-y-auto [&_.tiptap]:min-h-[var(--editor-min-height)] [&_.tiptap]:px-3.5 [&_.tiptap]:py-3 [&_.tiptap]:text-sm [&_.tiptap]:leading-6 [&_.tiptap]:outline-none [&_.tiptap>*+*]:mt-2 [&_.tiptap_a]:text-primary [&_.tiptap_a]:underline [&_.tiptap_blockquote]:border-l-2 [&_.tiptap_blockquote]:border-primary/50 [&_.tiptap_blockquote]:pl-3 [&_.tiptap_code]:rounded [&_.tiptap_code]:bg-muted [&_.tiptap_code]:px-1 [&_.tiptap_code]:py-0.5 [&_.tiptap_h1]:text-2xl [&_.tiptap_h1]:font-semibold [&_.tiptap_h2]:text-xl [&_.tiptap_h2]:font-semibold [&_.tiptap_h3]:text-lg [&_.tiptap_h3]:font-semibold [&_.tiptap_hr]:my-4 [&_.tiptap_hr]:border-border [&_.tiptap_ol]:list-decimal [&_.tiptap_ol]:pl-6 [&_.tiptap_p.is-editor-empty:first-child:before]:pointer-events-none [&_.tiptap_p.is-editor-empty:first-child:before]:float-left [&_.tiptap_p.is-editor-empty:first-child:before]:h-0 [&_.tiptap_p.is-editor-empty:first-child:before]:text-muted-foreground [&_.tiptap_p.is-editor-empty:first-child:before]:content-[attr(data-placeholder)] [&_.tiptap_pre]:overflow-x-auto [&_.tiptap_pre]:rounded-md [&_.tiptap_pre]:bg-muted [&_.tiptap_pre]:p-3 [&_.tiptap_ul]:list-disc [&_.tiptap_ul]:pl-6"
+        style={{ "--editor-min-height": `${minHeight}px`, maxHeight } as React.CSSProperties}
       />
+      {editor && (showCharacterCount || showWordCount || maxLength !== undefined) ? <div data-slot="rich-text-editor-footer" className="flex items-center justify-end gap-3 border-t bg-muted/20 px-3 py-1.5 text-[11px] text-muted-foreground">
+        {showWordCount ? <span>{editor.getText().trim() ? editor.getText().trim().split(/\s+/).length : 0} words</span> : null}
+        {showCharacterCount || maxLength !== undefined ? <span className={cn(maxLength !== undefined && editor.getText().length > maxLength && "font-medium text-destructive")}>{editor.getText().length}{maxLength !== undefined ? `/${maxLength}` : " characters"}</span> : null}
+      </div> : null}
     </div>
   )
 }

package/packages/cli/vendor/src/components/theme-provider.tsx

@@ -1,74 +1,120 @@
-"use client"
-
+"use client"
+
 import * as React from "react"
 
-type ThemeMode = "light" | "dark" | "system"
-type ResolvedThemeMode = "light" | "dark"
+export type ThemeName = string
+export type ThemeMode = ThemeName | "system"
+export type ThemeColorScheme = "light" | "dark"
+
+export type ThemeProviderProps = {
+  children: React.ReactNode
+  themes?: ThemeName[]
+  defaultTheme?: ThemeMode
+  forcedTheme?: ThemeName
+  storageKey?: string
+  enableSystem?: boolean
+  attribute?: "class" | "data-theme" | "both"
+  colorSchemes?: Record<ThemeName, ThemeColorScheme>
+  disableTransitionOnChange?: boolean
+  onThemeChange?: (theme: ThemeMode, resolvedTheme: ThemeName) => void
+}
 
 type ThemeContextValue = {
   theme: ThemeMode
-  resolvedTheme: ResolvedThemeMode
+  resolvedTheme: ThemeName
+  systemTheme: ThemeColorScheme
+  themes: ThemeName[]
   mounted: boolean
   setTheme: (theme: ThemeMode) => void
   toggleTheme: () => void
 }
 
 const THEME_STORAGE_KEY = "tembro-theme"
+const defaultThemes = ["light", "dark"]
+const defaultColorSchemes: Record<string, ThemeColorScheme> = { light: "light", dark: "dark", dim: "dark" }
 
 const ThemeContext = React.createContext<ThemeContextValue | null>(null)
 
-function getSystemTheme(): ResolvedThemeMode {
+function getSystemTheme(): ThemeColorScheme {
   if (typeof window === "undefined") return "light"
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
 }
 
-function resolveInitialTheme(): ThemeMode {
-  if (typeof window === "undefined") return "system"
-
-  const stored = window.localStorage.getItem(THEME_STORAGE_KEY)
-  if (stored === "light" || stored === "dark" || stored === "system") return stored
-
-  return "system"
-}
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setThemeState] = React.useState<ThemeMode>(resolveInitialTheme)
+export function ThemeProvider({
+  children,
+  themes = defaultThemes,
+  defaultTheme = "system",
+  forcedTheme,
+  storageKey = THEME_STORAGE_KEY,
+  enableSystem = true,
+  attribute = "both",
+  colorSchemes = defaultColorSchemes,
+  disableTransitionOnChange = true,
+  onThemeChange,
+}: ThemeProviderProps) {
+  const availableThemes = React.useMemo(() => Array.from(new Set(themes.length ? themes : defaultThemes)), [themes])
+  const [theme, setThemeState] = React.useState<ThemeMode>(() => {
+    if (typeof window === "undefined") return defaultTheme
+    const stored = window.localStorage.getItem(storageKey)
+    if (stored === "system" && enableSystem) return stored
+    if (stored && availableThemes.includes(stored)) return stored
+    return defaultTheme
+  })
   const [mounted, setMounted] = React.useState(false)
-  const [systemTheme, setSystemTheme] = React.useState<ResolvedThemeMode>(getSystemTheme)
-  const resolvedTheme = theme === "system" ? systemTheme : theme
+  const [systemTheme, setSystemTheme] = React.useState<ThemeColorScheme>(getSystemTheme)
+  const appliedClassRef = React.useRef<string | undefined>(undefined)
+  const activeTheme = forcedTheme ?? theme
+  const resolvedTheme = activeTheme === "system"
+    ? (availableThemes.includes(systemTheme) ? systemTheme : availableThemes[0] ?? "light")
+    : activeTheme
+  const colorScheme = colorSchemes[resolvedTheme] ?? defaultColorSchemes[resolvedTheme] ?? (resolvedTheme === "dark" ? "dark" : "light")
 
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
+  React.useEffect(() => { setMounted(true) }, [])
 
   React.useEffect(() => {
+    if (!enableSystem) return
     const media = window.matchMedia("(prefers-color-scheme: dark)")
     const updateSystemTheme = () => setSystemTheme(media.matches ? "dark" : "light")
-
     updateSystemTheme()
     media.addEventListener("change", updateSystemTheme)
     return () => media.removeEventListener("change", updateSystemTheme)
-  }, [])
+  }, [enableSystem])
 
   React.useEffect(() => {
     const root = window.document.documentElement
-    root.classList.toggle("dark", resolvedTheme === "dark")
-    root.style.colorScheme = resolvedTheme
-    window.localStorage.setItem(THEME_STORAGE_KEY, theme)
-  }, [resolvedTheme, theme])
+    let restoreTransitions: (() => void) | undefined
+    if (disableTransitionOnChange) {
+      const style = document.createElement("style")
+      style.textContent = "*,*::before,*::after{transition:none!important}"
+      document.head.append(style)
+      void window.getComputedStyle(root).opacity
+      restoreTransitions = () => window.setTimeout(() => style.remove(), 0)
+    }
+
+    if (attribute === "class" || attribute === "both") {
+      if (appliedClassRef.current) root.classList.remove(appliedClassRef.current)
+      root.classList.remove("light", "dark")
+      root.classList.add(resolvedTheme)
+      if (colorScheme === "dark" && resolvedTheme !== "dark") root.classList.add("dark")
+      appliedClassRef.current = resolvedTheme
+    }
+    if (attribute === "data-theme" || attribute === "both") root.dataset.theme = resolvedTheme
+    root.style.colorScheme = colorScheme
+    if (!forcedTheme) window.localStorage.setItem(storageKey, theme)
+    onThemeChange?.(theme, resolvedTheme)
+    restoreTransitions?.()
+  }, [attribute, colorScheme, disableTransitionOnChange, forcedTheme, onThemeChange, resolvedTheme, storageKey, theme])
 
   const setTheme = React.useCallback((nextTheme: ThemeMode) => {
-    setThemeState(nextTheme)
-  }, [])
+    if (nextTheme === "system" ? enableSystem : availableThemes.includes(nextTheme)) setThemeState(nextTheme)
+  }, [availableThemes, enableSystem])
 
   const toggleTheme = React.useCallback(() => {
-    setThemeState((current) => (current === "system" ? "dark" : current === "dark" ? "light" : "system"))
-  }, [])
+    const cycle: ThemeMode[] = [...availableThemes, ...(enableSystem ? ["system" as const] : [])]
+    setThemeState((current) => cycle[(cycle.indexOf(current) + 1) % cycle.length] ?? availableThemes[0] ?? "light")
+  }, [availableThemes, enableSystem])
 
-  const value = React.useMemo(
-    () => ({ theme, resolvedTheme, mounted, setTheme, toggleTheme }),
-    [mounted, resolvedTheme, setTheme, theme, toggleTheme]
-  )
+  const value = React.useMemo<ThemeContextValue>(() => ({ theme, resolvedTheme, systemTheme, themes: availableThemes, mounted, setTheme, toggleTheme }), [availableThemes, mounted, resolvedTheme, setTheme, systemTheme, theme, toggleTheme])
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }

package/packages/cli/vendor/src/components/ui/badge/index.tsx

@@ -47,7 +47,7 @@ const badgeVariants = cva(
 )
 
 type BadgeProps = useRender.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & {
+  Omit<VariantProps<typeof badgeVariants>, "dot"> & {
     label?: React.ReactNode
     count?: React.ReactNode
     status?: "neutral" | "info" | "success" | "warning" | "danger" | "muted"
@@ -57,6 +57,12 @@ type BadgeProps = useRender.ComponentProps<"span"> &
     removeLabel?: string
     leftIcon?: React.ReactNode
     rightIcon?: React.ReactNode
+    avatar?: React.ReactNode
+    dot?: boolean | React.ReactNode
+    showDot?: boolean
+    dotPosition?: "start" | "end"
+    pulse?: boolean
+    interactive?: boolean
   }
 
 function Badge({
@@ -74,6 +80,11 @@ function Badge({
   removeLabel = "Remove badge",
   leftIcon,
   rightIcon,
+  avatar,
+  showDot,
+  dotPosition = "start",
+  pulse = false,
+  interactive = false,
   children,
   render,
   onKeyDown,
@@ -81,18 +92,24 @@ function Badge({
 }: BadgeProps) {
   const resolvedTone = status ?? tone
   const resolvedLabel = label ?? children
-  const showDot = dot || status === "success" || status === "warning" || status === "danger" || status === "info"
+  const resolvedShowDot = showDot ?? Boolean(dot || status === "success" || status === "warning" || status === "danger" || status === "info")
+  const dotNode = resolvedShowDot ? (
+    <span data-slot="badge-dot" data-pulse={pulse || undefined}>
+      {React.isValidElement(dot) ? dot : null}
+    </span>
+  ) : null
 
   return useRender({
     defaultTagName: "span",
     props: mergeProps<"span">(
       {
         className: cn(
-          badgeVariants({ variant, tone: resolvedTone, size, dot: showDot }),
+          badgeVariants({ variant, tone: resolvedTone, size, dot: resolvedShowDot }),
           selected && "ring-2 ring-ring/45 ring-offset-1",
+          interactive && "cursor-pointer",
           className
         ),
-        tabIndex: removable ? 0 : undefined,
+        tabIndex: removable || interactive ? 0 : undefined,
         onKeyDown: (event: React.KeyboardEvent<HTMLSpanElement>) => {
           if (removable && (event.key === "Backspace" || event.key === "Delete")) {
             event.preventDefault()
@@ -102,8 +119,9 @@ function Badge({
         },
         children: (
           <>
-            {showDot ? <span data-slot="badge-dot" /> : null}
-            {leftIcon ? <span data-icon="inline-start" data-slot="badge-icon" className="inline-flex shrink-0 items-center">{leftIcon}</span> : null}
+            {dotPosition === "start" ? dotNode : null}
+            {avatar ? <span data-slot="badge-avatar" className="grid shrink-0 place-items-center overflow-hidden rounded-full">{avatar}</span> : null}
+            {leftIcon ? <span data-icon="inline-start" data-slot="badge-icon" className="grid shrink-0 place-items-center">{leftIcon}</span> : null}
             {resolvedLabel ? <span data-slot="badge-label">{resolvedLabel}</span> : null}
             {count != null ? (
               <span
@@ -112,7 +130,8 @@ function Badge({
                 {count}
               </span>
             ) : null}
-            {rightIcon ? <span data-icon="inline-end" data-slot="badge-icon" className="inline-flex shrink-0 items-center">{rightIcon}</span> : null}
+            {rightIcon ? <span data-icon="inline-end" data-slot="badge-icon" className="grid shrink-0 place-items-center">{rightIcon}</span> : null}
+            {dotPosition === "end" ? dotNode : null}
             {removable ? (
               <button
                 type="button"
@@ -136,6 +155,8 @@ function Badge({
         "data-size": size ?? "default",
         "data-removable": removable || undefined,
         "data-selected": selected || undefined,
+        "data-interactive": interactive || undefined,
+        "data-pulse": pulse || undefined,
       } as React.HTMLAttributes<HTMLSpanElement>,
       props
     ),
@@ -145,7 +166,7 @@ function Badge({
       variant,
       tone: resolvedTone,
       size,
-      dot: showDot,
+      dot: resolvedShowDot,
     },
   })
 }

package/packages/cli/vendor/src/components/ui/input/clearable.tsx

@@ -98,12 +98,12 @@ const ClearableInput = React.forwardRef<HTMLInputElement, ClearableInputProps>(
                 type="button"
                 data-slot="clearable-input-clear"
                 aria-label={clearLabel}
-                className="inline-flex size-7 items-center justify-center rounded-[var(--radius-sm)] border border-transparent bg-transparent text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                className="grid size-7 shrink-0 place-items-center rounded-[var(--radius-sm)] border border-transparent bg-transparent p-0 leading-none text-muted-foreground/74 transition hover:border-border/60 hover:bg-muted/58 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                 onClick={handleClearClick}
                 onMouseDown={handleClearMouseDown}
                 onDoubleClick={handleClearMouseDown}
               >
-                <XIcon className="size-4" />
+                <XIcon className="size-3.5" strokeWidth={2} />
               </button>
             )}
           </>

package/packages/cli/vendor/src/components/ui/input/primitive.tsx

@@ -13,7 +13,7 @@ function InputPrimitive({ className, type, ...props }: InputPrimitiveProps) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-11 w-full min-w-0 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:color-mix(in_oklch,var(--aui-control-border-strong,var(--input)),var(--foreground)_6%)] bg-[color:var(--aui-control-surface,var(--background))] px-3.5 py-2.5 text-sm font-normal text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/74 hover:border-[color:color-mix(in_oklch,var(--aui-control-hover-border,var(--ring)),var(--foreground)_10%)] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
+        "h-11 w-full min-w-0 rounded-[var(--aui-control-radius,var(--radius-md))] border border-[color:color-mix(in_oklch,var(--aui-control-border-strong,var(--input)),var(--foreground)_6%)] bg-[color:var(--aui-control-surface,var(--background))] px-3.5 py-2.5 text-sm font-normal text-foreground shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04))] transition-[background-color,border-color,box-shadow,color] outline-none [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/74 hover:border-[color:color-mix(in_oklch,var(--aui-control-hover-border,var(--ring)),var(--foreground)_10%)] hover:bg-[color:var(--aui-control-surface-hover,var(--background))] focus-visible:border-[color:var(--ring)] focus-visible:ring-0 focus-visible:shadow-[var(--aui-shadow-xs,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring)),0_0_0_4px_var(--aui-focus-ring-soft,transparent)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[color:color-mix(in_oklch,var(--border),transparent_18%)] disabled:bg-[color:var(--aui-control-surface-disabled,var(--muted))] disabled:text-muted-foreground disabled:shadow-none disabled:opacity-100 read-only:bg-[color:var(--aui-control-surface-readonly,var(--muted))]",
         className
       )}
       {...props}

package/packages/cli/vendor/src/public-component-surface.ts

@@ -34,6 +34,7 @@ export const documentedPublicComponentSurfaces: readonly PublicComponentSurfaceE
   { slug: "code-block", registryName: "code-block", surface: "documented" },
   { slug: "data-state", registryName: "data-state", surface: "documented" },
   { slug: "kanban", registryName: "kanban", surface: "documented" },
+  { slug: "chat", registryName: "chat", surface: "documented" },
   { slug: "list", registryName: "list", surface: "documented" },
   { slug: "description-list", registryName: "description-list", surface: "documented" },
   { slug: "statistic", registryName: "statistic", surface: "documented" },

package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx

@@ -25,7 +25,7 @@ export function HeroSection() {
           <div className="flex flex-wrap gap-2">
             <Button leftIcon={<PlusIcon className="size-4" />}>Create</Button>
             <Button variant="outline" leftIcon={<SettingsIcon className="size-4" />}>Settings</Button>
-            <CopyButton value="npx tembro@4.0.1 list --json">Copy list command</CopyButton>
+            <CopyButton value="npx tembro@4.1.0 list --json">Copy list command</CopyButton>
           </div>
         </div>
 
@@ -33,7 +33,7 @@ export function HeroSection() {
           <StatisticCard label="Registry components" value={moduleCount} change="visible below" trend="up" description="tembro add <name>" />
           <StatisticCard label="Local source files" value="152" change="with hooks/lib" trend="up" description="installed by CLI" />
           <StatisticCard label="Categories" value={registryGroups.length} change="all shown" trend="up" description="actions to wizard" />
-          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@4.0.1" />
+          <StatisticCard label="Build" value="Pass" change="doctor pass" trend="up" description="tembro@4.1.0" />
         </StatisticGrid>
       </div>
     </section>

package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx

@@ -72,7 +72,7 @@ export function WorkbenchSidebar({ selectedKey, onSelect }: WorkbenchSidebarProp
           }),
         ]}
         footerAccount={{
-          label: "tembro@4.0.1",
+          label: "tembro@4.1.0",
           description: `${moduleCount} registry components`,
         }}
         activeIndicator="bar"