{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "example-voice-app", "type": "registry:block", "title": "Example Voice App", "description": "Talk and type in the same conversation, with one composer and shared context.", "dependencies": [ "@radix-ui/react-avatar@^1.1.3", "@radix-ui/react-slot@^1.2.2", "@radix-ui/react-tooltip@^1.2.6", "class-variance-authority@^0.7.1", "clsx@^2.1.1", "livekit-client@2.22.3", "lucide-react@0.577.0", "marked@^15.0.7", "motion@12.26.2", "next-themes@^0.4.4", "radix-ui@1.6.7", "react-aria-components@^1.21.1", "react-markdown@^10.1.0", "remark-breaks@^4.0.0", "remark-gfm@^4.0.1", "shiki@^3.0.0", "tailwind-merge@^3.0.1", "tailwindcss@^4.1.7", "tw-animate-css@1.3.6", "use-stick-to-bottom@^1.1.0" ], "registryDependencies": [], "files": [ { "path": "components/examples/voice-app.tsx", "target": "@components/examples/voice-app.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { ConversationAppExample } from \"./conversation-app\"\n\nexport function VoiceAppExample() {\n return (\n \n )\n}\n" }, { "path": "components/examples/conversation-app.tsx", "target": "@components/examples/conversation-app.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport {\n ChatContainerContent,\n ChatContainerRoot,\n} from \"@/components/prompt-kit/chat-container\"\nimport { Loader } from \"@/components/prompt-kit/loader\"\nimport { Message, MessageContent } from \"@/components/prompt-kit/message\"\nimport {\n PromptInput,\n PromptInputAction,\n PromptInputActions,\n PromptInputTextarea,\n} from \"@/components/prompt-kit/prompt-input\"\nimport { PromptSuggestion } from \"@/components/prompt-kit/prompt-suggestion\"\nimport { Button } from \"@/components/ui/button\"\nimport { ThemeToggle } from \"@/components/ui/theme-toggle\"\nimport { AgentTrackToggle } from \"@/components/voice-agents/livekit/agent-track-toggle\"\nimport { Shdr21 } from \"@/components/voice-agents/orbkit/shdr-21\"\nimport { cn } from \"@/lib/utils\"\nimport {\n ArrowUp,\n AudioLines,\n FileText,\n Paperclip,\n Square,\n X,\n} from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { useEffect, useRef, useState } from \"react\"\nimport {\n researchAnswer,\n researchProjects,\n type ResearchNote,\n} from \"./research-workflow\"\n\ntype Turn = {\n id: number\n role: \"user\" | \"assistant\"\n text: string\n input: \"text\" | \"voice\"\n}\nconst starters = [\n \"Summarize the dock interviews\",\n \"What should the team change first?\",\n]\nconst sampleSpokenQuestion = \"What is slowing down the dock handoff?\"\n\n/** Composition of kit components with shared text and voice demo state. */\nexport function ConversationAppExample({\n initialVoice = false,\n className,\n}: {\n initialVoice?: boolean\n className?: string\n} = {}) {\n const [voice, setVoice] = useState(initialVoice)\n const [phase, setPhase] = useState<\"idle\" | \"thinking\" | \"speaking\">(\"idle\")\n const [draft, setDraft] = useState(\"\")\n const [turns, setTurns] = useState([])\n const [muted, setMuted] = useState(false)\n const [concise, setConcise] = useState(true)\n const [attachment, setAttachment] = useState(null)\n const [notice, setNotice] = useState(\"\")\n const sequence = useRef(0)\n const attachmentVersion = useRef(0)\n const replyTimer = useRef | null>(null)\n const settleTimer = useRef | null>(null)\n const fileInput = useRef(null)\n const composer = useRef(null)\n const reduce = useReducedMotion()\n const centered = !voice && turns.length === 0\n const thinking = phase === \"thinking\"\n\n const clearTimers = () => {\n if (replyTimer.current) clearTimeout(replyTimer.current)\n if (settleTimer.current) clearTimeout(settleTimer.current)\n replyTimer.current = null\n settleTimer.current = null\n }\n useEffect(() => clearTimers, [])\n\n const send = (text: string, input: Turn[\"input\"] = \"text\") => {\n if (!text.trim() || thinking || (input === \"voice\" && muted)) return\n clearTimers()\n const answer = researchAnswer(\n text,\n attachment ? [attachment] : researchProjects[0].notes,\n concise\n )\n const turn: Turn = {\n id: ++sequence.current,\n role: \"user\",\n text: text.trim(),\n input,\n }\n setTurns((current) => [...current, turn])\n if (input === \"text\") setDraft(\"\")\n setNotice(\"\")\n setPhase(\"thinking\")\n replyTimer.current = setTimeout(() => {\n const reply: Turn = {\n id: ++sequence.current,\n role: \"assistant\",\n text: answer,\n input,\n }\n setTurns((current) => [...current, reply])\n setPhase(\"speaking\")\n replyTimer.current = null\n settleTimer.current = setTimeout(() => {\n setPhase(\"idle\")\n settleTimer.current = null\n }, 1800)\n }, 900)\n }\n const toggleVoice = () => {\n setVoice((current) => !current)\n setNotice(\"\")\n requestAnimationFrame(() =>\n composer.current?.querySelector(\"textarea\")?.focus()\n )\n }\n const stop = () => {\n clearTimers()\n setPhase(\"idle\")\n setNotice(\"Response stopped. You can continue the conversation.\")\n }\n const reset = () => {\n clearTimers()\n setTurns([])\n setDraft(\"\")\n setVoice(initialVoice)\n setPhase(\"idle\")\n setMuted(false)\n setConcise(true)\n attachmentVersion.current += 1\n setAttachment(null)\n setNotice(\"\")\n }\n const attach = async (file?: File) => {\n if (!file) return\n const version = ++attachmentVersion.current\n if (!/\\.(txt|md|csv)$/i.test(file.name) || file.size > 64 * 1024) {\n setNotice(\"Choose a text, Markdown, or CSV note under 64 KB.\")\n return\n }\n try {\n const text = await file.text()\n if (version !== attachmentVersion.current) return\n setAttachment({ id: file.name, title: file.name, text })\n setNotice(\"\")\n } catch {\n if (version === attachmentVersion.current)\n setNotice(\"That note could not be read. Try another file.\")\n }\n }\n const stateLabel = thinking\n ? \"Thinking\"\n : phase === \"speaking\"\n ? \"Speaking\"\n : muted\n ? \"Microphone muted\"\n : \"Listening\"\n\n return (\n \n
\n
\n

Fieldwork assistant

\n

\n Agents Kit · Conversation example\n

\n
\n
\n \n Reset preview\n \n \n
\n
\n\n
\n \n \n {turns.map((turn) => (\n \n \n

\n {turn.role === \"user\" ? \"You\" : \"Fieldwork assistant\"}\n {turn.input === \"voice\" && turn.role === \"user\" && (\n <>\n \n Voice\n \n )}\n

\n \n {turn.text}\n \n
\n \n ))}\n {thinking && (\n \n \n Reading the notes…\n \n )}\n \n \n\n \n {centered && (\n
\n

\n Work with your field notes\n

\n

\n Ask a question, talk it through, or add a source.\n

\n
\n )}\n \n {voice && (\n \n
\n \n
\n
\n

\n {stateLabel}\n

\n

\n Voice and typing share this conversation.\n

\n
\n \n )}\n \n\n send(draft)}\n isLoading={thinking}\n maxHeight={144}\n className=\"bg-card focus-within:ring-ring rounded-xl p-2 focus-within:ring-1\"\n >\n {attachment && (\n
\n \n {attachment.title}\n {\n attachmentVersion.current += 1\n setAttachment(null)\n }}\n >\n \n \n
\n )}\n \n \n
\n \n fileInput.current?.click()}\n >\n \n \n \n \n setConcise((value) => !value)}\n className=\"text-muted-foreground text-xs\"\n >\n {concise ? \"Concise\" : \"Detailed\"}\n \n \n
\n
\n {voice && (\n \n setMuted(!enabled)}\n aria-label={\n muted ? \"Unmute microphone\" : \"Mute microphone\"\n }\n />\n \n )}\n \n \n {voice ? : }\n \n \n \n send(draft)}\n >\n {thinking ? (\n \n ) : (\n \n )}\n \n \n
\n \n \n {\n void attach(event.currentTarget.files?.[0])\n event.currentTarget.value = \"\"\n }}\n />\n {notice && (\n

\n {notice}\n

\n )}\n {centered && (\n
\n {starters.map((text) => (\n send(text)}\n >\n {text}\n \n ))}\n
\n )}\n {voice && (\n
\n send(sampleSpokenQuestion, \"voice\")}\n className=\"text-muted-foreground h-7 px-0 text-xs\"\n >\n Try a sample voice turn\n \n
\n )}\n \n \n
\n Interactive demo · sample replies · no microphone recording\n
\n Components used\n
\n

Composed from Agents Kit

\n
    \n
  • \n Prompt Kit: input, messages, scrolling, suggestions, loader\n
    • \n
  • LiveKit: microphone toggle
    • \n
  • OrbKit: Nimbus
    • \n
  • Shared buttons and theme tokens
    • \n
\n
\n
\n
\n \n )\n}\n" }, { "path": "components/prompt-kit/chat-container.tsx", "target": "@components/prompt-kit/chat-container.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { StickToBottom } from \"use-stick-to-bottom\"\n\nexport type ChatContainerRootProps = {\n children: React.ReactNode\n className?: string\n} & React.HTMLAttributes\n\nexport type ChatContainerContentProps = {\n children: React.ReactNode\n className?: string\n} & React.HTMLAttributes\n\nexport type ChatContainerScrollAnchorProps = {\n className?: string\n ref?: React.RefObject\n} & React.HTMLAttributes\n\nfunction ChatContainerRoot({\n children,\n className,\n ...props\n}: ChatContainerRootProps) {\n return (\n \n {children}\n \n )\n}\n\nfunction ChatContainerContent({\n children,\n className,\n ...props\n}: ChatContainerContentProps) {\n return (\n \n {children}\n \n )\n}\n\nfunction ChatContainerScrollAnchor({\n className,\n ...props\n}: ChatContainerScrollAnchorProps) {\n return (\n \n )\n}\n\nexport { ChatContainerRoot, ChatContainerContent, ChatContainerScrollAnchor }\n" }, { "path": "lib/utils.ts", "target": "@lib/utils.ts", "type": "registry:lib", "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n\nexport function getSitePathname(\n pathname: string,\n basePath = process.env.NEXT_PUBLIC_BASE_PATH || \"\"\n) {\n const base = basePath.replace(/\\/+$/, \"\")\n const path =\n pathname === base || pathname.startsWith(`${base}/`)\n ? pathname.slice(base.length)\n : pathname\n return path.replace(/\\/+$/, \"\") || \"/\"\n}\n\n/**\n * Get the base URL depending on the current environment\n */\nexport function getBaseUrl() {\n const basePath = (process.env.NEXT_PUBLIC_BASE_PATH || \"\").replace(/\\/$/, \"\")\n const withBasePath = (url: string) => {\n const base = url.replace(/\\/$/, \"\")\n return basePath && !base.endsWith(basePath) ? `${base}${basePath}` : base\n }\n // For server-side rendering, we need to use environment variables\n if (typeof window === \"undefined\") {\n // Check for Vercel-specific environment variables\n // Production URL takes precedence if available (works in all environments)\n if (process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL) {\n return withBasePath(\n `https://${process.env.NEXT_PUBLIC_VERCEL_PROJECT_PRODUCTION_URL}`\n )\n }\n\n // For branch deployments\n if (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL) {\n return withBasePath(\n `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`\n )\n }\n\n // For regular deployments\n if (process.env.NEXT_PUBLIC_VERCEL_URL) {\n return withBasePath(`https://${process.env.NEXT_PUBLIC_VERCEL_URL}`)\n }\n\n // Legacy support\n if (process.env.VERCEL_URL) {\n return withBasePath(`https://${process.env.VERCEL_URL}`)\n }\n\n // Fall back to explicitly set environment variables\n if (process.env.NEXT_PUBLIC_BASE_URL) {\n return withBasePath(process.env.NEXT_PUBLIC_BASE_URL)\n }\n\n // Default for development - check PORT env var first\n const port = process.env.PORT || 3000\n return withBasePath(\n process.env.NODE_ENV === \"development\" ? `http://localhost:${port}` : \"\"\n )\n }\n\n // For client-side, we can just use the browser's location\n return withBasePath(window.location.origin)\n}\n" }, { "path": "components/prompt-kit/loader.tsx", "target": "@components/prompt-kit/loader.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\n\nexport interface LoaderProps {\n variant?:\n | \"circular\"\n | \"classic\"\n | \"pulse\"\n | \"pulse-dot\"\n | \"dots\"\n | \"typing\"\n | \"wave\"\n | \"bars\"\n | \"terminal\"\n | \"text-blink\"\n | \"text-shimmer\"\n | \"loading-dots\"\n size?: \"sm\" | \"md\" | \"lg\"\n text?: string\n className?: string\n}\n\nexport function CircularLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const sizeClasses = {\n sm: \"size-4\",\n md: \"size-5\",\n lg: \"size-6\",\n }\n\n return (\n \n Loading\n \n )\n}\n\nexport function ClassicLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const sizeClasses = {\n sm: \"size-4\",\n md: \"size-5\",\n lg: \"size-6\",\n }\n\n const barSizes = {\n sm: { height: \"6px\", width: \"1.5px\" },\n md: { height: \"8px\", width: \"2px\" },\n lg: { height: \"10px\", width: \"2.5px\" },\n }\n\n return (\n
\n
\n {[...Array(12)].map((_, i) => (\n \n ))}\n
\n Loading\n
\n )\n}\n\nexport function PulseLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const sizeClasses = {\n sm: \"size-4\",\n md: \"size-5\",\n lg: \"size-6\",\n }\n\n return (\n
\n
\n Loading\n
\n )\n}\n\nexport function PulseDotLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const sizeClasses = {\n sm: \"size-1\",\n md: \"size-2\",\n lg: \"size-3\",\n }\n\n return (\n \n Loading\n
\n )\n}\n\nexport function DotsLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const dotSizes = {\n sm: \"h-1.5 w-1.5\",\n md: \"h-2 w-2\",\n lg: \"h-2.5 w-2.5\",\n }\n\n const containerSizes = {\n sm: \"h-4\",\n md: \"h-5\",\n lg: \"h-6\",\n }\n\n return (\n \n {[...Array(3)].map((_, i) => (\n \n ))}\n Loading\n \n )\n}\n\nexport function TypingLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const dotSizes = {\n sm: \"h-1 w-1\",\n md: \"h-1.5 w-1.5\",\n lg: \"h-2 w-2\",\n }\n\n const containerSizes = {\n sm: \"h-4\",\n md: \"h-5\",\n lg: \"h-6\",\n }\n\n return (\n \n {[...Array(3)].map((_, i) => (\n \n ))}\n Loading\n \n )\n}\n\nexport function WaveLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const barWidths = {\n sm: \"w-0.5\",\n md: \"w-0.5\",\n lg: \"w-1\",\n }\n\n const containerSizes = {\n sm: \"h-4\",\n md: \"h-5\",\n lg: \"h-6\",\n }\n\n const heights = {\n sm: [\"6px\", \"9px\", \"12px\", \"9px\", \"6px\"],\n md: [\"8px\", \"12px\", \"16px\", \"12px\", \"8px\"],\n lg: [\"10px\", \"15px\", \"20px\", \"15px\", \"10px\"],\n }\n\n return (\n \n {[...Array(5)].map((_, i) => (\n \n ))}\n Loading\n \n )\n}\n\nexport function BarsLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const barWidths = {\n sm: \"w-1\",\n md: \"w-1.5\",\n lg: \"w-2\",\n }\n\n const containerSizes = {\n sm: \"h-4 gap-1\",\n md: \"h-5 gap-1.5\",\n lg: \"h-6 gap-2\",\n }\n\n return (\n
\n {[...Array(3)].map((_, i) => (\n \n ))}\n Loading\n
\n )\n}\n\nexport function TerminalLoader({\n className,\n size = \"md\",\n}: {\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const cursorSizes = {\n sm: \"h-3 w-1.5\",\n md: \"h-4 w-2\",\n lg: \"h-5 w-2.5\",\n }\n\n const textSizes = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n }\n\n const containerSizes = {\n sm: \"h-4\",\n md: \"h-5\",\n lg: \"h-6\",\n }\n\n return (\n \n \n {\">\"}\n \n \n Loading\n \n )\n}\n\nexport function TextBlinkLoader({\n text = \"Thinking\",\n className,\n size = \"md\",\n}: {\n text?: string\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const textSizes = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n }\n\n return (\n \n {text}\n \n )\n}\n\nexport function TextShimmerLoader({\n text = \"Thinking\",\n className,\n size = \"md\",\n}: {\n text?: string\n className?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const textSizes = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n }\n\n return (\n \n {text}\n \n )\n}\n\nexport function TextDotsLoader({\n className,\n text = \"Thinking\",\n size = \"md\",\n}: {\n className?: string\n text?: string\n size?: \"sm\" | \"md\" | \"lg\"\n}) {\n const textSizes = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n }\n\n return (\n \n \n {text}\n \n \n \n .\n \n \n .\n \n \n .\n \n \n \n )\n}\n\nfunction Loader({\n variant = \"circular\",\n size = \"md\",\n text,\n className,\n}: LoaderProps) {\n switch (variant) {\n case \"circular\":\n return \n case \"classic\":\n return \n case \"pulse\":\n return \n case \"pulse-dot\":\n return \n case \"dots\":\n return \n case \"typing\":\n return \n case \"wave\":\n return \n case \"bars\":\n return \n case \"terminal\":\n return \n case \"text-blink\":\n return \n case \"text-shimmer\":\n return \n case \"loading-dots\":\n return \n default:\n return \n }\n}\n\nexport { Loader }\n" }, { "path": "components/prompt-kit/message.tsx", "target": "@components/prompt-kit/message.tsx", "type": "registry:component", "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\nimport { Markdown } from \"./markdown\"\n\nexport type MessageProps = {\n children: React.ReactNode\n className?: string\n} & React.HTMLProps\n\nconst Message = ({ children, className, ...props }: MessageProps) => (\n
\n {children}\n
\n)\n\nexport type MessageAvatarProps = {\n src: string\n alt: string\n fallback?: string\n delayMs?: number\n className?: string\n}\n\nconst MessageAvatar = ({\n src,\n alt,\n fallback,\n delayMs,\n className,\n}: MessageAvatarProps) => {\n return (\n \n \n {fallback && (\n {fallback}\n )}\n \n )\n}\n\nexport type MessageContentProps = {\n children: React.ReactNode\n markdown?: boolean\n className?: string\n} & React.ComponentProps &\n React.HTMLProps\n\nconst MessageContent = ({\n children,\n markdown = false,\n className,\n ...props\n}: MessageContentProps) => {\n const classNames = cn(\n \"prose prose-sm dark:prose-invert rounded-lg bg-secondary p-2 text-foreground break-words whitespace-normal\",\n className\n )\n\n return markdown ? (\n \n {children as string}\n \n ) : (\n
\n {children}\n
\n )\n}\n\nexport type MessageActionsProps = {\n children: React.ReactNode\n className?: string\n} & React.HTMLProps\n\nconst MessageActions = ({\n children,\n className,\n ...props\n}: MessageActionsProps) => (\n \n {children}\n \n)\n\nexport type MessageActionProps = {\n className?: string\n tooltip: React.ReactNode\n children: React.ReactNode\n side?: \"top\" | \"bottom\" | \"left\" | \"right\"\n} & React.ComponentProps\n\nconst MessageAction = ({\n tooltip,\n children,\n className,\n side = \"top\",\n ...props\n}: MessageActionProps) => {\n return (\n \n \n {children}\n \n {tooltip}\n \n \n \n )\n}\n\nexport { Message, MessageAvatar, MessageContent, MessageActions, MessageAction }\n" }, { "path": "components/ui/avatar.tsx", "target": "@components/ui/avatar.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n" }, { "path": "components/ui/tooltip.tsx", "target": "@components/ui/tooltip.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\nimport * as React from \"react\"\n\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction Tooltip({\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction TooltipContent({\n className,\n sideOffset = 4,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n \n )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n" }, { "path": "components/prompt-kit/markdown.tsx", "target": "@components/prompt-kit/markdown.tsx", "type": "registry:component", "content": "import { cn } from \"@/lib/utils\"\nimport { marked } from \"marked\"\nimport { memo, useId, useMemo } from \"react\"\nimport ReactMarkdown, { Components } from \"react-markdown\"\nimport remarkBreaks from \"remark-breaks\"\nimport remarkGfm from \"remark-gfm\"\nimport { CodeBlock, CodeBlockCode } from \"./code-block\"\n\nexport type MarkdownProps = {\n children: string\n id?: string\n className?: string\n components?: Partial\n}\n\nfunction parseMarkdownIntoBlocks(markdown: string): string[] {\n const tokens = marked.lexer(markdown)\n return tokens.map((token) => token.raw)\n}\n\nfunction extractLanguage(className?: string): string {\n if (!className) return \"plaintext\"\n const match = className.match(/language-(\\w+)/)\n return match ? match[1] : \"plaintext\"\n}\n\nconst INITIAL_COMPONENTS: Partial = {\n code: function CodeComponent({ className, children, ...props }) {\n const isInline =\n !props.node?.position?.start.line ||\n props.node?.position?.start.line === props.node?.position?.end.line\n\n if (isInline) {\n return (\n \n {children}\n \n )\n }\n\n const language = extractLanguage(className)\n\n return (\n \n \n \n )\n },\n pre: function PreComponent({ children }) {\n return <>{children}\n },\n}\n\nconst MemoizedMarkdownBlock = memo(\n function MarkdownBlock({\n content,\n components = INITIAL_COMPONENTS,\n }: {\n content: string\n components?: Partial\n }) {\n return (\n \n {content}\n \n )\n },\n function propsAreEqual(prevProps, nextProps) {\n return prevProps.content === nextProps.content\n }\n)\n\nMemoizedMarkdownBlock.displayName = \"MemoizedMarkdownBlock\"\n\nfunction MarkdownComponent({\n children,\n id,\n className,\n components = INITIAL_COMPONENTS,\n}: MarkdownProps) {\n const generatedId = useId()\n const blockId = id ?? generatedId\n const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children])\n\n return (\n
\n {blocks.map((block, index) => (\n \n ))}\n
\n )\n}\n\nconst Markdown = memo(MarkdownComponent)\nMarkdown.displayName = \"Markdown\"\n\nexport { Markdown }\n" }, { "path": "components/prompt-kit/code-block.tsx", "target": "@components/prompt-kit/code-block.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React, { useEffect, useState } from \"react\"\nimport { codeToHtml } from \"shiki\"\n\nexport type CodeBlockProps = {\n children?: React.ReactNode\n className?: string\n} & React.HTMLProps\n\nfunction CodeBlock({ children, className, ...props }: CodeBlockProps) {\n return (\n \n {children}\n \n )\n}\n\nexport type CodeBlockCodeProps = {\n code: string\n language?: string\n theme?: string\n className?: string\n} & React.HTMLProps\n\nfunction CodeBlockCode({\n code,\n language = \"tsx\",\n theme = \"github-light\",\n className,\n ...props\n}: CodeBlockCodeProps) {\n const [highlightedHtml, setHighlightedHtml] = useState(null)\n\n useEffect(() => {\n async function highlight() {\n if (!code) {\n setHighlightedHtml(\"
\")\n return\n }\n\n const html = await codeToHtml(code, { lang: language, theme })\n setHighlightedHtml(html)\n }\n highlight()\n }, [code, language, theme])\n\n const classNames = cn(\n \"w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4\",\n className\n )\n\n // SSR fallback: render plain code if not hydrated yet\n return highlightedHtml ? (\n \n ) : (\n
\n 
\n        {code}\n
\n
\n )\n}\n\nexport type CodeBlockGroupProps = React.HTMLAttributes\n\nfunction CodeBlockGroup({\n children,\n className,\n ...props\n}: CodeBlockGroupProps) {\n return (\n \n {children}\n \n )\n}\n\nexport { CodeBlockGroup, CodeBlockCode, CodeBlock }\n" }, { "path": "components/prompt-kit/prompt-input.tsx", "target": "@components/prompt-kit/prompt-input.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { Textarea } from \"@/components/ui/textarea\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { cn } from \"@/lib/utils\"\nimport React, {\n createContext,\n useContext,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\"\n\ntype PromptInputContextType = {\n isLoading: boolean\n value: string\n setValue: (value: string) => void\n maxHeight: number | string\n onSubmit?: () => void\n disabled?: boolean\n textareaRef: React.RefObject\n}\n\nconst PromptInputContext = createContext({\n isLoading: false,\n value: \"\",\n setValue: () => {},\n maxHeight: 240,\n onSubmit: undefined,\n disabled: false,\n textareaRef: React.createRef(),\n})\n\nfunction usePromptInput() {\n return useContext(PromptInputContext)\n}\n\nexport type PromptInputProps = {\n isLoading?: boolean\n value?: string\n onValueChange?: (value: string) => void\n maxHeight?: number | string\n onSubmit?: () => void\n children: React.ReactNode\n className?: string\n disabled?: boolean\n} & React.ComponentProps<\"div\">\n\nfunction PromptInput({\n className,\n isLoading = false,\n maxHeight = 240,\n value,\n onValueChange,\n onSubmit,\n children,\n disabled = false,\n onClick,\n ...props\n}: PromptInputProps) {\n const [internalValue, setInternalValue] = useState(value || \"\")\n const textareaRef = useRef(null)\n\n const handleChange = (newValue: string) => {\n setInternalValue(newValue)\n onValueChange?.(newValue)\n }\n\n const handleClick: React.MouseEventHandler = (event) => {\n if (!disabled) textareaRef.current?.focus()\n onClick?.(event)\n }\n\n return (\n \n \n \n {children}\n \n \n \n )\n}\n\nexport type PromptInputTextareaProps = {\n disableAutosize?: boolean\n} & React.ComponentProps\n\nfunction PromptInputTextarea({\n className,\n onKeyDown,\n disableAutosize = false,\n ...props\n}: PromptInputTextareaProps) {\n const { value, setValue, maxHeight, onSubmit, disabled, textareaRef } =\n usePromptInput()\n\n const adjustHeight = (element: HTMLTextAreaElement | null) => {\n if (!element || disableAutosize) return\n element.style.height = \"auto\"\n element.style.height =\n typeof maxHeight === \"number\"\n ? `${Math.min(element.scrollHeight, maxHeight)}px`\n : `min(${element.scrollHeight}px, ${maxHeight})`\n }\n\n const handleRef = (element: HTMLTextAreaElement | null) => {\n textareaRef.current = element\n adjustHeight(element)\n }\n\n useLayoutEffect(() => {\n adjustHeight(textareaRef.current)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value, maxHeight, disableAutosize])\n\n const handleChange = (event: React.ChangeEvent) => {\n adjustHeight(event.target)\n setValue(event.target.value)\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey && !e.nativeEvent.isComposing) {\n e.preventDefault()\n onSubmit?.()\n }\n onKeyDown?.(e)\n }\n\n return (\n \n )\n}\n\nexport type PromptInputActionsProps = React.HTMLAttributes\n\nfunction PromptInputActions({\n children,\n className,\n ...props\n}: PromptInputActionsProps) {\n return (\n
\n {children}\n
\n )\n}\n\nexport type PromptInputActionProps = {\n className?: string\n tooltip: React.ReactNode\n children: React.ReactNode\n side?: \"top\" | \"bottom\" | \"left\" | \"right\"\n} & React.ComponentProps\n\nfunction PromptInputAction({\n tooltip,\n children,\n className,\n side = \"top\",\n ...props\n}: PromptInputActionProps) {\n const { disabled } = usePromptInput()\n\n return (\n \n event.stopPropagation()}\n >\n {children}\n \n \n {tooltip}\n \n \n )\n}\n\nexport {\n PromptInput,\n PromptInputTextarea,\n PromptInputActions,\n PromptInputAction,\n}\n" }, { "path": "components/ui/textarea.tsx", "target": "@components/ui/textarea.tsx", "type": "registry:component", "content": "import { cn } from \"@/lib/utils\"\nimport * as React from \"react\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n return (\n \n )\n}\n\nexport { Textarea }\n" }, { "path": "components/prompt-kit/prompt-suggestion.tsx", "target": "@components/prompt-kit/prompt-suggestion.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { Button, buttonVariants } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { VariantProps } from \"class-variance-authority\"\n\nexport type PromptSuggestionProps = {\n children: React.ReactNode\n variant?: VariantProps[\"variant\"]\n size?: VariantProps[\"size\"]\n className?: string\n highlight?: string\n} & React.ButtonHTMLAttributes\n\nfunction PromptSuggestion({\n children,\n variant,\n size,\n className,\n highlight,\n ...props\n}: PromptSuggestionProps) {\n const isHighlightMode = highlight !== undefined && highlight.trim() !== \"\"\n const content = typeof children === \"string\" ? children : \"\"\n\n if (!isHighlightMode) {\n return (\n \n {children}\n \n )\n }\n\n if (!content) {\n return (\n \n {children}\n \n )\n }\n\n const trimmedHighlight = highlight.trim()\n const contentLower = content.toLowerCase()\n const highlightLower = trimmedHighlight.toLowerCase()\n const shouldHighlight = contentLower.includes(highlightLower)\n\n return (\n \n {shouldHighlight ? (\n (() => {\n const index = contentLower.indexOf(highlightLower)\n if (index === -1)\n return (\n \n {content}\n \n )\n\n const actualHighlightedText = content.substring(\n index,\n index + highlightLower.length\n )\n\n const before = content.substring(0, index)\n const after = content.substring(index + actualHighlightedText.length)\n\n return (\n <>\n {before && (\n \n {before}\n \n )}\n \n {actualHighlightedText}\n \n {after && (\n \n {after}\n \n )}\n \n )\n })()\n ) : (\n \n {content}\n \n )}\n \n )\n}\n\nexport { PromptSuggestion }\n" }, { "path": "components/ui/button.tsx", "target": "@components/ui/button.tsx", "type": "registry:component", "content": "import { cn } from \"@/lib/utils\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant,\n size,\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n" }, { "path": "components/ui/theme-toggle.tsx", "target": "@components/ui/theme-toggle.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { Button } from \"@/components/boardui/base/buttons/button\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport { useEffect, useState } from \"react\"\n\nexport function ThemeToggle() {\n const { resolvedTheme, setTheme } = useTheme()\n const [mounted, setMounted] = useState(false)\n useEffect(() => setMounted(true), [])\n if (!mounted) return \n const dark = resolvedTheme === \"dark\"\n return (\n setTheme(dark ? \"light\" : \"dark\")}\n />\n )\n}\n" }, { "path": "components/boardui/base/buttons/button.tsx", "target": "@components/boardui/base/buttons/button.tsx", "type": "registry:component", "content": "import { cx, sortCx } from \"@/components/boardui/utils/cx\"\nimport type {\n AnchorHTMLAttributes,\n ButtonHTMLAttributes,\n ComponentType,\n ReactNode,\n Ref,\n} from \"react\"\nimport { Focusable } from \"react-aria-components\"\n\n/**\n * Figma source: Board UI → Buttons (node 3656:13819).\n *\n * Variant matrix from Figma:\n * Type = Primary | Secondary | Ghost | Danger\n * Size = Medium | Small | Xs\n * State = Default | Hover | Active | Disabled (CSS pseudo)\n * OnlyIcon = false | true\n *\n * Sizing (1:1 with Figma):\n *\n * Medium Small Xs\n * container h=36, p=8, r=10 h=32, px=8 py=6, r=8 h=24, px=8, r=4\n * gap 2px 2px 1.33px→1\n * icon 20×20 18×18 14×14\n * label wrapper px=4 px=2 px=2\n * text style Body 1/Medium Body 1/Medium Caption 1/Semibold\n * icon-only square 36×36 (content-derived) 32×32 (forced size) 24×24 (forced size)\n *\n * `xs` is the smallest tier - first needed for the calendar template's\n * event-details modal (\"Join\" / edit-icon buttons, node 3920:10954), which\n * scales every dimension down by the same ~0.667 factor from Figma; the\n * table above rounds those to clean pixel values rather than reproducing\n * the fractional source numbers.\n *\n * Icons are rendered by the component itself via the `leadingIcon` /\n * `trailingIcon` props so the consumer can't pass the wrong size. Pass\n * a Remix Icon component reference (`RiAddLine`, not ``).\n *\n * For icon-only buttons:\n * \n \n )\n}\n\n/** Anchor counterpart to Button for navigational actions. */\nexport function ButtonLink({\n variant = \"primary\",\n size = \"medium\",\n iconOnly = false,\n leadingIcon: Leading,\n trailingIcon: Trailing,\n children,\n className,\n ref,\n ...props\n}: ButtonLinkProps) {\n return (\n \n \n {Leading ? : null}\n {iconOnly && !Leading && children != null ? (\n svg]:size-full\"\n )}\n >\n {children}\n \n ) : null}\n {!iconOnly && children !== undefined && children !== null && (\n {children}\n )}\n {!iconOnly && Trailing ? (\n \n ) : null}\n \n \n )\n}\n\n/** Style maps, exported for advanced composition and the dev Design Tuner. */\nexport const buttonStyles = styles\n" }, { "path": "components/boardui/utils/cx.ts", "target": "@components/boardui/utils/cx.ts", "type": "registry:component", "content": "import { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * Text-style classes from styles/typography.css.\n *\n * IMPORTANT: every text-* utility we define via @theme (e.g. `text-body-medium`,\n * `text-title-1-semibold`) must be listed here. Otherwise tailwind-merge — which\n * has no view of our Tailwind theme — treats them as text-color utilities and\n * silently drops them when they appear in the same className as a real color\n * (`text-foreground-full`, `text-text-primary`, etc).\n *\n * If you add or rename a text style in typography.css, mirror the change here.\n */\nconst TEXT_FAMILIES = [\n \"large-title\",\n \"display-1\",\n \"display-2\",\n \"display-3\",\n \"display-4\",\n \"title-1\",\n \"title-2\",\n \"title-3\",\n \"headline\",\n \"body\",\n \"body-2\",\n \"caption-1\",\n \"caption-2\",\n] as const;\n\nconst TEXT_WEIGHTS = [\"regular\", \"medium\", \"semibold\", \"bold\"] as const;\n\nconst TEXT_STYLE_SUFFIXES = TEXT_FAMILIES.flatMap((family) =>\n TEXT_WEIGHTS.map((weight) => `${family}-${weight}`),\n);\n\nconst twMerge = extendTailwindMerge({\n extend: {\n classGroups: {\n \"font-size\": [{ text: TEXT_STYLE_SUFFIXES }],\n },\n },\n});\n\n/**\n * Merge Tailwind classes safely. Last-write-wins on conflicting utilities.\n */\nexport const cx = twMerge;\n\n/**\n * Identity helper that gives the Tailwind IntelliSense extension a hook for\n * sorting classes inside style objects (the extension doesn't sort inside\n * plain object literals otherwise).\n */\nexport function sortCx<\n T extends Record<\n string,\n string | number | Record>\n >,\n>(classes: T): T {\n return classes;\n}\n" }, { "path": "components/voice-agents/livekit/agent-track-toggle.tsx", "target": "@components/voice-agents/livekit/agent-track-toggle.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { Toggle } from \"@/components/voice-agents/livekit/_ui/toggle\"\nimport { cn } from \"@/lib/utils\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Track } from \"livekit-client\"\nimport {\n LoaderIcon,\n MicIcon,\n MicOffIcon,\n MonitorOffIcon,\n MonitorUpIcon,\n VideoIcon,\n VideoOffIcon,\n} from \"lucide-react\"\nimport { Fragment, useMemo, useState, type ComponentProps } from \"react\"\n\nexport const agentTrackToggleVariants = cva([\"size-9\"], {\n variants: {\n size: {\n default: \"h-9 px-2 min-w-9\",\n sm: \"h-8 px-1.5 min-w-8\",\n lg: \"h-10 px-2.5 min-w-10\",\n },\n variant: {\n default: [\n \"data-[state=off]:bg-destructive/10 data-[state=off]:text-destructive\",\n \"data-[state=off]:hover:bg-destructive/15\",\n \"data-[state=off]:focus-visible:ring-destructive/30\",\n \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n \"data-[state=on]:hover:bg-foreground/10\",\n ],\n outline: [\n \"data-[state=off]:bg-destructive/10 data-[state=off]:text-destructive data-[state=off]:border-destructive/20\",\n \"data-[state=off]:hover:bg-destructive/15 data-[state=off]:hover:text-destructive\",\n \"data-[state=off]:focus:text-destructive\",\n \"data-[state=off]:focus-visible:border-destructive data-[state=off]:focus-visible:ring-destructive/30\",\n \"data-[state=on]:hover:bg-foreground/10 data-[state=on]:hover:border-foreground/12\",\n \"dark:data-[state=on]:hover:bg-foreground/10\",\n ],\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n})\n\nfunction getSourceIcon(\n source: Track.Source,\n enabled: boolean,\n pending = false\n) {\n if (pending) {\n return LoaderIcon\n }\n\n switch (source) {\n case Track.Source.Microphone:\n return enabled ? MicIcon : MicOffIcon\n case Track.Source.Camera:\n return enabled ? VideoIcon : VideoOffIcon\n case Track.Source.ScreenShare:\n return enabled ? MonitorUpIcon : MonitorOffIcon\n default:\n return Fragment\n }\n}\n\n/**\n * Props for the AgentTrackToggle component.\n */\nexport type AgentTrackToggleProps = VariantProps<\n typeof agentTrackToggleVariants\n> &\n ComponentProps<\"button\"> & {\n /**\n * The size of the toggle.\n */\n size?: \"sm\" | \"default\" | \"lg\"\n /**\n * The variant of the toggle.\n * @defaultValue 'default'\n */\n variant?: \"default\" | \"outline\"\n /**\n * The track source to toggle (Microphone, Camera, or ScreenShare).\n */\n source: \"camera\" | \"microphone\" | \"screen_share\"\n /**\n * Whether the toggle is in a pending/loading state.\n * When true, displays a loading spinner icon.\n * @defaultValue false\n */\n pending?: boolean\n /**\n * Whether the toggle is currently pressed/enabled.\n * @defaultValue false\n */\n pressed?: boolean\n /**\n * The default pressed state when uncontrolled.\n * @defaultValue false\n */\n defaultPressed?: boolean\n /**\n * Callback fired when the pressed state changes.\n */\n onPressedChange?: (pressed: boolean) => void\n }\n\n/**\n * A toggle button for controlling track publishing state.\n * Displays appropriate icons based on the track source and state.\n *\n * @extends ComponentProps<'button'>\n *\n * @example\n * ```tsx\n * setMicEnabled(pressed)}\n * />\n * ```\n */\nexport function AgentTrackToggle({\n size = \"default\",\n variant = \"default\",\n source,\n pending = false,\n pressed,\n defaultPressed = false,\n className,\n onPressedChange,\n ...props\n}: AgentTrackToggleProps) {\n const [uncontrolledPressed, setUncontrolledPressed] = useState(\n defaultPressed ?? false\n )\n const isControlled = pressed !== undefined\n const resolvedPressed = useMemo(\n () => (isControlled ? pressed : uncontrolledPressed) ?? false,\n [isControlled, pressed, uncontrolledPressed]\n )\n const IconComponent = getSourceIcon(\n source as Track.Source,\n resolvedPressed,\n pending\n )\n const handlePressedChange = (nextPressed: boolean) => {\n if (!isControlled) {\n setUncontrolledPressed(nextPressed)\n }\n onPressedChange?.(nextPressed)\n }\n\n return (\n \n \n {props.children}\n \n )\n}\n" }, { "path": "components/voice-agents/livekit/_ui/toggle.tsx", "target": "@components/voice-agents/livekit/_ui/toggle.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\nimport * as React from \"react\"\n\nconst toggleVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline:\n \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n },\n size: {\n default: \"h-9 min-w-9 px-2\",\n sm: \"h-8 min-w-8 px-1.5\",\n lg: \"h-10 min-w-10 px-2.5\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Toggle({\n className,\n variant,\n size,\n ...props\n}: React.ComponentProps &\n VariantProps) {\n return (\n \n )\n}\n\nexport { Toggle, toggleVariants }\n" }, { "path": "components/voice-agents/orbkit/shdr-21.tsx", "target": "@components/voice-agents/orbkit/shdr-21.tsx", "type": "registry:component", "content": "/*\n * Deliberately not a `\"use client\"` module — see the note in `shdr-11.tsx`.\n *\n * Note for editors: the shader lives in a template literal, so its comments\n * must not contain backticks.\n */\nimport { ShaderOrb, type OrbVariant, type ShaderOrbProps } from \"./core\"\n\n/* ----------------------------------------------------------------------------\n SHDR-21 — light diffusing through a cloud.\n\n A real volumetric integration rather than a surface. The march walks a\n density field bounded by a sphere and, at every step, does three things:\n\n TRANSMITTANCE how much of the background still gets through, tracked as\n T *= exp(-density * dt * absorb). Beer-Lambert.\n SHADOW a short second march toward the light, so the far side of a\n dense clump is dimmer than the lit side. This is the whole\n reason the orb reads as volume and not as a flat glow.\n IN-SCATTER light added at this step, weighted by density, by the shadow\n term, and by a Henyey-Greenstein phase function.\n\n The phase function is what makes it feel like light rather than paint. It\n biases scattering forward, so the limb facing the light blooms and the rest\n stays soft — the same reason a cloud is blinding when you look toward the sun\n through it and merely bright otherwise.\n\n Alpha is 1 - T, which is exactly what the volume occludes, so this one needs\n no radial fade to hide the canvas edge: density falls to zero at the sphere\n boundary and the alpha goes with it.\n---------------------------------------------------------------------------- */\n\n/*\n * Step counts are `#define`s: ES 1.0 requires constant loop bounds. The march\n * is STEPS * (1 + LIGHT_STEPS) density evaluations, so LIGHT_STEPS is the\n * expensive knob — 4 is enough for readable self-shadowing.\n */\nconst NIMBUS_FRAG = `\n#define STEPS 56\n#define LIGHT_STEPS 4\n#define DENSITY_OCT 4\n#define AA 1\n\nconst float PI = 3.14159265359;\n\n// Volume-reactive values, resolved once per fragment in main().\nfloat nimbusPower;\nfloat nimbusDensity;\n\n/*\n Density inside the sphere.\n\n The radial term falls to zero at the boundary, which both bounds the volume\n and gives the soft edge for free. The cos-warp folds the sample point a few\n times — the same cheap turbulence the other orbs use — and the threshold\n carves that into clumps rather than an even fog.\n*/\nfloat density(vec3 p, float animTime) {\n float shell = 1.0 - length(p) / uP_radius;\n if (shell <= 0.0) return 0.0;\n\n vec3 q = p * uP_scale;\n float f = 1.0;\n for (int k = 0; k < DENSITY_OCT; k++) {\n q += cos(q.yzx * f + animTime * uP_churn) / f;\n f *= 1.8;\n }\n\n float n = (sin(q.x) + sin(q.y) + sin(q.z)) / 3.0 * 0.5 + 0.5;\n // smoothstep against the threshold is the clump control: high threshold\n // leaves sparse wisps, low fills the sphere with even fog\n float clump = smoothstep(uP_threshold, 1.0, n);\n return clump * pow(shell, uP_edgeSoft) * nimbusDensity;\n}\n\n/*\n Henyey-Greenstein: g > 0 biases scattering forward, which is what gives the\n bloom on the limb facing the light.\n\n The physical form carries a 1/(4*PI) normalisation. It is dropped here and\n folded into uP_power instead — kept in, the whole term sits around 0.02 and\n the orb renders black unless power is pushed into the hundreds, which makes\n the slider useless.\n*/\nfloat phaseHG(float c, float g) {\n float g2 = g * g;\n return (1.0 - g2) / pow(max(1.0 + g2 - 2.0 * g * c, 0.0001), 1.5);\n}\n\nvec4 nimbusRender(vec2 fragCoord) {\n float animTime = uP_speed; // integrated clock\n\n vec2 uv = (2.0 * fragCoord - uRes) / min(uRes.x, uRes.y);\n vec3 ro = vec3(0.0, 0.0, -uP_camDist);\n vec3 rd = normalize(vec3(uv, uP_focal));\n\n /*\n Light direction, slowly orbiting so the shading is never static.\n\n The z term is kept POSITIVE — the camera looks along +z, so a light also\n pointing along +z sits behind the cloud. That is the back-lit case, where\n dot(rd, L) approaches 1 and the forward-scattering phase blooms. Put the\n light on the camera's side instead and every ray samples the phase function\n on its back-scatter tail, where it is roughly ten times smaller, and the orb\n goes muddy.\n */\n vec3 L = normalize(vec3(\n cos(animTime * uP_lightSpin) * 0.7,\n 0.45,\n sin(animTime * uP_lightSpin) * 0.35 + 0.65\n ));\n\n float phase = phaseHG(dot(rd, L), uP_aniso);\n\n // Start the march at the sphere's front face instead of the camera — every\n // step before that contributes nothing, and at 56 steps they are expensive.\n float toCentre = uP_camDist;\n float tStart = max(toCentre - uP_radius, 0.0);\n float span = 2.0 * uP_radius;\n float dt = span / float(STEPS);\n\n float T = 1.0;\n vec3 scattered = vec3(0.0);\n\n for (int i = 0; i < STEPS; i++) {\n float t = tStart + (float(i) + 0.5) * dt;\n vec3 p = ro + rd * t;\n\n float dn = density(p, animTime);\n if (dn > 0.001) {\n // short march toward the light for self-shadowing\n float shadow = 1.0;\n float lstep = uP_radius / float(LIGHT_STEPS);\n for (int k = 1; k <= LIGHT_STEPS; k++) {\n vec3 lp = p + L * (float(k) - 0.5) * lstep;\n shadow *= exp(-density(lp, animTime) * lstep * uP_shadowAbsorb);\n }\n\n /*\n In-scattered light: warm where lit, cool where the volume shadows\n itself.\n\n The shadow term appears ONCE, inside the mix. Multiplying by it again\n as a factor — the obvious-looking thing to write — scales the shadowed\n end of the mix toward zero, so the cool colour is always multiplied\n away and the cloud comes out monochrome beige however it is tinted.\n uP_shadowLift is how much light still reaches the shadowed side.\n */\n vec3 lit = mix(uC_shadow * uP_shadowLift, uC_light, shadow);\n scattered += T * dn * dt * lit * phase * nimbusPower;\n\n T *= exp(-dn * dt * uP_absorb);\n if (T < 0.01) break;\n }\n }\n\n // a soft ambient body so the unlit side is not pure black\n float body = 1.0 - T;\n scattered += uC_shadow * body * uP_ambient;\n\n return vec4(scattered, body);\n}\n\nvoid main() {\n /*\n Agent output turns the light up; user input thickens the cloud. Both are\n AMPLITUDES. Churn is deliberately NOT volume-scaled: it multiplies the\n accumulated clock into a phase (animTime * churn), so scaling it by the\n live volume would turn every volume wobble into a phase jump the size of\n the whole clock — the cloud scrambles chaotically on each state change\n instead of gliding, and gets worse the longer the page is open.\n */\n nimbusPower = uP_power * (0.7 + 0.9 * uOutput);\n nimbusDensity = uP_density * (1.0 + 0.35 * uInput);\n\n vec4 acc = vec4(0.0);\n#if AA > 1\n for (int mx = 0; mx < AA; mx++) {\n for (int my = 0; my < AA; my++) {\n vec2 offset = vec2(float(mx), float(my)) / float(AA) - 0.5;\n acc += nimbusRender(gl_FragCoord.xy + offset);\n }\n }\n acc /= float(AA * AA);\n#else\n acc = nimbusRender(gl_FragCoord.xy);\n#endif\n\n vec3 col = tanh3(acc.rgb * uP_exposure);\n float a = clamp(acc.a * uP_alphaGain, 0.0, 1.0);\n\n // Emitted/scattered light, so rgb is already premultiplied — do NOT multiply\n // by alpha again (see the same note in shdr-31).\n gl_FragColor = vec4(col, a);\n}\n`\n\nexport const shdr21Orb: OrbVariant = {\n key: \"shdr-21\",\n label: \"SHDR-21\",\n note: \"light diffusing through a cloud\",\n frag: NIMBUS_FRAG,\n params: [\n {\n key: \"speed\",\n label: \"Anim speed\",\n min: 0.015,\n max: 10,\n step: 0.05,\n default: 10,\n integrate: true,\n },\n {\n key: \"camDist\",\n label: \"Camera distance\",\n min: 0.5,\n max: 40,\n step: 0.2,\n default: 4.4,\n },\n { key: \"focal\", label: \"Lens\", min: 0.3, max: 15, step: 0.1, default: 1.8 },\n {\n key: \"radius\",\n label: \"Cloud radius\",\n min: 0.15,\n max: 10,\n step: 0.05,\n default: 2,\n },\n {\n key: \"scale\",\n label: \"Cloud scale\",\n min: 0.1,\n max: 15,\n step: 0.1,\n default: 0.8,\n },\n { key: \"churn\", label: \"Churn\", min: 0, max: 5, step: 0.03, default: 0.3 },\n {\n key: \"threshold\",\n label: \"Clumping\",\n min: 0,\n max: 3,\n step: 0.015,\n default: 0.075,\n },\n {\n key: \"edgeSoft\",\n label: \"Edge softness\",\n min: 0.1,\n max: 10,\n step: 0.05,\n default: 0.8,\n },\n {\n key: \"density\",\n label: \"Density\",\n min: 0.03,\n max: 20,\n step: 0.1,\n default: 3.2,\n },\n {\n key: \"absorb\",\n label: \"Absorption\",\n min: 0.03,\n max: 15,\n step: 0.1,\n default: 1.4,\n },\n {\n key: \"shadowAbsorb\",\n label: \"Shadow depth\",\n min: 0,\n max: 20,\n step: 0.1,\n default: 2.4,\n },\n {\n key: \"shadowLift\",\n label: \"Shadow lift\",\n min: 0,\n max: 5,\n step: 0.03,\n default: 0.55,\n },\n {\n key: \"aniso\",\n label: \"Forward scatter\",\n min: -0.9,\n max: 0.9,\n step: 0.01,\n default: 0.45,\n },\n {\n key: \"lightSpin\",\n label: \"Light orbit\",\n min: 0,\n max: 3,\n step: 0.015,\n default: 0.12,\n },\n {\n key: \"power\",\n label: \"Light power\",\n min: 0.03,\n max: 40,\n step: 0.2,\n default: 1.9,\n },\n {\n key: \"ambient\",\n label: \"Ambient\",\n min: 0,\n max: 3,\n step: 0.015,\n default: 0.12,\n },\n {\n key: \"exposure\",\n label: \"Exposure\",\n min: 0.03,\n max: 10,\n step: 0.05,\n default: 1,\n },\n {\n key: \"alphaGain\",\n label: \"Alpha gain\",\n min: 0.05,\n max: 10,\n step: 0.05,\n default: 1.5,\n },\n ],\n /*\n * The engine uploads these as uC_ vec3 uniforms. Warm light against a\n * cool shadow is what reads as depth — a single-hue cloud looks flat however\n * well it is shadowed.\n */\n colors: [\n { key: \"light\", label: \"Light\", default: \"#ffd7a3\" },\n { key: \"shadow\", label: \"Shadow\", default: \"#3a4a8c\" },\n ],\n statePresets: {\n /*\n Every state shares the same speed, geometry and cloud shape — only the\n AMBIENCE and the palette move, so switching state relights the cloud\n instead of restaging it. The engine glides params and cross-fades\n colours on one shared easing, so the change reads as a mood shift.\n */\n idle: {\n ambient: 0.12,\n power: 1.9,\n shadowLift: 0.55,\n },\n thinking: {\n ambient: 0.22,\n power: 2.15,\n shadowLift: 0.65,\n },\n speaking: {\n ambient: 0.46,\n power: 3.1,\n shadowLift: 0.95,\n },\n },\n /*\n The palette carries the rest of the state read: a warm lamp over cool\n shadow at rest, shifting violet while it thinks, and burning hot while\n speaking.\n */\n stateColors: {\n idle: { light: \"#ffd7a3\", shadow: \"#3a4a8c\" },\n thinking: { light: \"#e6d4ff\", shadow: \"#3b3f96\" },\n speaking: { light: \"#ffb066\", shadow: \"#7a2f6e\" },\n },\n}\n\nexport type Shdr21Props = Omit\n\nexport function Shdr21({ size = 280, ...rest }: Shdr21Props) {\n return \n}\n\nexport default Shdr21\n" }, { "path": "components/voice-agents/orbkit/core.tsx", "target": "@components/voice-agents/orbkit/core.tsx", "type": "registry:component", "content": "\"use client\"\n\nimport React, {\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n type ReactNode,\n} from \"react\"\n\n/* ----------------------------------------------------------------------------\n Orbkit core — raw WebGL shader orb runtime. No dependencies.\n\n An orb is a full-screen triangle rendered into a transparent canvas by a\n fragment shader. Every orb declares a parameter schema (sliders + colors);\n the values are uploaded as uniforms each frame from a ref, so a controls\n panel can tune them live without ever remounting the canvas (a remount would\n drop the WebGL context).\n\n Animation model: every state synthesizes two volume signals — input (user\n speech energy) and output (agent speech energy) — smooths them, and the\n shaders react to those. The flow clock's speed itself follows the output\n volume, so orbs visibly quicken when the agent is talking.\n---------------------------------------------------------------------------- */\n\nexport type OrbState = \"idle\" | \"thinking\" | \"speaking\"\n\nexport const ORB_STATES = [\"idle\", \"thinking\", \"speaking\"] as const\n\nfunction clamp01(n: number) {\n return Math.min(1, Math.max(0, n))\n}\n\n/** Per-state [input, output] volume synthesis. */\n/**\n * Transition rate shared by params, colours and the flow-speed multiplier.\n * They must move together: if the rate multiplier eases faster than the look,\n * a state change spins the orb up before it has finished cross-fading, which\n * reads as a lurch.\n *\n * This drives a critically damped spring rather than the exponential ease it\n * used to. An exponential's velocity is highest at the instant the target\n * changes, so every state change began with a jolt — and for params that are\n * spatial frequencies (Corona's warpFreq travels 5.25 -> 19.5 between states)\n * that jolt sweeps the field through its intermediate frequencies at maximum\n * rate, which is what read as the transition \"scrambling\".\n *\n * A spring starts at rest and accelerates, so the sweep is spread across the\n * transition instead of front-loaded. Measured on that warpFreq move it is a\n * 20% lower peak rate of change (20.3/s vs 25.3/s) AND it arrives sooner —\n * 1.50s to within 2% against the exponential's 2.18s, since an exponential\n * only ever asymptotes toward its target.\n */\nconst PARAM_EASE = 4\n\n/*\n One step of a critically damped spring, implicit (semi-implicit Euler would\n blow up at the frame times a backgrounded tab produces). Returns nothing and\n writes through the scratch pair so the hot loop allocates nothing.\n*/\nconst springOut = { x: 0, v: 0 }\nfunction springStep(\n x: number,\n v: number,\n target: number,\n dt: number,\n omega: number\n) {\n const f = 1 + 2 * dt * omega\n const oo = omega * omega\n const hoo = dt * oo\n const hhoo = dt * hoo\n const detInv = 1 / (f + hhoo)\n springOut.x = (f * x + dt * v + hhoo * target) * detInv\n springOut.v = (v + hoo * (target - x)) * detInv\n}\n\nfunction targetVolumes(state: OrbState, t: number): [number, number] {\n switch (state) {\n case \"idle\":\n return [0, 0.3]\n case \"speaking\":\n return [\n clamp01(0.65 + Math.sin(t * 4.8) * 0.22),\n clamp01(0.75 + Math.sin(t * 3.6) * 0.22),\n ]\n case \"thinking\": {\n const base = 0.38 + 0.07 * Math.sin(t * 0.7)\n const wander = 0.05 * Math.sin(t * 2.1) * Math.sin(t * 0.37 + 1.2)\n return [\n clamp01(base + wander),\n clamp01(0.48 + 0.12 * Math.sin(t * 1.05 + 0.6)),\n ]\n }\n }\n}\n\n/* ------------------------------ param schema ------------------------------- */\n\nexport interface OrbParamDef {\n key: string\n label: string\n min: number\n max: number\n step: number\n default: number\n /**\n * Rate params. The engine integrates them into a clock\n * (`clock += dt * value * volumeSpeed`) and uploads the clock instead of the\n * raw value, so changing the rate never jumps the phase — the motion speeds\n * up or slows down rather than snapping to a new position.\n */\n integrate?: boolean\n}\n\nexport interface OrbColorDef {\n key: string\n label: string\n /** hex, e.g. `#ff8b73` */\n default: string\n}\n\nexport interface OrbVariant {\n key: string\n label: string\n note: string\n /** GLSL fragment shader body. Uniform declarations are generated for you. */\n frag: string\n params: OrbParamDef[]\n colors: OrbColorDef[]\n /**\n * Per-state parameter targets. The engine glides each param toward the\n * active state's preset. Params passed explicitly via the `params` prop\n * always win over the preset.\n */\n statePresets?: Partial>>\n /**\n * Per-state colour targets, the colour counterpart of `statePresets`.\n * Kept a separate map because presets are numeric and colours are hex\n * strings — a union would lose type safety on both. Colours glide in RGB\n * on the same easing as params, so a state change cross-fades rather\n * than cutting. Colours passed explicitly via the `colors` prop always\n * win, exactly as with params.\n */\n stateColors?: Partial>>\n}\n\nexport type OrbParamValues = Partial>\nexport type OrbColorValues = Partial>\n\n/** Every param and color at its schema default. */\nexport function defaultValuesFor(variant: OrbVariant): {\n params: Record\n colors: Record\n} {\n return {\n params: Object.fromEntries(variant.params.map((p) => [p.key, p.default])),\n colors: Object.fromEntries(variant.colors.map((c) => [c.key, c.default])),\n }\n}\n\nexport function hexToRgb(hex: string): [number, number, number] {\n let h = hex.replace(\"#\", \"\").trim()\n if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2]\n const n = parseInt(h, 16)\n if (h.length !== 6 || Number.isNaN(n)) return [1, 1, 1]\n return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255]\n}\n\n/* ------------------------------- GLSL shared ------------------------------- */\n\nconst VERT = `\nattribute vec2 aPos;\nvoid main() { gl_Position = vec4(aPos, 0.0, 1.0); }\n`\n\n/**\n * Prelude prepended to every orb fragment shader: uniforms, value noise, fbm,\n * and the centered aspect-corrected UV helper.\n */\nexport const ORB_GLSL_HELPERS = `\nprecision highp float;\nuniform vec2 uRes;\nuniform float uTime; // slow ambient clock (half real-time)\nuniform float uAnim; // flow clock — its speed follows the output volume\nuniform float uInput; // input volume 0..1: user speech energy\nuniform float uOutput; // output volume 0..1: agent speech energy\n\nfloat hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); }\nfloat noise(vec2 p) {\n vec2 i = floor(p);\n vec2 f = fract(p);\n f = f * f * (3.0 - 2.0 * f);\n return mix(\n mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x),\n mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x),\n f.y\n );\n}\nfloat fbm(vec2 p) {\n float v = 0.0;\n float a = 0.5;\n for (int i = 0; i < 5; i++) {\n v += a * noise(p);\n p = p * 2.03 + vec2(11.7, 7.3);\n a *= 0.5;\n }\n return v;\n}\nvec2 orbUV() { return (2.0 * gl_FragCoord.xy - uRes) / min(uRes.x, uRes.y); }\n\n// GLSL ES 1.0 has no tanh() — it arrived in ES 3.0. Shader-golf listings lean\n// on it as a tone-mapper, so it ships here. Clamped against exp() overflow;\n// accurate for the non-negative accumulators those shaders produce.\nvec3 tanh3(vec3 x) {\n x = clamp(x, -10.0, 10.0);\n vec3 e = exp(2.0 * x);\n return (e - 1.0) / (e + 1.0);\n}\n\n`\n\nfunction paramUniformDecls(variant: OrbVariant): string {\n return [\n ...variant.params.map((p) => `uniform float uP_${p.key};`),\n ...variant.colors.map((c) => `uniform vec3 uC_${c.key};`),\n ].join(\"\\n\")\n}\n\n/* ------------------------------- engine ------------------------------------ */\n\n/**\n * Per-canvas context-lifecycle controller. Created on first mount of a canvas\n * and kept for the element's whole life — the router can hide a page and show\n * the same DOM again, and React re-runs effects on the same canvas, so the\n * lost/restored listeners must outlive any single effect run: an uncanceled\n * webglcontextlost event marks the context permanently unrestorable.\n */\ninterface CanvasContextController {\n /** Whether a mounted orb currently wants this context alive. */\n desired: boolean\n /** Builds a render generation; returns its teardown. Rebound per effect run. */\n start: (() => () => void) | null\n /** Teardown of the live generation, if one is running. */\n stopGen: (() => void) | null\n}\n\nconst canvasControllers = new WeakMap<\n HTMLCanvasElement,\n CanvasContextController\n>()\n\nfunction compile(\n gl: WebGLRenderingContext,\n type: number,\n src: string\n): WebGLShader | null {\n const shader = gl.createShader(type)\n if (!shader) return null\n gl.shaderSource(shader, src)\n gl.compileShader(shader)\n if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n console.error(\"[orbkit] shader compile error:\", gl.getShaderInfoLog(shader))\n gl.deleteShader(shader)\n return null\n }\n return shader\n}\n\n/* ----------------------------------------------------------------------------\n Wrappers — optional decoration drawn around, under and over the orb.\n\n A wrapper is pure CSS/SVG, never a shader: the orb keeps its own canvas and\n the decoration is composited on top of it by the browser. That keeps the\n whole set free for any orb (no per-variant shader work), costs nothing on\n the GPU budget the shaders are already spending, and means swapping one\n wrapper for another at runtime never touches the WebGL context. Turning a\n wrapper on or off does, since that is what moves the canvas into or out of\n the wrapper element — see the effect's `wrapped` dependency.\n\n Layout: a wrapped orb becomes a square box, and the canvas is absolutely\n positioned inside it with the spec's `inset`. The FOOTPRINT is unchanged —\n `size` is still the outer diameter — so dropping a wrapper onto an existing\n orb reflows nothing; the orb itself just shrinks to leave the ring room.\n\n Colour: every layer that isn't physically light or shadow paints in\n `currentColor`, so a wrapper picks up the surrounding text colour and reads\n correctly on light and dark pages with no configuration. `wrapperColor`\n sets that colour when you want something other than the inherited one.\n---------------------------------------------------------------------------- */\n\nexport const ORB_WRAPPERS = [\n \"none\",\n \"glass\",\n \"ring\",\n \"dotted\",\n \"ticks\",\n \"reticle\",\n \"grid\",\n \"halftone\",\n \"scanlines\",\n] as const\n\nexport type OrbWrapper = (typeof ORB_WRAPPERS)[number]\n\n/*\n Keyframes for the animated wrappers, shipped inside the component so an orb\n stays a single self-contained file with nothing to add to a global\n stylesheet. React 19 hoists a