@vadimcomanescu/nadicode-design-system 2.0.8 → 4.0.0

package/dist/chunk-SIQNG72C.js

@@ -0,0 +1,257 @@
+import { ToolCallCard } from './chunk-4WPZ6T7V.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './chunk-EYWOKTOY.js';
+import { Textarea } from './chunk-4OBE2FS2.js';
+import { ThinkingIndicator } from './chunk-OSNTB6RY.js';
+import { ScrollArea } from './chunk-GLU236NN.js';
+import { Heading } from './chunk-WI547C47.js';
+import { CodeDiffViewer } from './chunk-DFPXK2JO.js';
+import { ArtifactCard } from './chunk-D4NC7WX5.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { AgentMessageBubble } from './chunk-I66XWYSS.js';
+import { SendIcon } from './chunk-CRZ2JE24.js';
+import { AgentTerminal } from './chunk-EK43W2Y6.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultMessages = [
+  {
+    id: "1",
+    role: "user",
+    content: "Review the failing workflow graph and tell me what changed after the last tool run.",
+    timestamp: "10:30 AM"
+  },
+  {
+    id: "2",
+    role: "assistant",
+    content: "I am tracing the run log now. The current issue is a routing regression in the graph layer.",
+    timestamp: "10:31 AM",
+    isThinking: true,
+    reasoning: "Inspecting tool output, render timing, and the latest diff to isolate whether the failure is visual, structural, or data-driven.",
+    toolCalls: [
+      {
+        toolName: "read_file",
+        args: { path: "src/components/ui/WorkflowGraph.tsx" },
+        status: "complete",
+        duration: 340
+      }
+    ]
+  },
+  {
+    id: "3",
+    role: "assistant",
+    content: "The flow is fixed. Tool nodes are now distinct, and edges route around the boxes rather than clipping them.",
+    timestamp: "10:32 AM",
+    isStreaming: true
+  }
+];
+var defaultArtifacts = [
+  {
+    id: "artifact-sql",
+    type: "code",
+    title: "optimized-query.sql",
+    language: "sql",
+    content: `SELECT u.id, u.name, COUNT(o.id) as order_count
+FROM users u
+LEFT JOIN orders o ON o.user_id = u.id
+GROUP BY u.id, u.name
+ORDER BY order_count DESC
+LIMIT 10;`,
+    defaultExpanded: true
+  },
+  {
+    id: "artifact-md",
+    type: "markdown",
+    title: "Operator summary",
+    content: `Workflow graph stabilized.
+
+Next steps:
+- Verify dark mode
+- Validate mobile layout
+- Confirm human checkpoint labels`,
+    defaultExpanded: true
+  }
+];
+var defaultDiffs = [
+  {
+    id: "diff-workflow",
+    filePath: "src/components/ui/WorkflowGraph.tsx",
+    language: "typescript",
+    hunks: [
+      {
+        changes: [
+          {
+            type: "context",
+            content: "function WorkflowGraph({ className, nodes, edges, ref, ...props }) {",
+            lineNumber: 184
+          },
+          {
+            type: "remove",
+            content: "const cx1 = x1 + (x2 - x1) * 0.4",
+            lineNumber: 291
+          },
+          {
+            type: "remove",
+            content: "const cx2 = x2 - (x2 - x1) * 0.4",
+            lineNumber: 292
+          },
+          {
+            type: "add",
+            content: "const turnX = x1 + Math.max((x2 - x1) / 2, EDGE_TURN_X)",
+            lineNumber: 291
+          },
+          {
+            type: "add",
+            content: "d={`M ${x1} ${y1} L ${turnX} ${y1} L ${turnX} ${y2} L ${x2} ${y2}`}",
+            lineNumber: 297
+          }
+        ]
+      }
+    ]
+  }
+];
+var defaultLogs = [
+  { text: "npm run test -- AgentWorkbenchBlock", type: "stdin" },
+  { text: "vitest run src/components/blocks/AgentWorkbenchBlock.test.tsx", type: "stdout" },
+  { text: "\u2713 renders messages and work panel tabs", type: "stdout" },
+  { text: "\u2713 sends composer input through the provided handler", type: "stdout" },
+  { text: "Done in 1.4s", type: "stdout" }
+];
+var defaultComposer = {
+  placeholder: "Type a message for the active agent run...",
+  disabled: false
+};
+function AgentWorkbenchBlock({
+  className,
+  title = "Agent workbench",
+  description = "A reusable run surface for conversation, tool traces, artifacts, diffs, and terminal output.",
+  threadTitle = "Conversation",
+  workTitle = "Work panel",
+  defaultWorkTab = "artifacts",
+  messages = defaultMessages,
+  artifacts = defaultArtifacts,
+  diffs = defaultDiffs,
+  logs = defaultLogs,
+  composer,
+  ref,
+  ...props
+}) {
+  const [draft, setDraft] = React.useState(() => composer?.value ?? "");
+  const composerValue = composer?.value ?? draft;
+  const composerPlaceholder = composer?.placeholder ?? defaultComposer.placeholder;
+  const composerDisabled = composer?.disabled ?? defaultComposer.disabled;
+  function handleComposerChange(value) {
+    if (composer?.value == null) {
+      setDraft(value);
+    }
+    composer?.onChange?.(value);
+  }
+  function handleSend() {
+    const value = composerValue.trim();
+    if (!value || composerDisabled) return;
+    composer?.onSend?.(value);
+    if (composer?.value == null) {
+      setDraft("");
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      className: cn("space-y-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", children: title }),
+          /* @__PURE__ */ jsx(Typography, { variant: "muted", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "grid gap-4 xl:grid-cols-[minmax(0,1.3fr)_360px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "surface-solid flex min-h-[560px] flex-col overflow-hidden rounded-lg", children: [
+            /* @__PURE__ */ jsx("div", { className: "border-b border-border px-4 py-4", children: /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", children: threadTitle }) }),
+            /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "space-y-4 p-4", "aria-live": "polite", children: messages.map((message) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              message.isThinking && /* @__PURE__ */ jsx(ThinkingIndicator, { reasoning: message.reasoning }),
+              /* @__PURE__ */ jsx(
+                AgentMessageBubble,
+                {
+                  role: message.role,
+                  content: message.content,
+                  timestamp: message.timestamp,
+                  isStreaming: message.isStreaming,
+                  toolCalls: message.toolCalls && message.toolCalls.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsx(
+                    ToolCallCard,
+                    {
+                      toolName: toolCall.toolName,
+                      args: toolCall.args,
+                      status: toolCall.status,
+                      result: toolCall.result,
+                      duration: toolCall.duration
+                    },
+                    `${message.id}-${toolCall.toolName}`
+                  )) }) : void 0
+                }
+              )
+            ] }, message.id)) }) }),
+            /* @__PURE__ */ jsx("div", { className: "border-t border-border p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4", children: [
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  "aria-label": "Message input",
+                  className: "min-h-[88px] flex-1 resize-none",
+                  placeholder: composerPlaceholder,
+                  value: composerValue,
+                  onChange: (event) => handleComposerChange(event.target.value),
+                  disabled: composerDisabled
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  size: "icon",
+                  onClick: handleSend,
+                  disabled: composerDisabled || !composerValue.trim(),
+                  "aria-label": "Send message",
+                  children: /* @__PURE__ */ jsx(SendIcon, { size: 16 })
+                }
+              )
+            ] }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "surface-solid overflow-hidden rounded-lg p-4", children: [
+            /* @__PURE__ */ jsx(Heading, { level: 4, size: "title", className: "mb-4", children: workTitle }),
+            /* @__PURE__ */ jsxs(Tabs, { defaultValue: defaultWorkTab, className: "flex h-full flex-col", children: [
+              /* @__PURE__ */ jsxs(TabsList, { className: "w-full justify-start", children: [
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "artifacts", children: "Artifacts" }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "diffs", children: "Diffs" }),
+                /* @__PURE__ */ jsx(TabsTrigger, { value: "logs", children: "Logs" })
+              ] }),
+              /* @__PURE__ */ jsx(TabsContent, { value: "artifacts", className: "mt-4", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[428px]", children: /* @__PURE__ */ jsx("div", { className: "space-y-4 pr-4", children: artifacts.map((artifact) => /* @__PURE__ */ jsx(
+                ArtifactCard,
+                {
+                  type: artifact.type,
+                  title: artifact.title,
+                  content: artifact.content,
+                  language: artifact.language,
+                  defaultExpanded: artifact.defaultExpanded
+                },
+                artifact.id
+              )) }) }) }),
+              /* @__PURE__ */ jsx(TabsContent, { value: "diffs", className: "mt-4", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-[428px]", children: /* @__PURE__ */ jsx("div", { className: "space-y-4 pr-4", children: diffs.map((diff) => /* @__PURE__ */ jsx(
+                CodeDiffViewer,
+                {
+                  filePath: diff.filePath,
+                  language: diff.language,
+                  hunks: diff.hunks
+                },
+                diff.id
+              )) }) }) }),
+              /* @__PURE__ */ jsx(TabsContent, { value: "logs", className: "mt-4", children: /* @__PURE__ */ jsx(AgentTerminal, { title: "run-output", lines: logs }) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { AgentWorkbenchBlock };

package/dist/chunk-SP7NIZFP.js

@@ -0,0 +1,117 @@
+import { DataTable } from './chunk-PDSQC6VE.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator } from './chunk-CQEUNASC.js';
+import { siteConfig } from './chunk-A7NUWD76.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { EllipsisIcon } from './chunk-5ESF6N36.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { useMemo } from 'react';
+import { useTranslations } from 'next-intl';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var USD_FORMAT = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+function createColumns(t) {
+  return [
+    {
+      accessorKey: "status",
+      header: t("statusHeader"),
+      cell: ({ row }) => {
+        const status = row.getValue("status");
+        const variant = status === "success" ? "outline" : status === "processing" ? "accent" : status === "failed" ? "destructive" : "secondary";
+        return /* @__PURE__ */ jsx(Badge, { variant, children: status });
+      }
+    },
+    {
+      accessorKey: "email",
+      header: t("emailHeader"),
+      cell: ({ row }) => /* @__PURE__ */ jsx("div", { className: "lowercase text-text-secondary", children: row.getValue("email") })
+    },
+    {
+      accessorKey: "amount",
+      header: () => /* @__PURE__ */ jsx("div", { className: "text-right", children: t("amountHeader") }),
+      cell: ({ row }) => {
+        const amount = parseFloat(row.getValue("amount"));
+        const formatted = USD_FORMAT.format(amount);
+        return /* @__PURE__ */ jsx("div", { className: "text-right font-medium font-mono text-text-primary", children: formatted });
+      }
+    },
+    {
+      id: "actions",
+      header: () => /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("actionsHeader") }),
+      cell: ({ row }) => {
+        const payment = row.original;
+        return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "p-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("openMenu") }),
+            /* @__PURE__ */ jsx(EllipsisIcon, { size: 16 })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+            /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("actionsHeader") }),
+            /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                onClick: () => navigator.clipboard.writeText(payment.id),
+                children: t("copyPaymentId")
+              }
+            ),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsx(DropdownMenuItem, { children: t("viewCustomer") }),
+            /* @__PURE__ */ jsx(DropdownMenuItem, { children: t("viewPaymentDetails") })
+          ] })
+        ] });
+      }
+    }
+  ];
+}
+var defaultData = [
+  {
+    id: "728ed52f",
+    amount: 100,
+    status: "pending",
+    email: "m@example.com"
+  },
+  {
+    id: "489e1d42",
+    amount: 125,
+    status: "processing",
+    email: "example@gmail.com"
+  },
+  {
+    id: "123e1d42",
+    amount: 550,
+    status: "success",
+    email: `corporate@${siteConfig.name.toLowerCase()}.inc`
+  },
+  {
+    id: "999e1d42",
+    amount: 25,
+    status: "failed",
+    email: "user@domain.com"
+  },
+  {
+    id: "444e1d42",
+    amount: 300,
+    status: "success",
+    email: "sales@company.com"
+  }
+];
+function DataGridBlock({
+  data = defaultData,
+  columns: columnDefs,
+  title = "Recent Transactions",
+  description = "A sophisticated data grid with filtering and actions.",
+  className
+}) {
+  const t = useTranslations("blocks.dataGridBlock");
+  const defaultColumns = useMemo(() => createColumns(t), [t]);
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsxs(Card, { className: className ?? "w-full", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(DataTable, { columns: columnDefs ?? defaultColumns, data, searchKey: "email" }) })
+  ] }) });
+}
+
+export { DataGridBlock };

package/dist/chunk-SWRJWMGG.js

@@ -0,0 +1,30 @@
+import { AuthSuccessBlock } from './chunk-LCKLZ4XK.js';
+import { MailIcon } from './chunk-XQ2UDMPO.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx } from 'react/jsx-runtime';
+
+function VerifyEmailPageKit({
+  icon = /* @__PURE__ */ jsx(MailIcon, { size: 32, className: "text-success" }),
+  title = "Email verified!",
+  description = "Your email has been verified. Continue to sign in.",
+  buttonText = "Continue to sign in",
+  onContinue,
+  autoRedirectSeconds,
+  className,
+  cardClassName
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("min-h-dvh w-full bg-background px-4 py-12 md:px-8 md:py-20", className), children: /* @__PURE__ */ jsx("div", { className: "mx-auto flex w-full max-w-5xl items-center justify-center", children: /* @__PURE__ */ jsx(
+    AuthSuccessBlock,
+    {
+      className: cn("w-full", cardClassName),
+      icon,
+      title,
+      description,
+      buttonText,
+      onContinue,
+      autoRedirectSeconds
+    }
+  ) }) });
+}
+
+export { VerifyEmailPageKit };

package/dist/chunk-TCQIJ3DO.js

@@ -0,0 +1,85 @@
+import { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuAction } from './chunk-J2DCQDXO.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './chunk-CQEUNASC.js';
+import { Empty, EmptyDescription } from './chunk-55HD4L6G.js';
+import { UsersIcon } from './chunk-WUO7OONN.js';
+import { Trash2Icon } from './chunk-S4GKGKON.js';
+import { StarIcon } from './chunk-ELKIUARM.js';
+import { SettingsIcon } from './chunk-OITJWGFV.js';
+import { LayoutDashboardIcon } from './chunk-O74AEVHW.js';
+import { HomeIcon } from './chunk-IQEBXXB5.js';
+import { FolderIcon } from './chunk-I3TH7PIB.js';
+import { EllipsisIcon } from './chunk-5ESF6N36.js';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultNavItems = [
+  { name: "Home", icon: /* @__PURE__ */ jsx(HomeIcon, { size: 16 }), isActive: true },
+  { name: "Dashboard", icon: /* @__PURE__ */ jsx(LayoutDashboardIcon, { size: 16 }) },
+  { name: "Team", icon: /* @__PURE__ */ jsx(UsersIcon, { size: 16 }) },
+  { name: "Settings", icon: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 }) }
+];
+var defaultProjects = [
+  { name: "Design Engineering", url: "#" },
+  { name: "Sales & Marketing", url: "#" },
+  { name: "Travel", url: "#" }
+];
+function DirectoryBlock({
+  navItems = defaultNavItems,
+  projects = defaultProjects,
+  className
+}) {
+  const t = useTranslations("blocks.directoryBlock");
+  return /* @__PURE__ */ jsxs("div", { className: className ?? "h-[500px] border border-border rounded-lg overflow-hidden flex bg-surface text-text-primary", children: [
+    /* @__PURE__ */ jsx(SidebarProvider, { className: "h-full", children: /* @__PURE__ */ jsx(Sidebar, { collapsible: "none", className: "h-full border-r border-border", children: /* @__PURE__ */ jsxs(SidebarContent, { children: [
+      /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+        /* @__PURE__ */ jsx(SidebarGroupLabel, { children: t("platform") }),
+        /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: navItems.map((item) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { isActive: item.isActive, children: [
+          item.icon,
+          /* @__PURE__ */ jsx("span", { children: item.name })
+        ] }) }, item.name)) }) })
+      ] }),
+      /* @__PURE__ */ jsxs(SidebarGroup, { children: [
+        /* @__PURE__ */ jsx(SidebarGroupLabel, { children: t("projects") }),
+        /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: projects.map((item) => /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+          /* @__PURE__ */ jsx(SidebarMenuButton, { asChild: true, children: /* @__PURE__ */ jsxs(Link, { href: item.url, children: [
+            /* @__PURE__ */ jsx(FolderIcon, { size: 16 }),
+            /* @__PURE__ */ jsx("span", { children: item.name })
+          ] }) }),
+          /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(SidebarMenuAction, { showOnHover: true, children: [
+              /* @__PURE__ */ jsx(EllipsisIcon, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("more") })
+            ] }) }),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuContent,
+              {
+                className: "w-48 rounded-lg",
+                side: "bottom",
+                align: "end",
+                children: [
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                    /* @__PURE__ */ jsx(FolderIcon, { size: 16, className: "text-text-tertiary" }),
+                    /* @__PURE__ */ jsx("span", { children: t("viewProject") })
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                    /* @__PURE__ */ jsx(StarIcon, { size: 16, className: "text-text-tertiary" }),
+                    /* @__PURE__ */ jsx("span", { children: t("addToFavorites") })
+                  ] }),
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
+                    /* @__PURE__ */ jsx(Trash2Icon, { size: 16, className: "text-text-tertiary" }),
+                    /* @__PURE__ */ jsx("span", { children: t("deleteProject") })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        ] }, item.name)) }) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 p-8 bg-background", children: /* @__PURE__ */ jsx(Empty, { className: "h-full", children: /* @__PURE__ */ jsx(EmptyDescription, { children: t("selectProject") }) }) })
+  ] });
+}
+
+export { DirectoryBlock };