@vadimcomanescu/nadicode-design-system 2.0.9 → 4.0.1

package/dist/chunk-25BOZMXA.js

@@ -0,0 +1,169 @@
+import { CrudListDetailPageKit } from './chunk-OJ7OO3QB.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { KanbanBoard, KanbanColumn, KanbanColumnHeader, KanbanItem, KanbanHandle } from './chunk-TYP2MR3Q.js';
+import { Avatar, AvatarFallback } from './chunk-NAAU5IWU.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useState, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function mapState(state) {
+  switch (state) {
+    case "loading":
+      return "loading";
+    case "empty":
+      return "empty";
+    default:
+      return "has-data";
+  }
+}
+function KanbanBoardPageKit({
+  shell,
+  state,
+  columns,
+  getItemId,
+  onMove,
+  readOnly = false,
+  title = "Kanban board",
+  description = "Track work through draggable board columns with explicit move and failure contracts.",
+  moveErrorMessage,
+  activityRegion,
+  className
+}) {
+  const [selectedItemId, setSelectedItemId] = useState(null);
+  const boardColumns = useMemo(
+    () => columns.map((column) => ({ id: column.id, items: column.items })),
+    [columns]
+  );
+  const flattenedRows = useMemo(
+    () => columns.flatMap((column) => column.items.map((item) => ({
+      id: String(getItemId(item)),
+      summaryLabel: item.title,
+      cells: {
+        title: item.title,
+        column: column.title
+      }
+    }))),
+    [columns, getItemId]
+  );
+  const selectedItem = useMemo(() => {
+    if (!selectedItemId) {
+      return null;
+    }
+    for (const column of columns) {
+      const match = column.items.find((item) => String(getItemId(item)) === selectedItemId);
+      if (match) {
+        return match;
+      }
+    }
+    return null;
+  }, [columns, getItemId, selectedItemId]);
+  return /* @__PURE__ */ jsx(
+    CrudListDetailPageKit,
+    {
+      shell,
+      title,
+      description,
+      state: mapState(state),
+      columns: [
+        { id: "title", header: "Title" },
+        { id: "column", header: "Column" }
+      ],
+      rows: flattenedRows,
+      selectedRowId: selectedItemId,
+      onRowSelect: setSelectedItemId,
+      detailPanel: {
+        title: "Task detail",
+        description: "Review the selected work item without leaving the board context.",
+        mode: "inline",
+        renderDetail: () => {
+          if (!selectedItem) {
+            return /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: "Select a task to inspect details." });
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium text-text-primary", children: selectedItem.title }),
+            selectedItem.description ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: selectedItem.description }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              selectedItem.badgeLabel ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: selectedItem.badgeLabel }) : null,
+              selectedItem.assigneeLabel ? /* @__PURE__ */ jsx(Avatar, { className: "h-6 w-6 text-[11px]", children: /* @__PURE__ */ jsx(AvatarFallback, { children: selectedItem.assigneeLabel }) }) : null
+            ] })
+          ] });
+        }
+      },
+      emptyState: {
+        title: "No board columns available",
+        description: "Provide at least one column to render the kanban board."
+      },
+      pagination: {
+        page: 1,
+        totalPages: 1,
+        onPageChange: () => {
+        }
+      },
+      renderCollection: () => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        state === "move-failed" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "alert",
+            className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive",
+            children: moveErrorMessage ?? "A move failed. Keep board state and retry once the backend recovers."
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          KanbanBoard,
+          {
+            value: boardColumns,
+            getItemId,
+            getItemLabel: (item) => item.title,
+            canMove: readOnly ? () => false : void 0,
+            onValueChange: onMove,
+            className: cn("pb-2", className),
+            children: columns.map((column) => /* @__PURE__ */ jsxs(
+              KanbanColumn,
+              {
+                id: column.id,
+                items: column.items,
+                disabled: readOnly || column.disabled,
+                "aria-label": `${column.title} column`,
+                children: [
+                  /* @__PURE__ */ jsxs(KanbanColumnHeader, { children: [
+                    /* @__PURE__ */ jsx("span", { children: column.title }),
+                    /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "tabular-nums text-xs", children: column.items.length })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: column.items.map((item) => {
+                    const itemId = String(getItemId(item));
+                    return /* @__PURE__ */ jsx(
+                      KanbanItem,
+                      {
+                        value: item,
+                        disabled: readOnly,
+                        onClick: () => setSelectedItemId(itemId),
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                          !readOnly ? /* @__PURE__ */ jsx(KanbanHandle, { "aria-label": `Move ${item.title}` }) : null,
+                          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+                            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium text-text-primary", children: item.title }),
+                            item.description ? /* @__PURE__ */ jsx(Typography, { variant: "small", className: "line-clamp-2 text-text-secondary", children: item.description }) : null,
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                              item.badgeLabel ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: item.badgeLabel }) : null,
+                              item.assigneeLabel ? /* @__PURE__ */ jsx(Avatar, { className: "h-5 w-5 text-[10px]", children: /* @__PURE__ */ jsx(AvatarFallback, { children: item.assigneeLabel }) }) : null
+                            ] })
+                          ] })
+                        ] })
+                      },
+                      itemId
+                    );
+                  }) })
+                ]
+              },
+              column.id
+            ))
+          }
+        ),
+        activityRegion ? /* @__PURE__ */ jsx("div", { children: activityRegion }) : null
+      ] }),
+      className
+    }
+  );
+}
+
+export { KanbanBoardPageKit };

package/dist/chunk-32OLQ7FC.js

@@ -0,0 +1,130 @@
+import { VoiceAgentCard } from './chunk-HWHJ6IRQ.js';
+import { AgentConversationBlock } from './chunk-4IGBBIYW.js';
+import { Typography } from './chunk-N53OMWW2.js';
+import { ScrollArea } from './chunk-GLU236NN.js';
+import { Heading } from './chunk-WI547C47.js';
+import { Input } from './chunk-AP3XXYAY.js';
+import { Card, CardContent, CardHeader, CardTitle } from './chunk-AH6YSYYT.js';
+import { AudioWaveform } from './chunk-5UESKK6S.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { AgentMessageBubble } from './chunk-I66XWYSS.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var EMPTY_MESSAGES = [];
+function presenceLabel(state) {
+  switch (state) {
+    case "listening":
+      return "Listening";
+    case "speaking":
+      return "Speaking";
+    case "idle":
+      return "Idle";
+  }
+}
+function VoiceAgentsPageKit({
+  state = "agent-selection",
+  agents,
+  selectedAgentId,
+  presenceState = "idle",
+  messages = EMPTY_MESSAGES,
+  streamingReply,
+  composerValue = "",
+  composerPlaceholder = "Send a voice prompt...",
+  onComposerChange,
+  onSendMessage,
+  onSelectAgent,
+  onBackToSelection,
+  noAgentsMessage = "No voice agents are available right now.",
+  disconnectedMessage = "The selected agent is unavailable. Choose another agent.",
+  className
+}) {
+  const selectedAgent = useMemo(
+    () => selectedAgentId ? agents.find((agent) => agent.id === selectedAgentId) : null,
+    [agents, selectedAgentId]
+  );
+  function handleSendMessage() {
+    const payload = composerValue.trim();
+    if (!payload) {
+      return;
+    }
+    onSendMessage?.(payload);
+  }
+  if (state === "agent-selection") {
+    return /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+      /* @__PURE__ */ jsxs("header", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, children: "Voice agents" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "muted", children: "Choose an agent to start a voice session." })
+      ] }),
+      agents.length === 0 ? /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "py-6", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-text-secondary", children: noAgentsMessage }) }) }) : /* @__PURE__ */ jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: agents.map((agent) => /* @__PURE__ */ jsx(
+        VoiceAgentCard,
+        {
+          agent,
+          state: "idle",
+          selected: false,
+          onSelect: () => onSelectAgent?.(agent.id),
+          ariaLabel: `Select ${agent.name}`
+        },
+        agent.id
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, children: "Voice agents" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: onBackToSelection, children: "Back to agent selection" })
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "muted", children: selectedAgent ? `Active voice session with ${selectedAgent.name}.` : disconnectedMessage })
+    ] }),
+    selectedAgent ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium text-text-primary", children: selectedAgent.name }),
+      /* @__PURE__ */ jsx(Badge, { variant: "outline", children: presenceLabel(presenceState) }),
+      /* @__PURE__ */ jsx(AudioWaveform, { active: presenceState === "speaking", bars: 20, size: "sm", variant: "accent" })
+    ] }) : /* @__PURE__ */ jsx("div", { role: "alert", className: "rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive", children: disconnectedMessage }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Conversation" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs(ScrollArea, { className: "max-h-96", children: [
+          /* @__PURE__ */ jsx(
+            AgentConversationBlock,
+            {
+              messages: messages.length > 0 ? messages : [{
+                id: "voice-empty",
+                role: "system",
+                content: "No messages yet. Start speaking to begin the session."
+              }]
+            }
+          ),
+          !!streamingReply && /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-1", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-medium text-text-primary", children: "Streaming response" }),
+            /* @__PURE__ */ jsx(
+              AgentMessageBubble,
+              {
+                role: "assistant",
+                content: streamingReply,
+                isStreaming: true
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              "aria-label": "Voice composer",
+              value: composerValue,
+              placeholder: composerPlaceholder,
+              onChange: (event) => onComposerChange?.(event.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleSendMessage, children: "Send voice message" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+export { VoiceAgentsPageKit };

package/dist/chunk-3JJBJ4VR.js

@@ -0,0 +1,47 @@
+import { BarChart } from './chunk-UWHKZX4Y.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-55HD4L6G.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-AH6YSYYT.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var defaultData = [
+  { name: "Jan", total: 3200, prediction: 1800 },
+  { name: "Feb", total: 4100, prediction: 2200 },
+  { name: "Mar", total: 2800, prediction: 1500 },
+  { name: "Apr", total: 4600, prediction: 2900 },
+  { name: "May", total: 3500, prediction: 2100 },
+  { name: "Jun", total: 5200, prediction: 3100 }
+];
+var defaultConfig = {
+  total: { label: "Total", color: "rgb(var(--chart-1))" },
+  prediction: { label: "Prediction", color: "rgb(var(--chart-2))" }
+};
+function BarChartBlock({
+  data = defaultData,
+  config = defaultConfig,
+  title = "Token Usage",
+  description = "Monthly inference token consumption",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Card, { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: title }),
+      /* @__PURE__ */ jsx(CardDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(CardContent, { className: "pb-4", children: data.length === 0 ? /* @__PURE__ */ jsxs(Empty, { className: "min-h-[240px]", children: [
+      /* @__PURE__ */ jsx(EmptyTitle, { children: "No chart data" }),
+      /* @__PURE__ */ jsx(EmptyDescription, { children: "Token usage will appear here once analytics data is available." })
+    ] }) : /* @__PURE__ */ jsx(
+      BarChart,
+      {
+        data,
+        config,
+        indexKey: "name",
+        bars: ["total", "prediction"],
+        stacked: true
+      }
+    ) })
+  ] });
+}
+
+export { BarChartBlock };

package/dist/chunk-3U56FXYC.js

@@ -0,0 +1,30 @@
+import { AuthSuccessBlock } from './chunk-LCKLZ4XK.js';
+import { CheckCircleIcon } from './chunk-226EBOTK.js';
+import { cn } from './chunk-QYZT24TS.js';
+import { jsx } from 'react/jsx-runtime';
+
+function SuccessPageKit({
+  icon = /* @__PURE__ */ jsx(CheckCircleIcon, { size: 32, className: "text-success" }),
+  title = "Success",
+  description = "Your request completed successfully.",
+  buttonText = "Continue",
+  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 { SuccessPageKit };

package/dist/chunk-4MWKE6F5.js

@@ -0,0 +1,86 @@
+import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger } from './chunk-J2DCQDXO.js';
+import { siteConfig } from './chunk-A7NUWD76.js';
+import { Empty, EmptyTitle, EmptyDescription } from './chunk-55HD4L6G.js';
+import { useMotionConfig, m, motionSpring } from './chunk-PD2YEH3H.js';
+import { UsersIcon } from './chunk-WUO7OONN.js';
+import { SettingsIcon } from './chunk-OITJWGFV.js';
+import { LockIcon } from './chunk-RYOTIXZO.js';
+import { LayoutDashboardIcon } from './chunk-O74AEVHW.js';
+import { CreditCardIcon } from './chunk-JHQTKMKG.js';
+import { BellIcon } from './chunk-JBK2LA6U.js';
+import { UserIcon } from './chunk-UHXGBV5N.js';
+import { Badge } from './chunk-S4JAHKOP.js';
+import React from 'react';
+import { AnimatePresence } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultLinks = [
+  { label: "General", icon: /* @__PURE__ */ jsx(SettingsIcon, { size: 16 }) },
+  { label: "Profile", icon: /* @__PURE__ */ jsx(UserIcon, { size: 16 }) },
+  { label: "Team", icon: /* @__PURE__ */ jsx(UsersIcon, { size: 16 }), badge: "New" },
+  { label: "Notifications", icon: /* @__PURE__ */ jsx(BellIcon, { size: 16 }) },
+  { label: "Security", icon: /* @__PURE__ */ jsx(LockIcon, { size: 16 }) },
+  { label: "Billing", icon: /* @__PURE__ */ jsx(CreditCardIcon, { size: 16 }) }
+];
+function SettingsLayout({
+  links = defaultLinks,
+  title = siteConfig.name,
+  subtitle = "Enterprise",
+  defaultActive = "Profile",
+  className,
+  renderContent
+}) {
+  const motionConfig = useMotionConfig();
+  const [activeLink, setActiveLink] = React.useState(defaultActive);
+  return /* @__PURE__ */ jsx(SidebarProvider, { className: className ?? "h-[800px] w-full glass-panel rounded-xl overflow-hidden shadow-2xl", children: /* @__PURE__ */ jsxs("div", { className: "h-full w-full bg-background flex", children: [
+    /* @__PURE__ */ jsxs(Sidebar, { collapsible: "none", className: "hidden sm:flex w-64 border-r border-border bg-muted/20", children: [
+      /* @__PURE__ */ jsx(SidebarHeader, { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 px-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-glow", children: /* @__PURE__ */ jsx(LayoutDashboardIcon, { size: 16 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-text-secondary", children: subtitle })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(SidebarContent, { className: "px-2", children: /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { className: "space-y-1.5", children: links.map((link) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+        SidebarMenuButton,
+        {
+          isActive: activeLink === link.label,
+          onClick: () => setActiveLink(link.label),
+          className: "justify-between",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              link.icon,
+              /* @__PURE__ */ jsx("span", { children: link.label })
+            ] }),
+            link.badge && /* @__PURE__ */ jsx(Badge, { variant: "accent", className: "h-5 px-1.5 text-[10px]", children: link.badge })
+          ]
+        }
+      ) }, link.label)) }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto bg-background/50", children: [
+      /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 flex items-center border-b border-border bg-background px-4 py-2 sm:hidden", children: [
+        /* @__PURE__ */ jsx(SidebarTrigger, {}),
+        /* @__PURE__ */ jsx("span", { className: "ml-2 text-sm font-medium text-text-primary", children: "Settings" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto p-8", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
+        m.div,
+        {
+          initial: { opacity: 0, y: 8 },
+          animate: { opacity: 1, y: 0 },
+          exit: { opacity: 0, y: -8 },
+          transition: { ...motionSpring.snappy, ...motionConfig },
+          children: renderContent ? renderContent(activeLink) : /* @__PURE__ */ jsxs(Empty, { className: "h-[400px]", children: [
+            /* @__PURE__ */ jsxs(EmptyTitle, { children: [
+              activeLink,
+              " Settings"
+            ] }),
+            /* @__PURE__ */ jsx(EmptyDescription, { children: "This section is under construction." })
+          ] })
+        },
+        activeLink
+      ) }) })
+    ] })
+  ] }) });
+}
+
+export { SettingsLayout };

package/dist/chunk-6HGSU24S.js

@@ -0,0 +1,94 @@
+import { MediaWiki } from './chunk-H466RJCI.js';
+import { Replit } from './chunk-DT6DGTVW.js';
+import { VSCodium } from './chunk-J5DRK4RF.js';
+import { Gemini } from './chunk-TSVN5A2F.js';
+import { GooglePaLM } from './chunk-PX2WVDDB.js';
+import { MagicUI } from './chunk-BZYMCJHW.js';
+import { StaggerChildren } from './chunk-DQPK2XRL.js';
+import { Heading } from './chunk-WI547C47.js';
+import { ScrollFadeIn } from './chunk-I23DDSU7.js';
+import { Card } from './chunk-AH6YSYYT.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { ChevronRightIcon } from './chunk-G24VV5NO.js';
+import Link from 'next/link';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var defaultIntegrations = [
+  {
+    title: "Google Gemini",
+    description: "Advanced multimodal AI for reasoning, code generation, and creative tasks.",
+    icon: /* @__PURE__ */ jsx(Gemini, {})
+  },
+  {
+    title: "Replit",
+    description: "Cloud-based IDE with real-time collaboration and instant deployment.",
+    icon: /* @__PURE__ */ jsx(Replit, {})
+  },
+  {
+    title: "Magic UI",
+    description: "Beautiful animated components to elevate your interface design.",
+    icon: /* @__PURE__ */ jsx(MagicUI, {})
+  },
+  {
+    title: "VSCodium",
+    description: "Open-source code editor with full extension ecosystem support.",
+    icon: /* @__PURE__ */ jsx(VSCodium, {})
+  },
+  {
+    title: "MediaWiki",
+    description: "Structured knowledge management with powerful search and versioning.",
+    icon: /* @__PURE__ */ jsx(MediaWiki, {})
+  },
+  {
+    title: "Google PaLM",
+    description: "Large language model API for text generation and understanding.",
+    icon: /* @__PURE__ */ jsx(GooglePaLM, {})
+  }
+];
+function IntegrationsBlock({
+  title = "Integrate with your favorite tools",
+  description = "Connect seamlessly with popular platforms and services to enhance your workflow.",
+  integrations = defaultIntegrations,
+  className
+} = {}) {
+  return /* @__PURE__ */ jsx(ScrollFadeIn, { children: /* @__PURE__ */ jsx("section", { className, children: /* @__PURE__ */ jsx("div", { className: "py-32", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl px-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 2, size: "section", className: "md:text-4xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-text-tertiary mt-6", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(StaggerChildren, { staggerMs: 80, className: "mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: integrations.map((integration, i) => /* @__PURE__ */ jsx(
+      IntegrationCard,
+      {
+        title: integration.title,
+        description: integration.description,
+        link: integration.link,
+        children: integration.icon
+      },
+      i
+    )) })
+  ] }) }) }) });
+}
+var IntegrationCard = ({ title, description, children, link = "https://github.com/meschacirung/cnblocks" }) => {
+  return /* @__PURE__ */ jsx(Card, { className: "p-6", interactive: true, children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx("div", { className: "*:size-10", children }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 py-6", children: [
+      /* @__PURE__ */ jsx(Heading, { level: 3, size: "eyebrow", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-text-tertiary line-clamp-2 text-sm", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-4 border-t border-dashed pt-6", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        asChild: true,
+        variant: "secondary",
+        size: "sm",
+        className: "gap-1.5 pr-2 shadow-none",
+        children: /* @__PURE__ */ jsxs(Link, { href: link, children: [
+          "Learn More",
+          /* @__PURE__ */ jsx(ChevronRightIcon, { size: 14, className: "ml-0 opacity-50" })
+        ] })
+      }
+    ) })
+  ] }) });
+};
+
+export { IntegrationsBlock };