import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { H as c, C as s, a as o, T as r, y as n, c as d } from "../index-sdOMz8GW.js";
import { BookOpen as a, Wrench as l } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const u = [
  {
    uri: "tucu://catalog",
    description: "Complete component catalog with categories, variants, and prop types"
  },
  {
    uri: "tucu://tokens",
    description: "Design tokens: colors, spacing, typography, shadows, border-radius"
  },
  {
    uri: "tucu://forms",
    description: "Form system guide: validation patterns, field types, react-hook-form integration"
  },
  {
    uri: "tucu://routing",
    description: "Routing patterns for standalone and micro-frontend architectures"
  },
  {
    uri: "tucu://layouts",
    description: "Layout system: MainLayout, sidebar, top-nav, full-width configurations"
  },
  {
    uri: "tucu://theme",
    description: "Theming guide: color presets, dark/light mode, useTheme hook, Zustand store"
  },
  {
    uri: "tucu://charts",
    description: "Recharts integration: chart types, theming, responsive patterns"
  },
  {
    uri: "tucu://icons",
    description: "Icon catalog: full Lucide icon set with search and usage examples"
  },
  {
    uri: "tucu://migration",
    description: "Migration guide: upgrading from previous versions, breaking changes"
  },
  {
    uri: "tucu://best-practices",
    description: "Best practices: accessibility, performance, TypeScript patterns"
  },
  { uri: "tucu://changelog", description: "Version history and release notes" },
  {
    uri: "tucu://quickstart",
    description: "Quick start guide: installation, first component, basic setup"
  }
], b = () => /* @__PURE__ */ t("div", { className: "flex flex-col gap-8", children: [
  /* @__PURE__ */ e(
    c,
    {
      title: "Resources",
      description: "12 static knowledge resources that agents can read for comprehensive context about the library.",
      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(a, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
    }
  ),
  /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(o, { title: "Available Resources", children: [
    /* @__PURE__ */ e(r, { className: "text-sm text-foreground/70 mb-4", children: "Resources provide static, pre-compiled knowledge that agents can read at any time. Unlike tools, they don't execute code — they deliver structured documentation." }),
    /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e(
      n,
      {
        columns: [
          {
            key: "uri",
            label: "URI",
            render: (i) => /* @__PURE__ */ e("code", { className: "px-2 py-1 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded text-xs font-mono whitespace-nowrap", children: String(i) })
          },
          { key: "description", label: "Description" }
        ],
        data: u
      }
    ) })
  ] }) }),
  /* @__PURE__ */ e(s, { children: /* @__PURE__ */ t(o, { title: "How Agents Use Resources", children: [
    /* @__PURE__ */ e(r, { className: "text-sm text-foreground/70 mb-3", children: "When an agent needs context about the library, it reads the relevant resource URI. This is automatic — no user action required:" }),
    /* @__PURE__ */ e(
      d,
      {
        code: `// Agent internally reads resources before generating code:

// 1. Read catalog to know available components
GET tucu://catalog
→ Returns: 95+ components with categories and prop summaries

// 2. Read tokens to use correct design values
GET tucu://tokens
→ Returns: color scales, spacing (4px base), typography, shadows

// 3. Read forms to generate correct form patterns
GET tucu://forms
→ Returns: Zod patterns, field types, validation rules`
      }
    )
  ] }) }),
  /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(o, { title: "Resource vs Tool", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mt-2", children: [
    /* @__PURE__ */ t("div", { className: "p-4 rounded-lg border border-emerald-500/20 bg-emerald-500/5", children: [
      /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
        /* @__PURE__ */ e(a, { className: "w-4 h-4 text-emerald-500" }),
        /* @__PURE__ */ e(r, { className: "text-sm font-medium", children: "Resources" })
      ] }),
      /* @__PURE__ */ e(r, { className: "text-xs text-foreground/60", children: "Static knowledge. Read-only. Always available. No parameters needed. Provides broad context for the agent to work from." })
    ] }),
    /* @__PURE__ */ t("div", { className: "p-4 rounded-lg border border-blue-500/20 bg-blue-500/5", children: [
      /* @__PURE__ */ t("div", { className: "flex items-center gap-2 mb-2", children: [
        /* @__PURE__ */ e(l, { className: "w-4 h-4 text-blue-500" }),
        /* @__PURE__ */ e(r, { className: "text-sm font-medium", children: "Tools" })
      ] }),
      /* @__PURE__ */ e(r, { className: "text-xs text-foreground/60", children: "Dynamic execution. Takes parameters. Generates code, searches, inspects. Returns computed results specific to the request." })
    ] })
  ] }) }) })
] });
export {
  b as default
};
