@inkeep/agents-manage-ui 0.31.4 → 0.31.5

package/src/components/agent/ship/node-js-guide.tsx

@@ -0,0 +1,67 @@
+import { useParams } from 'next/navigation';
+import { Streamdown } from 'streamdown';
+import { DOCS_BASE_URL } from '@/constants/page-descriptions';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { DocsLink, Header } from './guide-header';
+
+export function NodeJsGuide() {
+  const { PUBLIC_INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();
+  const apiUrl = `${PUBLIC_INKEEP_AGENTS_RUN_API_URL}/api/chat`;
+  const { agentId } = useParams();
+
+  return (
+    <div>
+      <Header.Container>
+        <Header.Title title="Node.js Backend" />
+        <DocsLink href={`${DOCS_BASE_URL}/talk-to-your-agents/chat-api`} />
+      </Header.Container>
+      <Streamdown>
+        {`Example Next.js API route (\`app/api/chat/route.ts\`):
+
+\`\`\`typescript
+export async function POST(req: Request) {
+  const { messages, conversationId } = await req.json();
+
+  const response = await fetch('${apiUrl}', {
+    method: 'POST',
+    headers: {
+      'Authorization': \`Bearer \${process.env.INKEEP_AGENT_API_KEY}\`,
+      'Content-Type': 'application/json',
+      'x-emit-operations': 'true',
+    },
+    body: JSON.stringify({
+      messages,
+      conversationId,
+    }),
+  });
+
+  return new Response(response.body, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  });
+}
+\`\`\`
+
+Example response (Server-Sent Events stream):
+
+\`\`\`bash
+data: {"type":"data-operation","data":{"type":"agent_initializing","details":{"sessionId":"chatds-12345678910111","agentId":"${agentId}"}}}
+
+data: {"type":"text-start","id":"1234567891011-abcdefghi"}
+
+data: {"type":"text-delta","id":"1234567891011-abcdefghi","delta":"I answer"}
+
+data: {"type":"text-delta","id":"1234567891011-abcdefghi","delta":" technical questions"}
+
+data: {"type":"text-end","id":"1234567891011-abcdefghi"}
+
+data: [DONE]
+\`\`\`
+`}
+      </Streamdown>
+    </div>
+  );
+}

package/src/components/agent/ship/sdk-guide.tsx

@@ -0,0 +1,102 @@
+import { Streamdown } from 'streamdown';
+import { DOCS_BASE_URL } from '@/constants/page-descriptions';
+import { useRuntimeConfig } from '@/contexts/runtime-config-context';
+import { DocsLink, Header } from './guide-header';
+
+export function SdkGuide() {
+  const { PUBLIC_INKEEP_AGENTS_RUN_API_URL } = useRuntimeConfig();
+  const apiUrl = `${PUBLIC_INKEEP_AGENTS_RUN_API_URL}/api/chat`;
+
+  return (
+    <div>
+      <Header.Container>
+        <Header.Title title="Vercel SDK" />
+        <DocsLink href={`${DOCS_BASE_URL}/talk-to-your-agents/vercel-ai-sdk/use-chat`} />
+      </Header.Container>
+      <Streamdown>
+        {`Install the package:
+
+\`\`\`bash
+npm install ai @ai-sdk/react
+\`\`\`
+
+Example Next.js implementation using Vercel AI SDK:
+
+\`\`\`tsx
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useState } from "react";
+
+export default function Page() {
+  const { messages, sendMessage } = useChat({
+    transport: new DefaultChatTransport({
+      api: "${apiUrl}",
+      headers: {
+        Authorization: "Bearer INKEEP_AGENT_API_KEY",
+      },
+    }),
+  });
+  const [input, setInput] = useState("");
+
+  return (
+    <div className="max-w-2xl mx-auto p-4">
+      <div className="space-y-4 mb-4">
+        {messages.map((message) => (
+          <div key={message.id} className="border rounded p-3">
+            <div className="font-semibold mb-2">
+              {message.role === "user" ? "👤 User" : "🤖 Assistant"}
+            </div>
+
+            <div className="space-y-2">
+              {message.parts.map((part, partIndex) => {
+                const partKey = \`\${message.id}-\${part.type}-\${partIndex}\`;
+
+                if (part.type === "text") {
+                  return (
+                    <div key={partKey} className="whitespace-pre-wrap">
+                      {part.text}
+                    </div>
+                  );
+                }
+                
+                return null;
+              })}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (input.trim()) {
+            sendMessage({ text: input });
+            setInput("");
+          }
+        }}
+        className="flex gap-2"
+      >
+        <input
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type your message..."
+          className="flex-1 p-2 border rounded"
+        />
+        <button
+          type="submit"
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}
+\`\`\`
+`}
+      </Streamdown>
+    </div>
+  );
+}

package/src/components/agent/ship/ship-modal.tsx

@@ -0,0 +1,143 @@
+import {
+  Hexagon,
+  Key,
+  type LucideProps,
+  MessagesSquare,
+  RocketIcon,
+  SquareTerminal,
+  X,
+} from 'lucide-react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import type { ComponentType } from 'react';
+import { MCPIcon } from '@/components/icons/mcp-icon';
+import { VercelIcon } from '@/components/icons/vercel';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { ApiGuide } from './api-guide';
+import { ChatUIGuide } from './chat-ui-guide/chat-ui-guide';
+import { McpGuide } from './mcp-guide/mcp-guide';
+import { NodeJsGuide } from './node-js-guide';
+import { SdkGuide } from './sdk-guide';
+
+const TAB_VALUES = {
+  CHAT_UI: 'chat-ui',
+  MCP_SERVER: 'mcp-server',
+  SDK: 'sdk',
+  NODE_JS: 'node-js',
+  API: 'api',
+} as const;
+
+type TabValue = (typeof TAB_VALUES)[keyof typeof TAB_VALUES];
+
+type TabItem = {
+  label: string;
+  value: TabValue;
+  IconComponent?: React.ComponentType<LucideProps>;
+};
+
+const shipModalTabComponents: Record<TabValue, ComponentType> = {
+  [TAB_VALUES.CHAT_UI]: ChatUIGuide,
+  [TAB_VALUES.MCP_SERVER]: McpGuide,
+  [TAB_VALUES.SDK]: SdkGuide,
+  [TAB_VALUES.NODE_JS]: NodeJsGuide,
+  [TAB_VALUES.API]: ApiGuide,
+};
+
+const shipModalTabItems: TabItem[] = [
+  {
+    label: 'Chat UI',
+    value: TAB_VALUES.CHAT_UI,
+    IconComponent: MessagesSquare,
+  },
+  {
+    label: 'MCP Server',
+    value: TAB_VALUES.MCP_SERVER,
+    IconComponent: MCPIcon,
+  },
+  {
+    label: 'Vercel SDK',
+    value: TAB_VALUES.SDK,
+    IconComponent: VercelIcon,
+  },
+  {
+    label: 'Node JS',
+    value: TAB_VALUES.NODE_JS,
+    IconComponent: Hexagon,
+  },
+  {
+    label: 'REST API',
+    value: TAB_VALUES.API,
+    IconComponent: SquareTerminal,
+  },
+];
+
+export function ShipModal() {
+  const params = useParams();
+  const { tenantId, projectId } = params;
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <RocketIcon className="size-4" />
+          Ship
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-full! w-7xl" position="top" showCloseButton={false}>
+        <DialogHeader>
+          <div className="flex items-center justify-between w-full gap-2">
+            <DialogTitle>Talk to your agent</DialogTitle>
+            <div className="flex items-center gap-2">
+              <Button asChild variant="outline" size="sm">
+                <Link
+                  href={`/${tenantId}/projects/${projectId}/api-keys`}
+                  target="_blank"
+                  rel="noreferrer noopener"
+                >
+                  <Key className="size-4" />
+                  Create API key
+                </Link>
+              </Button>
+              <DialogClose asChild>
+                <Button variant="ghost" className="size-8">
+                  <X className="size-4 text-muted-foreground" />
+                  <span className="sr-only">Close</span>
+                </Button>
+              </DialogClose>
+            </div>
+          </div>
+          <DialogDescription className="sr-only">Talk to your agent.</DialogDescription>
+        </DialogHeader>
+        <Tabs defaultValue={TAB_VALUES.CHAT_UI} className="min-w-0">
+          <TabsList className="bg-transparent relative rounded-none border-b p-0 w-full justify-start gap-4">
+            {shipModalTabItems.map((tab) => (
+              <TabsTrigger
+                key={tab.value}
+                variant="underline"
+                value={tab.value}
+                className="text-sm gap-2"
+              >
+                {tab.IconComponent && <tab.IconComponent className="size-4" />}
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+          {Object.entries(shipModalTabComponents).map(([value, Component]) => (
+            <TabsContent key={value} value={value} className="py-4">
+              <Component />
+            </TabsContent>
+          ))}
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/agent/ship/utils.ts

@@ -0,0 +1,25 @@
+export const replaceTemplatePlaceholders = (
+  template: string,
+  replacements: Record<string, string>
+): string => {
+  let result = template;
+  for (const [key, value] of Object.entries(replacements)) {
+    result = result.replace(new RegExp(`{{${key}}}`, 'g'), value);
+  }
+  return result;
+};
+
+export function toCamelCase(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9]+(.)/g, (_, char) => char.toUpperCase())
+    .replace(/^[^a-zA-Z]+/, '');
+}
+
+export const indentJson = (json: string, spaces: number): string => {
+  const indent = ' '.repeat(spaces);
+  return json
+    .split('\n')
+    .map((line, index) => (index === 0 ? line : `${indent}${line}`))
+    .join('\n');
+};

package/src/components/agent/toolbar/toolbar.tsx

@@ -4,6 +4,7 @@ import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
 import { isMacOs } from '@/lib/utils';
+import { ShipModal } from '../ship/ship-modal';
 
 interface ToolbarProps {
   onSubmit: () => void;
@@ -55,6 +56,7 @@ export function Toolbar({
 
   return (
     <div className="flex gap-2 flex-wrap justify-end content-start">
+      {!inPreviewDisabled && <ShipModal />}
       {dirty || inPreviewDisabled ? (
         <Tooltip>
           <TooltipTrigger asChild>

package/src/components/data-components/render/component-render-generator.tsx

@@ -16,15 +16,6 @@ import { Textarea } from '@/components/ui/textarea';
 import { updateDataComponent } from '@/lib/api/data-components';
 import { DynamicComponentRenderer } from './dynamic-component-renderer';
 
-const StyledTabsTrigger = (props: React.ComponentProps<typeof TabsTrigger>) => {
-  return (
-    <TabsTrigger
-      {...props}
-      className="bg-transparent data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none data-[state=active]:text-primary data-[state=active]:bg-transparent uppercase font-mono text-xs mt-0.5 pt-2"
-    />
-  );
-};
-
 interface ComponentPreviewGeneratorProps {
   tenantId: string;
   projectId: string;
@@ -306,9 +297,15 @@ export function ComponentRenderGenerator({
         <Card className="px-2 py-4 pt-0">
           <Tabs defaultValue="render" className="w-full">
             <TabsList className="bg-transparent relative rounded-none border-b p-0 w-full justify-start gap-2">
-              <StyledTabsTrigger value="render">Render</StyledTabsTrigger>
-              <StyledTabsTrigger value="code">Code</StyledTabsTrigger>
-              <StyledTabsTrigger value="data">Sample Data</StyledTabsTrigger>
+              <TabsTrigger variant="underline" value="render">
+                Render
+              </TabsTrigger>
+              <TabsTrigger variant="underline" value="code">
+                Code
+              </TabsTrigger>
+              <TabsTrigger variant="underline" value="data">
+                Sample Data
+              </TabsTrigger>
             </TabsList>
 
             <TabsContent value="render">

package/src/components/icons/claude.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const ClaudeIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Claude icon</title>
+    <g clipPath="url(#clip0_23_202)">
+      <path
+        d="M4.704 15.96L9.432 13.32L9.504 13.08L9.432 12.96H9.192L8.4 12.912L5.712 12.84L3.36 12.72L1.08 12.6L0.504 12.48L0 11.76L0.048 11.4L0.528 11.088L1.224 11.136L2.736 11.256L5.016 11.4L6.672 11.496L9.12 11.784H9.504L9.552 11.616L9.432 11.52L9.336 11.424L6.96 9.84L4.416 8.16L3.072 7.176L2.352 6.696L1.992 6.216L1.848 5.208L2.496 4.488L3.384 4.56L3.6 4.608L4.488 5.304L6.408 6.768L8.88 8.64L9.24 8.928L9.384 8.832L9.408 8.76L9.24 8.496L7.92 6L6.48 3.504L5.832 2.472L5.664 1.848C5.592 1.608 5.568 1.368 5.568 1.128L6.288 0.12L6.72 0L7.728 0.144L8.112 0.48L8.736 1.92L9.72 4.152L11.28 7.176L11.76 8.088L12 8.904L12.072 9.144H12.24V9.024L12.36 7.296L12.6 5.208L12.84 2.52L12.912 1.752L13.296 0.84L14.016 0.36L14.64 0.624L15.12 1.32L15.048 1.752L14.784 3.6L14.16 6.504L13.8 8.472H14.016L14.256 8.208L15.24 6.912L16.896 4.848L17.616 4.008L18.48 3.12L19.032 2.688H20.064L20.808 3.816L20.472 4.992L19.416 6.336L18.528 7.464L17.256 9.168L16.488 10.536L16.56 10.632H16.728L19.608 10.008L21.144 9.744L22.968 9.432L23.808 9.816L23.904 10.2L23.568 11.016L21.6 11.496L19.296 11.976L15.864 12.768L15.816 12.792L15.864 12.864L17.4 13.008L18.072 13.056H19.704L22.728 13.296L23.52 13.776L23.976 14.424L23.904 14.904L22.68 15.528L21.048 15.144L17.208 14.232L15.912 13.92H15.72V14.016L16.824 15.096L18.816 16.896L21.36 19.224L21.48 19.8L21.168 20.28L20.832 20.232L18.624 18.552L17.76 17.832L15.84 16.2H15.72V16.368L16.152 17.016L18.504 20.544L18.624 21.624L18.456 21.96L17.832 22.2L17.184 22.056L15.792 20.136L14.352 17.976L13.224 16.008L13.104 16.104L12.408 23.352L12.096 23.712L11.376 24L10.776 23.52L10.44 22.8L10.776 21.312L11.16 19.392L11.472 17.856L11.76 15.96L11.928 15.336V15.288H11.76L10.32 17.28L8.16 20.232L6.432 22.056L6.024 22.224L5.304 21.864L5.376 21.192L5.76 20.64L8.16 17.568L9.6 15.672L10.56 14.568L10.536 14.448H10.464L4.128 18.576L3 18.72L2.52 18.24L2.568 17.52L2.808 17.28L4.728 15.96H4.704Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_23_202">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </SvgIcon>
+));
+
+ClaudeIcon.displayName = 'ClaudeIcon';

package/src/components/icons/cursor.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const CursorIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Cursor icon</title>
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      d="M22.1323 5.6806L12.5245 0.133623C12.216 -0.0445409 11.8353 -0.0445409 11.5268 0.133623L1.91947 5.6806C1.66012 5.83035 1.5 6.10727 1.5 6.40723V17.5928C1.5 17.8923 1.66012 18.1697 1.91947 18.3194L11.5272 23.8664C11.8358 24.0445 12.2164 24.0445 12.525 23.8664L22.1327 18.3194C22.3921 18.1697 22.5522 17.8927 22.5522 17.5928V6.40723C22.5522 6.10774 22.3921 5.83035 22.1327 5.6806H22.1323ZM21.5288 6.85558L12.2539 22.9201C12.1912 23.0283 12.0257 22.9841 12.0257 22.8587V12.3399C12.0257 12.1297 11.9133 11.9353 11.7311 11.8297L2.62176 6.57052C2.51351 6.50784 2.55771 6.34227 2.6831 6.34227H21.2329C21.4963 6.34227 21.6609 6.6278 21.5292 6.85605H21.5288V6.85558Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));
+
+CursorIcon.displayName = 'CursorIcon';

package/src/components/icons/vercel.tsx

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const VercelIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Vercel icon</title>
+    <g clipPath="url(#clip0_24_207)">
+      <path d="M11.9573 1.5L23.9146 22.2109H0L11.9573 1.5Z" fill="currentColor" />
+    </g>
+    <defs></defs>
+  </SvgIcon>
+));
+
+VercelIcon.displayName = 'VercelIcon';

package/src/components/icons/vs-code.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const VSCodeIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>VS Code icon</title>
+    <g clipPath="url(#clip0_22_190)">
+      <path
+        d="M18.0011 0.957249C18.0011 0.203854 17.1576 0.203846 16.7827 0.29802C17.3075 -0.116349 17.9231 -0.0158829 18.1417 0.10968L23.2103 2.59498C23.6933 2.83179 23.9996 3.32452 23.9996 3.86449V20.2141C23.9996 20.7613 23.6851 21.2593 23.1923 21.4923L18.4229 23.7475C18.0948 23.8887 17.3825 24.2372 16.7827 23.7474C17.5325 23.8888 17.9387 23.3551 18.0011 22.9941V0.957249Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.8439 0.285044C17.2418 0.206418 18.0016 0.242881 18.0016 0.957858V6.58559L2.63451 18.2108C2.3659 18.4141 1.98789 18.3803 1.75911 18.1327L0.175313 16.419C-0.0728021 16.1505 -0.0554421 15.7302 0.213964 15.4834L16.783 0.29863L16.8439 0.285044Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.0016 17.461L2.63451 5.83572C2.3659 5.63251 1.98789 5.66623 1.75911 5.91379L0.175313 7.62757C-0.0728021 7.89602 -0.0554421 8.31628 0.213964 8.56322L16.783 23.7479C17.5329 23.8892 17.9391 23.3555 18.0016 22.9945V17.461Z"
+        fill="currentColor"
+      />
+    </g>
+  </SvgIcon>
+));
+
+VSCodeIcon.displayName = 'VSCodeIcon';

package/src/components/icons/windsurf.tsx

@@ -0,0 +1,15 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const WindsurfIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Windsurf icon</title>
+    <path
+      xmlns="http://www.w3.org/2000/svg"
+      d="M23.7787 5.00376H23.55C22.3463 5.00188 21.3695 5.97669 21.3695 7.18024V12.0478C21.3695 13.0198 20.566 13.8072 19.6098 13.8072C19.0417 13.8072 18.4746 13.5213 18.138 13.0414L13.1667 5.94109C12.7542 5.35149 12.083 5 11.3564 5C10.223 5 9.20307 5.96357 9.20307 7.15308V12.0488C9.20307 13.0208 8.40623 13.8081 7.44346 13.8081C6.87349 13.8081 6.30724 13.5222 5.97068 13.0424L0.407794 5.09655C0.28217 4.91657 0 5.00564 0 5.22498V9.47015C0 9.68481 0.0656303 9.89291 0.188421 10.0691L5.66319 17.8874C5.98663 18.3495 6.46382 18.6926 7.01408 18.8173C8.39123 19.1303 9.65869 18.0702 9.65869 16.7195V11.8266C9.65869 10.8546 10.4462 10.0672 11.4183 10.0672H11.4211C12.007 10.0672 12.5564 10.3531 12.8929 10.833L17.8652 17.9324C18.2787 18.523 18.9152 18.8735 19.6745 18.8735C20.8332 18.8735 21.826 17.909 21.826 16.7204V11.8257C21.826 10.8537 22.6135 10.0663 23.5856 10.0663H23.7797C23.9015 10.0663 24 9.96787 24 9.84604V5.22402C24 5.10219 23.9015 5.00376 23.7797 5.00376H23.7787Z"
+      fill="currentColor"
+    />
+  </SvgIcon>
+));
+
+WindsurfIcon.displayName = 'WindsurfIcon';

package/src/components/ui/color-picker.tsx

@@ -0,0 +1,47 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@radix-ui/react-popover';
+import { HexColorInput, HexColorPicker } from 'react-colorful';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface ColorPickerInputProps {
+  color: string;
+  setColor: (color: string) => void;
+  placeholder: string;
+}
+
+export function ColorPickerInput({ placeholder, color, setColor }: ColorPickerInputProps) {
+  return (
+    <div className="relative flex items-center flex-row max-w-full">
+      <div className="absolute left-3 text-sm text-muted-foreground">#</div>
+      <HexColorInput
+        className={cn(
+          'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+          'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive disabled:bg-muted',
+          'pl-7 pr-12'
+        )}
+        color={color}
+        onChange={setColor}
+        placeholder={placeholder}
+      />
+      <div className="z-10 absolute right-3">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              aria-label="color picker"
+              className="flex flex-row gap-2 rounded w-6 h-6"
+              size="sm"
+              variant="ghost"
+              style={{ background: color }}
+            >
+              <span className="sr-only">Color picker</span>
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="flex flex-row w-fit p-2">
+            <HexColorPicker color={color} onChange={setColor} />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/dialog.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
 import type * as React from 'react';
-
 import { cn } from '@/lib/utils';
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -38,25 +38,53 @@ function DialogOverlay({
   );
 }
 
+const dialogContentVariants = cva(
+  'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed z-50 grid w-full max-w-[calc(100%-2rem)]  gap-4 rounded-lg border p-6 shadow-lg duration-200 max-h-[calc(100dvh-1.5rem)] overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent',
+  {
+    variants: {
+      variant: {
+        default: '',
+      },
+      position: {
+        top: 'top-3 left-[50%] translate-x-[-50%]',
+        center: 'top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]',
+        bottom: 'bottom-3 left-[50%] translate-x-[-50%]',
+      },
+      size: {
+        default: 'sm:max-w-lg',
+        sm: 'sm:max-w-md',
+        md: 'sm:max-w-lg',
+        lg: 'sm:max-w-xl',
+        xl: 'sm:max-w-2xl',
+        fullscreen: 'w-screen h-screen',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      position: 'center',
+      size: 'default',
+    },
+  }
+);
+
 function DialogContent({
   className,
   children,
   showCloseButton = true,
+  variant = 'default',
+  position = 'center',
+  size = 'default',
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
-}) {
+}: React.ComponentProps<typeof DialogPrimitive.Content> &
+  VariantProps<typeof dialogContentVariants> & {
+    showCloseButton?: boolean;
+  }) {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="dialog-content"
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-          'max-h-[calc(100dvh-1.5rem)] overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent',
-
-          className
-        )}
+        className={cn(dialogContentVariants({ variant, position, size, className }), className)}
         {...props}
       >
         {children}

package/src/components/ui/tabs.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
 import type { ComponentProps, FC } from 'react';
 import { cn } from '@/lib/utils';
 
@@ -16,14 +17,33 @@ const TabsList: FC<ComponentProps<typeof TabsPrimitive.List>> = ({ className, ..
   />
 );
 
-const TabsTrigger: FC<ComponentProps<typeof TabsPrimitive.Trigger>> = ({ className, ...props }) => (
-  <TabsPrimitive.Trigger
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      className
-    )}
-    {...props}
-  />
+const tabsTriggerVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm font-mono uppercase',
+        underline:
+          'bg-transparent data-[state=active]:border-primary dark:data-[state=active]:border-primary h-full rounded-none border-0 border-b-2 border-transparent data-[state=active]:shadow-none data-[state=active]:text-primary data-[state=active]:bg-transparent uppercase font-mono text-xs mt-0.5 pt-2',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {}
+
+const TabsTrigger: FC<ComponentProps<typeof TabsPrimitive.Trigger> & TabsTriggerProps> = ({
+  className,
+  variant,
+  ...props
+}) => (
+  <TabsPrimitive.Trigger className={cn(tabsTriggerVariants({ variant }), className)} {...props} />
 );
 
 const TabsContent: FC<ComponentProps<typeof TabsPrimitive.Content>> = ({ className, ...props }) => (
@@ -36,4 +56,4 @@ const TabsContent: FC<ComponentProps<typeof TabsPrimitive.Content>> = ({ classNa
   />
 );
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsTriggerVariants };