feat(docs): added more docs, cleaned up

docs/components/ui/block-types.tsx

@@ -0,0 +1,123 @@
+import { cn } from '@/lib/utils'
+import { AgentIcon, ApiIcon, ChartBarIcon, CodeIcon, ConditionalIcon, ConnectIcon } from '../icons'
+
+// Custom Feature component specifically for BlockTypes to handle the 6-item layout
+const BlockFeature = ({
+  title,
+  description,
+  icon,
+  href,
+  index,
+  totalItems,
+  itemsPerRow,
+}: {
+  title: string
+  description: string
+  icon: React.ReactNode
+  href?: string
+  index: number
+  totalItems: number
+  itemsPerRow: number
+}) => {
+  const content = (
+    <>
+      {index < itemsPerRow && (
+        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
+      )}
+      {index >= itemsPerRow && (
+        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
+      )}
+      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">{icon}</div>
+      <div className="text-lg font-bold mb-2 relative z-10 px-10">
+        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-purple-500 transition-all duration-200 origin-center" />
+        <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
+          {title}
+        </span>
+      </div>
+      <p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
+        {description}
+      </p>
+    </>
+  )
+
+  const containerClasses = cn(
+    'flex flex-col lg:border-r py-5 relative group/feature dark:border-neutral-800',
+    (index === 0 || index === itemsPerRow) && 'lg:border-l dark:border-neutral-800',
+    index < itemsPerRow && 'lg:border-b dark:border-neutral-800',
+    href && 'cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900/50 transition-colors'
+  )
+
+  if (href) {
+    return (
+      <a href={href} className={containerClasses} style={{ textDecoration: 'none' }}>
+        {content}
+      </a>
+    )
+  }
+
+  return <div className={containerClasses}>{content}</div>
+}
+
+export function BlockTypes() {
+  const features = [
+    {
+      title: 'Agent',
+      description:
+        'Create powerful AI agents using any LLM provider with customizable system prompts and tool integrations.',
+      icon: <AgentIcon className="w-6 h-6" />,
+      href: '/docs/blocks/agent',
+    },
+    {
+      title: 'API',
+      description:
+        'Connect to any external API with support for all standard HTTP methods and customizable request parameters.',
+      icon: <ApiIcon className="w-6 h-6" />,
+      href: '/docs/blocks/api',
+    },
+    {
+      title: 'Condition',
+      description:
+        'Add a condition to the workflow to branch the execution path based on a boolean expression.',
+      icon: <ConditionalIcon className="w-6 h-6" />,
+      href: '/docs/blocks/condition',
+    },
+    {
+      title: 'Function',
+      description:
+        'Execute custom JavaScript or TypeScript code within your workflow to transform data or implement complex logic.',
+      icon: <CodeIcon className="w-6 h-6" />,
+      href: '/docs/blocks/function',
+    },
+    {
+      title: 'Router',
+      description:
+        'Intelligently direct workflow execution to different paths based on input analysis.',
+      icon: <ConnectIcon className="w-6 h-6" />,
+      href: '/docs/blocks/router',
+    },
+    {
+      title: 'Evaluator',
+      description:
+        'Assess content using customizable evaluation metrics and scoring criteria across multiple dimensions.',
+      icon: <ChartBarIcon className="w-6 h-6" />,
+      href: '/docs/blocks/evaluator',
+    },
+  ]
+
+  const totalItems = features.length
+  const itemsPerRow = 3 // For large screens
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 relative z-10 py-10 max-w-7xl mx-auto">
+      {features.map((feature, index) => (
+        <BlockFeature
+          key={feature.title}
+          {...feature}
+          index={index}
+          totalItems={totalItems}
+          itemsPerRow={itemsPerRow}
+        />
+      ))}
+    </div>
+  )
+}

docs/components/ui/features.tsx

@@ -0,0 +1,102 @@
+import {
+  IconAdjustmentsBolt,
+  IconCloud,
+  IconCurrencyDollar,
+  IconEaseInOut,
+  IconHeart,
+  IconHelp,
+  IconRouteAltLeft,
+  IconTerminal2,
+} from '@tabler/icons-react'
+import { cn } from '@/lib/utils'
+
+export function Features() {
+  const features = [
+    {
+      title: 'Multi-LLM Support',
+      description: 'Connect to any LLM provider including OpenAI, Anthropic, and more',
+      icon: <IconCloud />,
+    },
+    {
+      title: 'API Deployment',
+      description: 'Deploy your workflows as secure, scalable APIs',
+      icon: <IconTerminal2 />,
+    },
+    {
+      title: 'Webhook Integration',
+      description: 'Trigger workflows via webhooks from external services',
+      icon: <IconRouteAltLeft />,
+    },
+    {
+      title: 'Scheduled Execution',
+      description: 'Schedule workflows to run at specific times or intervals',
+      icon: <IconEaseInOut />,
+    },
+    {
+      title: '100+ Integrations',
+      description: 'Connect to hundreds of external services and data sources',
+      icon: <IconAdjustmentsBolt />,
+    },
+    {
+      title: 'Visual Debugging',
+      description: 'Debug workflows visually with detailed execution logs',
+      icon: <IconHelp />,
+    },
+    {
+      title: 'Version Control',
+      description: 'Track changes and roll back to previous versions',
+      icon: <IconCurrencyDollar />,
+    },
+    {
+      title: 'Team Collaboration',
+      description: 'Collaborate with team members on workflow development',
+      icon: <IconHeart />,
+    },
+  ]
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
+      {features.map((feature, index) => (
+        <Feature key={feature.title} {...feature} index={index} />
+      ))}
+    </div>
+  )
+}
+
+export const Feature = ({
+  title,
+  description,
+  icon,
+  index,
+}: {
+  title: string
+  description: string
+  icon: React.ReactNode
+  index: number
+}) => {
+  return (
+    <div
+      className={cn(
+        'flex flex-col lg:border-r py-5 relative group/feature dark:border-neutral-800',
+        (index === 0 || index === 4) && 'lg:border-l dark:border-neutral-800',
+        index < 4 && 'lg:border-b dark:border-neutral-800'
+      )}
+    >
+      {index < 4 && (
+        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-t from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
+      )}
+      {index >= 4 && (
+        <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
+      )}
+      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">{icon}</div>
+      <div className="text-lg font-bold mb-2 relative z-10 px-10">
+        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-purple-500 transition-all duration-200 origin-center" />
+        <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-neutral-800 dark:text-neutral-100">
+          {title}
+        </span>
+      </div>
+      <p className="text-sm text-neutral-600 dark:text-neutral-300 max-w-xs relative z-10 px-10">
+        {description}
+      </p>
+    </div>
+  )
+}

docs/content/docs/blocks/index.mdx

@@ -6,6 +6,7 @@ description: Building blocks for your agentic workflows
 import { Card, Cards } from 'fumadocs-ui/components/card'
 import { Tabs, Tab } from 'fumadocs-ui/components/tabs'
 import { Steps, Step } from 'fumadocs-ui/components/steps'
+import { BlockTypes } from '@/components/ui/block-types'
 
 Blocks are the fundamental building components of Sim Studio workflows. Each block has a specific purpose and can be connected to other blocks to create sophisticated workflows.
 
@@ -17,88 +18,7 @@ A block is a reusable, configurable component that performs a specific function
 
 Sim Studio provides six powerful block types that form the foundation of any workflow. Each block is designed to handle specific aspects of your agentic applications, from AI-powered reasoning to conditional logic and external integrations.
 
-<Tabs items={['Grid View', 'Card View']}>
-  <Tab>
-    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 my-6">
-      <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
-        <h3 className="font-medium text-lg mb-2">Agent</h3>
-        <div className="text-sm text-gray-600 dark:text-gray-400">
-          Create powerful AI agents using any LLM provider
-        </div>
-      </div>
-      <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
-        <h3 className="font-medium text-lg mb-2">API</h3>
-        <div className="text-sm text-gray-600 dark:text-gray-400">
-          Connect to external services through HTTP requests
-        </div>
-      </div>
-      <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
-        <h3 className="font-medium text-lg mb-2">Condition</h3>
-        <div className="text-sm text-gray-600 dark:text-gray-400">
-          Branch workflow execution based on boolean expressions
-        </div>
-      </div>
-      <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
-        <h3 className="font-medium text-lg mb-2">Function</h3>
-        <div className="text-sm text-gray-600 dark:text-gray-400">
-          Execute custom JavaScript or TypeScript code
-        </div>
-      </div>
-      <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
-        <h3 className="font-medium text-lg mb-2">Evaluator</h3>
-        <div className="text-sm text-gray-600 dark:text-gray-400">
-          Assess content quality using customizable metrics
-        </div>
-      </div>
-      <div className="border border-gray-200 dark:border-gray-800 rounded-lg p-4">
-        <h3 className="font-medium text-lg mb-2">Router</h3>
-        <div className="text-sm text-gray-600 dark:text-gray-400">
-          Intelligently direct workflow execution
-        </div>
-      </div>
-    </div>
-  </Tab>
-  <Tab>
-    <Cards>
-      <Card
-        title="Agent"
-        href="/docs/blocks/agent"
-        description="Create powerful AI agents using any LLM provider with customizable system prompts and tool integrations."
-        icon="🤖"
-      />
-      <Card
-        title="API"
-        href="/docs/blocks/api"
-        description="Connect to any external API with support for all standard HTTP methods and customizable request parameters."
-        icon="🔌"
-      />
-      <Card
-        title="Condition"
-        href="/docs/blocks/condition"
-        description="Add a condition to the workflow to branch the execution path based on a boolean expression."
-        icon="🔀"
-      />
-      <Card
-        title="Function"
-        href="/docs/blocks/function"
-        description="Execute custom JavaScript or TypeScript code within your workflow to transform data or implement complex logic."
-        icon="⚙️"
-      />
-      <Card
-        title="Evaluator"
-        href="/docs/blocks/evaluator"
-        description="Assess content quality using customizable evaluation metrics and scoring criteria."
-        icon="📊"
-      />
-      <Card
-        title="Router"
-        href="/docs/blocks/router"
-        description="Intelligently direct workflow execution to different paths based on input analysis."
-        icon="🔄"
-      />
-    </Cards>
-  </Tab>
-</Tabs>
+<BlockTypes />
 
 ## Block Connections
 

docs/content/docs/connections/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Connections
+description: Connect your blocks to one another.
+---
+

docs/content/docs/execution/index.mdx

@@ -0,0 +1,5 @@
+---
+title: Execution
+description: The execution of a workflow.
+---
+

docs/content/docs/getting-started/index.mdx

@@ -6,7 +6,9 @@ description: Build, test, and optimize your agentic workflows
 import { Card, Cards } from 'fumadocs-ui/components/card'
 import { Steps, Step } from 'fumadocs-ui/components/steps'
 import { Callout } from 'fumadocs-ui/components/callout'
+import { Files, Folder, File } from 'fumadocs-ui/components/files'
 import { Tabs, Tab } from 'fumadocs-ui/components/tabs'
+import { AgentIcon, ApiIcon, ConditionalIcon, CodeIcon, ChartBarIcon, ConnectIcon, GmailIcon, PerplexityIcon, NotionIcon, ExaAIIcon, FirecrawlIcon, SlackIcon } from '@/components/icons'
 
 Sim Studio is a powerful, user-friendly platform for building, testing, and optimizing your agentic workflows. This documentation will help you understand how to use the various components of Sim Studio to create sophisticated agent-based applications.
 
@@ -14,24 +16,35 @@ Sim Studio is a powerful, user-friendly platform for building, testing, and opti
   This guide will walk you through the essential concepts and help you get started building your first workflow.
 </Callout>
 
-## Core Concepts
+## Core Components
 
-Sim Studio is built around two fundamental concepts:
+Sim Studio is built around two primary components:
 
-<Cards>
-  <Card 
-    title="Blocks" 
-    href="/docs/blocks"
-    description="The building blocks of your workflows - Agent, Router, Evaluator, Condition, Function, and API blocks that can be connected together."
-    icon="🧩"
-  />
-  <Card 
-    title="Tools" 
-    href="/docs/tools"
-    description="Specialized functionality that can be used standalone or integrated within blocks to extend capabilities."
-    icon="🔧"
-  />
-</Cards>
+### Blocks
+
+Blocks are the fundamental building elements of your workflows. Each block serves a specific purpose:
+
+<Files>
+  <File name="Agent Block" icon={<AgentIcon className="w-4 h-4" />} annotation="Create AI agents using any LLM provider" />
+  <File name="API Block" icon={<ApiIcon className="w-4 h-4" />} annotation="Connect to external services and APIs" />
+  <File name="Condition Block" icon={<ConditionalIcon className="w-4 h-4" />} annotation="Add conditional branching to your workflows" />
+  <File name="Function Block" icon={<CodeIcon className="w-4 h-4" />} annotation="Execute custom JavaScript/TypeScript code" />
+  <File name="Evaluator Block" icon={<ChartBarIcon className="w-4 h-4" />} annotation="Assess responses against defined criteria" />
+  <File name="Router Block" icon={<ConnectIcon className="w-4 h-4" />} annotation="Direct workflow execution based on input analysis" />
+</Files>
+
+### Tools
+
+Tools extend the capabilities of agents. They provide additional functionality for agents by enabling you to interface with your favorite data sources and take action (e.g posting on X, sending an email)
+
+<Files>
+  <File name="Gmail Tool" icon={<GmailIcon className="w-4 h-4" />} />
+  <File name="Firecrawl Tool" icon={<FirecrawlIcon className="w-4 h-4" />} />
+  <File name="Perplexity Tool" icon={<PerplexityIcon className="w-4 h-4" />} />
+  <File name="Notion Tool" icon={<NotionIcon className="w-4 h-4" />} />
+  <File name="Exa AI Tool" icon={<ExaAIIcon className="w-4 h-4" />} />
+  <File name="Slack Tool" icon={<SlackIcon className="w-4 h-4" />} />
+</Files>
 
 ## Getting Started
 
@@ -51,57 +64,4 @@ Sim Studio is built around two fundamental concepts:
   <Step title="Test your workflow">
     Run your workflow with test inputs to verify its behavior.
   </Step>
-</Steps>
-
-## Explore Blocks
-
-<Tabs items={['Agent Blocks', 'Logic Blocks', 'Integration Blocks']}>
-  <Tab>
-    <Cards>
-      <Card 
-        title="Agent" 
-        href="/docs/blocks/agent"
-        description="Create AI agents that can process inputs and generate outputs based on instructions."
-        icon="🤖"
-      />
-      <Card 
-        title="Evaluator Block" 
-        href="/docs/blocks/evaluator"
-        description="Evaluate agent responses against specific criteria."
-        icon="📊"
-      />
-    </Cards>
-  </Tab>
-  <Tab>
-    <Cards>
-      <Card 
-        title="Router Block" 
-        href="/docs/blocks/router"
-        description="Route workflow execution based on specific conditions."
-        icon="🔄"
-      />
-      <Card 
-        title="Condition Block" 
-        href="/docs/blocks/condition"
-        description="Create conditional logic to control workflow execution paths."
-        icon="🔀"
-      />
-    </Cards>
-  </Tab>
-  <Tab>
-    <Cards>
-      <Card 
-        title="Function Block" 
-        href="/docs/blocks/function"
-        description="Execute custom JavaScript/TypeScript functions."
-        icon="⚙️"
-      />
-      <Card 
-        title="API Block" 
-        href="/docs/blocks/api"
-        description="Make API calls to external services."
-        icon="🔌"
-      />
-    </Cards>
-  </Tab>
-</Tabs>
+</Steps>

docs/content/docs/introduction/index.mdx

@@ -1,87 +1,24 @@
 ---
 title: Introduction
-description: A powerful platform for building, testing, and optimizing agentic workflows
+description: Introduction to Sim Studio
 ---
 
 import { Card, Cards } from 'fumadocs-ui/components/card'
 import { Files, Folder, File } from 'fumadocs-ui/components/files'
-import { Callout } from 'fumadocs-ui/components/callout'
+import { Features } from '@/components/ui/features'
 
 Sim Studio is a powerful platform for building, testing, and optimizing agentic workflows. It provides developers with intuitive tools to design sophisticated agent-based applications through a visual interface. Whether you're prototyping a simple AI assistant or building complex multi-agent systems, Sim Studio offers the flexibility and performance needed for modern AI applications.
 
 ## Why Sim Studio?
 
-<Callout>
-  Building agentic applications has traditionally required extensive coding and integration work. Developers often find themselves spending more time on infrastructure and plumbing rather than focusing on the core AI logic. Sim Studio changes this by providing a comprehensive visual workflow editor that handles the complexity while keeping you in control of what matters.
-</Callout>
+Building agentic applications has traditionally required extensive coding and integration work. Developers often find themselves spending more time on infrastructure and plumbing rather than focusing on the core AI logic. Sim Studio changes this by providing a comprehensive visual workflow editor that handles the complexity while keeping you in control of what matters.
 
 ## Features
 
 Sim Studio provides a wide range of features designed to accelerate your development process:
 
-<Cards>
-  <Card
-    title="Visual Workflow Editor"
-    description="Build complex workflows using a drag-and-drop interface with real-time previews"
-    icon="📊"
-  />
-  <Card
-    title="Modular Building Blocks"
-    description="Compose workflows using pre-built blocks for agents, APIs, functions, and more"
-    icon="🧩"
-  />
-  <Card
-    title="Multiple LLM Support"
-    description="Connect to various LLM providers and models with built-in optimization"
-    icon="🤖"
-  />
-  <Card
-    title="Testing & Debugging"
-    description="Test workflows with simulated inputs and debug with detailed execution logs"
-    icon="🔍"
-  />
-  <Card
-    title="Conditional Logic"
-    description="Create sophisticated decision trees using conditional branching and routing"
-    icon="🔀"
-  />
-  <Card
-    title="API Integrations"
-    description="Connect to external services with customizable API blocks and tools"
-    icon="🔌"
-  />
-</Cards>
+<Features />
 
-## Core Components
-
-Sim Studio is built around two primary components:
-
-### Blocks
-
-Blocks are the fundamental building elements of your workflows. Each block serves a specific purpose:
-
-<Files>
-  <Folder name="Blocks" defaultOpen>
-    <File name="Agent Block" annotation="Create AI agents using any LLM provider" />
-    <File name="API Block" annotation="Connect to external services and APIs" />
-    <File name="Condition Block" annotation="Add conditional branching to your workflows" />
-    <File name="Function Block" annotation="Execute custom JavaScript/TypeScript code" />
-    <File name="Evaluator Block" annotation="Assess responses against defined criteria" />
-    <File name="Router Block" annotation="Direct workflow execution based on input analysis" />
-  </Folder>
-</Files>
-
-### Tools
-
-Tools extend the capabilities of blocks by providing specialized functionality:
-
-<Files>
-  <Folder name="Tools" defaultOpen>
-    <File name="Data Transformation" annotation="Process and transform data between blocks" />
-    <File name="Configuration Management" annotation="Handle environment variables and secrets" />
-    <File name="Testing Suite" annotation="Validate workflow behavior with test scenarios" />
-    <File name="Logging & Monitoring" annotation="Track execution and performance metrics" />
-  </Folder>
-</Files>
+## 
 
 Ready to get started? Check out our [Getting Started](/docs/getting-started) guide or explore our [Blocks](/docs/blocks) and [Tools](/docs/tools) in more detail. 

docs/content/docs/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "Sim Studio Documentation",
-  "pages": ["introduction", "getting-started", "blocks", "tools"]
+  "pages": ["introduction", "getting-started", "blocks", "tools", "connections", "execution"]
 }

docs/lib/utils.ts

@@ -0,0 +1,9 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+/**
+ * Combines multiple class names into a single string, merging Tailwind classes properly
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

docs/next.config.mjs

@@ -1,10 +0,0 @@
-import { createMDX } from 'fumadocs-mdx/next';
-
-const withMDX = createMDX();
-
-/** @type {import('next').NextConfig} */
-const config = {
-  reactStrictMode: true,
-};
-
-export default withMDX(config);

docs/next.config.ts

@@ -0,0 +1,19 @@
+import { createMDX } from 'fumadocs-mdx/next'
+
+const withMDX = createMDX()
+
+/** @type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+  async redirects() {
+    return [
+      {
+        source: '/docs',
+        destination: '/docs/introduction',
+        permanent: true,
+      },
+    ]
+  },
+}
+
+export default withMDX(config)

docs/package-lock.json

@@ -10,7 +10,9 @@
       "hasInstallScript": true,
       "dependencies": {
         "@sim/blocks": "file:../packages/blocks",
+        "@tabler/icons-react": "^3.31.0",
         "@vercel/og": "^0.6.5",
+        "clsx": "^2.1.1",
         "fumadocs-core": "15.0.16",
         "fumadocs-mdx": "11.5.6",
         "fumadocs-ui": "^15.0.16",
@@ -18,7 +20,8 @@
         "next": "15.2.1",
         "next-themes": "^0.4.6",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "tailwind-merge": "^3.0.2"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.0.12",
@@ -1941,6 +1944,32 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.31.0.tgz",
+      "integrity": "sha512-dblAdeKY3+GA1U+Q9eziZ0ooVlZMHsE8dqP0RkwvRtEsAULoKOYaCUOcJ4oW1DjWegdxk++UAt2SlQVnmeHv+g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.31.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.31.0.tgz",
+      "integrity": "sha512-2rrCM5y/VnaVKnORpDdAua9SEGuJKVqPtWxeQ/vUVsgaUx30LDgBZph7/lterXxDY1IKR6NO//HDhWiifXTi3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.31.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.0.13",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.13.tgz",

docs/package.json

@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "@sim/blocks": "file:../packages/blocks",
+    "@tabler/icons-react": "^3.31.0",
     "@vercel/og": "^0.6.5",
+    "clsx": "^2.1.1",
     "fumadocs-core": "15.0.16",
     "fumadocs-mdx": "11.5.6",
     "fumadocs-ui": "^15.0.16",
@@ -18,7 +20,8 @@
     "next": "15.2.1",
     "next-themes": "^0.4.6",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.0.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.0.12",

docs/tsconfig.json

@@ -25,6 +25,13 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "content/docs/execution/index.mdx",
+    "content/docs/connections/index.mdx"
+  ],
   "exclude": ["node_modules"]
 }