@refineui/mcp 0.1.0

package/lib/chunk-BIQ6ODHB.js

@@ -0,0 +1,1522 @@
+// src/generated/docs-index.json
+var docs_index_default = {
+  generatedAt: "2026-09-08T10:52:35.848Z",
+  llmIndex: '# RefineUI Design System & Component Library\n\n> RefineUI is Pelagornis\'s unified design system. Foundation variables ship as `@refineui/tokens`; UI ships as `@refineui/react`. Docs render real components \u2014 not mockups.\n\n## Installation & Setup\n\n```bash\nbun add @refineui/react @refineui/tokens\n# or\nnpm install @refineui/react @refineui/tokens\n```\n\nStylesheet (app root):\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nOr in JS:\n\n```tsx\nimport "@refineui/react/refineui.css";\n```\n\n## Packages\n\n- `@refineui/react` \u2014 Accessible React components (Tailwind + design tokens)\n- `@refineui/tokens` \u2014 Color, typography, spacing, sizing, radius, elevation, motion, z-index\n- `@refineui/utilities` \u2014 Helpers and layout algorithms\n- `@refineui/web-icons` \u2014 RefineUI System Icons font (used by `WebIcon`)\n- `@refineui/mcp` \u2014 MCP server for docs search, component pages, and design rules\n\n## Guides\n\n- [Getting started](https://ui.pelagornis.com/getting-started/): Architecture, install, stylesheet, first example\n\n## AI & Tools\n\n- [Overview](https://ui.pelagornis.com/ai-tools/): LLM indexes, Skill, Doctor, and MCP\n- [Skill](https://ui.pelagornis.com/ai-tools/skill/): `refineui` agent skill for doc routing and codegen rules\n- [Doctor](https://ui.pelagornis.com/ai-tools/doctor/): Read-only workspace diagnostics\n- [MCP](https://ui.pelagornis.com/ai-tools/mcp/): `@refineui/mcp` documentation server\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md): Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt): Curated link index (llmstxt.org)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt): Expanded plain-text reference\n\n## Foundations\n\n- [Overview](https://ui.pelagornis.com/foundations/): Visual language and token model\n- [Design tokens](https://ui.pelagornis.com/foundations/design-tokens/): Semantic token introduction\n- [Color](https://ui.pelagornis.com/foundations/color/): Palette and alias colors\n- [Typography](https://ui.pelagornis.com/foundations/typography/): Type scale and roles\n- [Spacing](https://ui.pelagornis.com/foundations/spacing/): Padding and gap scale\n- [Sizing](https://ui.pelagornis.com/foundations/sizing/): Dimension tokens\n- [Radius](https://ui.pelagornis.com/foundations/radius/): Corner radius\n- [Border](https://ui.pelagornis.com/foundations/border/): Stroke widths and borders\n- [Elevation](https://ui.pelagornis.com/foundations/elevation/): Shadows and depth\n- [Opacity](https://ui.pelagornis.com/foundations/opacity/): Opacity and overlays\n- [Motion](https://ui.pelagornis.com/foundations/motion/): Duration, easing, distance\n- [Z-index](https://ui.pelagornis.com/foundations/z-index/): Layering scale\n- [Layout](https://ui.pelagornis.com/foundations/layout/): Container, grid, alignment, responsive layout\n- [Iconography](https://github.com/pelagornis/refineui-system-icons): System icons (external repo)\n\n## Components\n\nAlphabetical catalog \u2014 full docs at [/components/](https://ui.pelagornis.com/components/).\n\n- [Accordion](https://ui.pelagornis.com/components/accordion/)\n- [Alert](https://ui.pelagornis.com/components/alert/)\n- [Avatar](https://ui.pelagornis.com/components/avatar/)\n- [Avatars](https://ui.pelagornis.com/components/avatars/)\n- [Badge](https://ui.pelagornis.com/components/badge/)\n- [Box](https://ui.pelagornis.com/components/box/)\n- [Breadcrumb](https://ui.pelagornis.com/components/breadcrumb/)\n- [Bubble](https://ui.pelagornis.com/components/bubble/)\n- [Button](https://ui.pelagornis.com/components/button/)\n- [Button Group](https://ui.pelagornis.com/components/button-group/)\n- [Calendar](https://ui.pelagornis.com/components/calendar/)\n- [Card](https://ui.pelagornis.com/components/card/)\n- [Carousel](https://ui.pelagornis.com/components/carousel/)\n- [Chart](https://ui.pelagornis.com/components/chart/)\n- [Checkbox](https://ui.pelagornis.com/components/checkbox/)\n- [Command](https://ui.pelagornis.com/components/command/): Command palette with search and keyboard navigation\n- [Container](https://ui.pelagornis.com/components/container/)\n- [Dialog](https://ui.pelagornis.com/components/dialog/)\n- [Divider](https://ui.pelagornis.com/components/divider/)\n- [Drawer](https://ui.pelagornis.com/components/drawer/)\n- [Dropdown](https://ui.pelagornis.com/components/dropdown/)\n- [Field](https://ui.pelagornis.com/components/field/)\n- [Footer](https://ui.pelagornis.com/components/footer/)\n- [Grid](https://ui.pelagornis.com/components/grid/)\n- [Input](https://ui.pelagornis.com/components/input/)\n- [Input OTP](https://ui.pelagornis.com/components/input-otp/)\n- [Label](https://ui.pelagornis.com/components/label/)\n- [Link](https://ui.pelagornis.com/components/link/)\n- [Menu](https://ui.pelagornis.com/components/menu/)\n- [Navigation Menu](https://ui.pelagornis.com/components/navigation-menu/)\n- [Pagination](https://ui.pelagornis.com/components/pagination/)\n- [Popover](https://ui.pelagornis.com/components/popover/)\n- [Progress](https://ui.pelagornis.com/components/progress/)\n- [Progress Stepper](https://ui.pelagornis.com/components/progress-stepper/)\n- [Radio](https://ui.pelagornis.com/components/radio/)\n- [Resizable](https://ui.pelagornis.com/components/resizable/)\n- [Scroll Area](https://ui.pelagornis.com/components/scroll-area/)\n- [Search Field](https://ui.pelagornis.com/components/search-field/)\n- [Segmented Control](https://ui.pelagornis.com/components/segmented-control/)\n- [Select](https://ui.pelagornis.com/components/select/)\n- [Sidebar](https://ui.pelagornis.com/components/sidebar/)\n- [Skeleton](https://ui.pelagornis.com/components/skeleton/)\n- [Slider](https://ui.pelagornis.com/components/slider/)\n- [Spin Button](https://ui.pelagornis.com/components/spin-button/)\n- [Spinner](https://ui.pelagornis.com/components/spinner/)\n- [Stack](https://ui.pelagornis.com/components/stack/)\n- [Stepper](https://ui.pelagornis.com/components/stepper/)\n- [Switch](https://ui.pelagornis.com/components/switch/)\n- [Table](https://ui.pelagornis.com/components/table/)\n- [Tabs](https://ui.pelagornis.com/components/tabs/)\n- [Tag](https://ui.pelagornis.com/components/tag/)\n- [Textarea](https://ui.pelagornis.com/components/textarea/)\n- [Toast](https://ui.pelagornis.com/components/toast/)\n- [Toggle Button](https://ui.pelagornis.com/components/toggle-button/)\n- [Tooltip](https://ui.pelagornis.com/components/tooltip/)\n- [Tree](https://ui.pelagornis.com/components/tree/)\n\n## Development\n\n- [Overview](https://ui.pelagornis.com/development/): Build with RefineUI in product code\n- [Installation](https://ui.pelagornis.com/development/installation/): Packages, Tailwind, and project setup\n- [Theming](https://ui.pelagornis.com/development/theming/): Light/dark and semantic aliases\n- [Motion](https://ui.pelagornis.com/development/motion/): Motion roles in components\n\n## AI & machine-readable docs\n\n- [/DESIGN.md](https://ui.pelagornis.com/DESIGN.md) \u2014 Stitch-compatible design identity for AI agents\n- [/llms.txt](https://ui.pelagornis.com/llms.txt) \u2014 Curated link index (llmstxt.org format)\n- [/llm.txt](https://ui.pelagornis.com/llm.txt) \u2014 Expanded reference for LLM context windows\n- [AI & Tools](https://ui.pelagornis.com/ai-tools/) \u2014 Overview, DESIGN.md, llms.txt, Skill, Doctor, MCP\n- `@refineui/mcp` \u2014 MCP server (`search_docs`, `get_doc_page`, `get_design_rules`, \u2026)\n- [GitHub](https://github.com/pelagornis/refineui) \u2014 Source and issues\n\n## Usage notes for LLMs\n\n- Import components from `@refineui/react` only; do not invent parallel APIs\n- Use design tokens (`bg-refineui-alias-*`, `text-refineui-alias-*`, spacing/radius utilities) \u2014 no arbitrary px or hex in component styles\n- Match Web Kit component scope; do not add variants or convenience props not in Figma Web Kit\n- Prefer composition (`Field` + `Input`, `Command` + `CommandDialog`, `Sidebar` + `SidebarLink`) over raw HTML for forms, navigation, and feedback\n',
+  designMd: '---\nversion: alpha\nname: RefineUI\ndescription: >-\n  Pelagornis design system for product UI. YAML values are light-theme identity\n  snapshots for Stitch and coding agents. Authoritative tokens live in\n  @refineui/tokens; shipped UI lives in @refineui/react. Prefer semantic aliases\n  and components over copying these hex values into product code.\ncolors:\n  primary: "#212121"\n  on-primary: "#FFFFFF"\n  secondary: "#6C6C6C"\n  tertiary: "#7694FF"\n  neutral: "#FFFFFF"\n  surface: "#FFFFFF"\n  surface-sunken: "#F0F0F0"\n  foreground: "#212121"\n  foreground-secondary: "#6C6C6C"\n  border: "#DBDBDB"\n  error: "#FF6969"\n  success: "#26B12D"\n  warning: "#F1B500"\n  discovery: "#BD7BFF"\n  inverse: "#000000"\ntypography:\n  display-lg:\n    fontFamily: Inter\n    fontSize: 64px\n    fontWeight: 800\n    lineHeight: 86px\n  heading-md:\n    fontFamily: Inter\n    fontSize: 40px\n    fontWeight: 700\n    lineHeight: 60px\n  title-md:\n    fontFamily: Inter\n    fontSize: 28px\n    fontWeight: 600\n    lineHeight: 36px\n  subtitle-md:\n    fontFamily: Inter\n    fontSize: 16px\n    fontWeight: 600\n    lineHeight: 24px\n  body-md:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 20px\n  body-sm:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 400\n    lineHeight: 20px\n  caption-md:\n    fontFamily: Inter\n    fontSize: 12px\n    fontWeight: 400\n    lineHeight: 16px\n  label-md:\n    fontFamily: Inter\n    fontSize: 14px\n    fontWeight: 500\n    lineHeight: 20px\nrounded:\n  xs: 2px\n  sm: 4px\n  md: 6px\n  lg: 8px\n  xl: 12px\n  "2xl": 16px\n  full: 9999px\nspacing:\n  none: 0px\n  xxxs: 2px\n  xxs: 4px\n  xs: 6px\n  sm: 8px\n  md: 10px\n  lg: 16px\n  xl: 20px\n  "2xl": 24px\n  "3xl": 32px\ncomponents:\n  button-primary:\n    backgroundColor: "{colors.primary}"\n    textColor: "{colors.on-primary}"\n    rounded: "{rounded.lg}"\n    padding: 10px\n  button-secondary:\n    backgroundColor: "{colors.surface}"\n    textColor: "{colors.foreground}"\n    rounded: "{rounded.lg}"\n    padding: 10px\n  surface-card:\n    backgroundColor: "{colors.surface}"\n    textColor: "{colors.foreground}"\n    rounded: "{rounded.xl}"\n    padding: 16px\n---\n\n# RefineUI\n\nHow agents should use this file: treat YAML as the **visual identity snapshot** (Stitch / UI generation). For product code, prefer `@refineui/react` components and `@refineui/tokens` semantic aliases \u2014 do not hardcode these hex/px values. Full page index: https://ui.pelagornis.com/llm.txt \xB7 Live site: https://ui.pelagornis.com\n\n## Overview\n\nRefineUI is Pelagornis\u2019s unified design system: Foundation variables become `@refineui/tokens`; the Web Kit ships as `@refineui/react`. Docs render real package output, not mockups.\n\nThe system feels **precise, neutral, and product-first** \u2014 high-contrast ink on clean surfaces, restrained radius, and semantic color roles (brand, status, discovery) rather than decorative gradients. Light and dark resolve through `[data-theme]` semantic aliases; agents generating screens should assume light tokens unless the task asks for dark.\n\nArchitecture (do not skip layers):\n\n```\nFoundation \u2192 Semantic \u2192 Theme/Context \u2192 Component tokens \u2192 Recipe \u2192 Component \u2192 State/Interaction\n```\n\n## Colors\n\nPalette roles map to semantic aliases (`backgroundBrand`, `foregroundPrimary`, `borderDefault`, \u2026). Light-theme identity values are in the YAML front matter.\n\n- **Primary (#212121):** Brand ink \u2014 primary actions, strong emphasis, brand fills (`backgroundBrand` / `foregroundBrand`).\n- **On-primary (#FFFFFF):** Text and icons on brand fills (`foregroundOnBrand`).\n- **Secondary (#6C6C6C):** Supporting copy and quieter chrome (`foregroundSecondary`).\n- **Tertiary (#7694FF):** Info and links \u2014 not a second brand (`foregroundLink`, `backgroundInfo`).\n- **Neutral / surface (#FFFFFF):** Page and card canvases (`backgroundPrimary`, `backgroundSurface`).\n- **Surface-sunken:** Recessed wells (`surfaceSunken`).\n- **Border (#DBDBDB):** Default dividers and control outlines (`borderDefault`).\n- **Error / success / warning / discovery:** Status and accent roles only \u2014 never as generic decoration.\n\nDark theme flips the same semantic names via CSS variables; do not invent a second hex palette in product CSS.\n\n## Typography\n\nSingle family **Inter** for UI. Prefer semantic text roles (`displayLg`, `headingMd`, `titleMd`, `bodyMd`, `captionMd`, \u2026) over raw Foundation keys.\n\n- **Display / heading:** Heavy\u2013bold for marketing and page titles.\n- **Title / subtitle:** Semibold for component and section headers.\n- **Body:** Medium or regular at 14px for primary reading and controls.\n- **Caption / label:** 12\u201314px for metadata, helpers, and form labels.\n\n## Layout\n\nSpacing uses the RefineUI T-shirt scale (`sizeNone` \u2026 `sizeXXXLarge`: 0\u201332px). Prefer token utilities (`gap-refineui-*`, Box/Stack `gap`) over arbitrary Tailwind spacing.\n\nLayout primitives: `Box`, `Stack`, `Grid`, `Container`. Prefer **logical** insets (`ps`/`pe`/`ms`/`me`, `text-start`) for RTL. Spec `layout.direction=logical` is the contract \u2014 avoid physical `left`/`right` unless intentional (documented in component Spec).\n\n## Elevation & Depth\n\nElevation steps are semantic shadows (`shadow2` \u2026 `shadow64`) with separate light/dark recipes. Use the lowest step that establishes hierarchy; do not stack multi-layer custom box-shadows. Overlays use `surfaceOverlay` scrims, not ad-hoc rgba.\n\n## Shapes\n\nRadius scale: `roundedXSmall` (2px) through `roundedXXLarge` (16px), plus `roundedCircle`. Default interactive controls land around **large (8px)**; cards and panels often **x-large (12px)**. Prefer token radii over arbitrary `rounded-*` values.\n\n## Components\n\nCompose from `@refineui/react` \u2014 no convenience props (`title`, `description`, `items`, `actions`, `onClose`). Match sibling component patterns before inventing APIs.\n\nDOM / state contract:\n\n- `data-refineui` \u2014 component identity\n- `data-variant` / `data-size` \u2014 visual options\n- `data-state` \u2014 open, selected, loading, \u2026\n- Hover / `:focus-visible` / disabled \u2014 `refineui.css` (do not reimplement with `:focus` alone)\n\nImport only from `@refineui/react`. Stylesheet at app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nDeep lookup: catalog at https://ui.pelagornis.com/components/ \xB7 MCP tools `get_component_spec`, `get_component_recipe`, `inspect_token`.\n\n## Do\'s and Don\'ts\n\n**Do**\n\n- Use design tokens for color, spacing, radius, stroke, typography, shadow, z-index, and motion.\n- Follow composable subcomponent APIs and existing `packages/react` patterns.\n- Honor `:focus-visible`, `prefers-reduced-motion`, and forced-colors contracts from Spec / Doctor.\n- Start from https://ui.pelagornis.com/llm.txt (or `@refineui/mcp`) before inventing APIs.\n\n**Don\'t**\n\n- Hardcode hex, rgba, or arbitrary px in component styles.\n- Reference Foundation literals from component tokens \u2014 use semantic / `componentSizes`.\n- Invent variants, props, or dimensions not reflected in tokens + docs.\n- Duplicate this file\u2019s token tables into agent skills \u2014 link here instead.\n',
+  pages: [
+    {
+      slug: "ai-tools/doctor",
+      href: "/ai-tools/doctor/",
+      title: "Doctor",
+      description: "Read-only RefineUI workspace diagnostics \u2014 setup, tokens, composition contracts, and import conventions.",
+      category: "ai-tools",
+      content: '**RefineUI Doctor** inspects projects that use `@refineui/*` and reports setup gaps, token contract violations, and component API misuse \u2014 without modifying your code.\n\n## What it checks\n\n| Rule | Category | Description |\n|------|----------|-------------|\n| `package-setup` | setup | App projects declare `@refineui/react` and `@refineui/tokens` |\n| `stylesheet-setup` | setup | Global CSS imports tokens, icons, and `refineui.css` |\n| `foundation-contract` | foundations | No hardcoded hex/rgba or arbitrary px in component styles |\n| `composition-api` | components | No convenience props (`title`, `description`, \u2026) on RefineUI components |\n| `component-imports` | components | Import from `@refineui/react` root only |\n\nDiagnostics are **read-only**. Doctor writes a YAML report; it does not install packages or edit files unless you ask an agent to fix findings separately.\n\n## Install\n\n<DoctorInstall />\n\n## CLI\n\n```bash\nrefineui-doctor\nrefineui-doctor ./apps/web\nrefineui-doctor --workspace packages/my-app --output ./doctor-report.yaml\nrefineui-doctor --category setup --category foundations\n```\n\nExit code `1` when error-severity findings exist.\n\n## Skill workflow\n\nInstall the RefineUI skill, then ask in natural language:\n\n```\nRefineUI \uC798 \uC4F0\uACE0 \uC788\uB098 \uBD10\uC918\n\uC14B\uC5C5\uB9CC \uC9C4\uB2E8\uD574\uC918\n\uC774 \uBAA8\uB178\uB808\uD3EC\uC758 RefineUI \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4\uB97C \uC804\uBD80 \uC9C4\uB2E8\uD574\uC918\n```\n\nThe skill loads [doctor rules](https://github.com/pelagornis/refineui/tree/main/skills/refineui/rules) and routes to live docs via [llm.txt](/llm.txt) \u2014 it does not duplicate documentation.\n\n## MCP\n\nWhen `@refineui/mcp` is configured, agents can call **`run_doctor`** with an optional project path and workspace name. The tool returns JSON matching the YAML schema.\n\n## Report format\n\nSchema v2 YAML written to a temp directory or `--output`:\n\n```yaml\nschemaVersion: 2\nmeta:\n  target: /path/to/project\n  projectKinds: [app]\n  refineui:\n    declared:\n      "@refineui/react": "^0.x"\nsummary:\n  error: 0\n  warn: 1\n  info: 0\nchecks: [...]\nfindings: [...]\n```\n\nEach finding includes `remediation` text suitable for agent-guided fixes.\n\n## vs Skill vs MCP\n\n| | Doctor CLI | Skill | MCP `run_doctor` |\n|---|------------|-------|------------------|\n| **Runs locally** | Yes | Agent follows rules | Yes |\n| **Best for** | CI / scripts | Natural language requests | Agent automation |\n| **Output** | YAML file | Conversation + optional YAML | JSON |\n\nUse **Skill** for interactive diagnosis, **CLI** for repeatable checks, **MCP** when the agent should run diagnostics programmatically.',
+      searchText: 'doctor read-only refineui workspace diagnostics \u2014 setup, tokens, composition contracts, and import conventions. \n**refineui doctor** inspects projects that use `@refineui/*` and reports setup gaps, token contract violations, and component api misuse \u2014 without modifying your code.\n\n## what it checks\n\n| rule | category | description |\n|------|----------|-------------|\n| `package-setup` | setup | app projects declare `@refineui/react` and `@refineui/tokens` |\n| `stylesheet-setup` | setup | global css imports tokens, icons, and `refineui.css` |\n| `foundation-contract` | foundations | no hardcoded hex/rgba or arbitrary px in component styles |\n| `composition-api` | components | no convenience props (`title`, `description`, \u2026) on refineui components |\n| `component-imports` | components | import from `@refineui/react` root only |\n\ndiagnostics are **read-only**. doctor writes a yaml report; it does not install packages or edit files unless you ask an agent to fix findings separately.\n\n## install\n\n<doctorinstall />\n\n## cli\n\n```bash\nrefineui-doctor\nrefineui-doctor ./apps/web\nrefineui-doctor --workspace packages/my-app --output ./doctor-report.yaml\nrefineui-doctor --category setup --category foundations\n```\n\nexit code `1` when error-severity findings exist.\n\n## skill workflow\n\ninstall the refineui skill, then ask in natural language:\n\n```\nrefineui \uC798 \uC4F0\uACE0 \uC788\uB098 \uBD10\uC918\n\uC14B\uC5C5\uB9CC \uC9C4\uB2E8\uD574\uC918\n\uC774 \uBAA8\uB178\uB808\uD3EC\uC758 refineui \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4\uB97C \uC804\uBD80 \uC9C4\uB2E8\uD574\uC918\n```\n\nthe skill loads [doctor rules](https://github.com/pelagornis/refineui/tree/main/skills/refineui/rules) and routes to live docs via [llm.txt](/llm.txt) \u2014 it does not duplicate documentation.\n\n## mcp\n\nwhen `@refineui/mcp` is configured, agents can call **`run_doctor`** with an optional project path and workspace name. the tool returns json matching the yaml schema.\n\n## report format\n\nschema v2 yaml written to a temp directory or `--output`:\n\n```yaml\nschemaversion: 2\nmeta:\n  target: /path/to/project\n  projectkinds: [app]\n  refineui:\n    declared:\n      "@refineui/react": "^0.x"\nsummary:\n  error: 0\n  warn: 1\n  info: 0\nchecks: [...]\nfindings: [...]\n```\n\neach finding includes `remediation` text suitable for agent-guided fixes.\n\n## vs skill vs mcp\n\n| | doctor cli | skill | mcp `run_doctor` |\n|---|------------|-------|------------------|\n| **runs locally** | yes | agent follows rules | yes |\n| **best for** | ci / scripts | natural language requests | agent automation |\n| **output** | yaml file | conversation + optional yaml | json |\n\nuse **skill** for interactive diagnosis, **cli** for repeatable checks, **mcp** when the agent should run diagnostics programmatically.\n'
+    },
+    {
+      slug: "ai-tools/index",
+      href: "/ai-tools/index/",
+      title: "AI & Tools",
+      description: "Machine-readable indexes, agent skill, Doctor diagnostics, and MCP server for RefineUI.",
+      category: "ai-tools",
+      content: '<div class="not-content">\n  <AiToolsCatalog client:load />\n</div>',
+      searchText: 'ai & tools machine-readable indexes, agent skill, doctor diagnostics, and mcp server for refineui. \n<div class="not-content">\n  <aitoolscatalog client:load />\n</div>\n'
+    },
+    {
+      slug: "ai-tools/mcp",
+      href: "/ai-tools/mcp/",
+      title: "MCP",
+      description: "Model Context Protocol server \u2014 search RefineUI docs, fetch component pages, and read design rules from AI tools.",
+      category: "ai-tools",
+      content: '**`@refineui/mcp`** is a stdio MCP server for editors and agents that support the Model Context Protocol. It embeds a build-time index of this documentation site so agents can query pages without pasting all of `llm.txt` into context.\n\n## Install\n\n<McpInstall />\n\n## MCP configuration\n\nAdd to your MCP host config (see [mcp.example.json](/mcp.example.json)):\n\n```json\n{\n  "mcpServers": {\n    "refineui": {\n      "command": "bunx",\n      "args": ["@refineui/mcp"]\n    }\n  }\n}\n```\n\nExample for monorepo contributors (after `bun run build:mcp`):\n\n```json\n{\n  "mcpServers": {\n    "refineui": {\n      "command": "node",\n      "args": ["packages/mcp/lib/server.js"]\n    }\n  }\n}\n```\n\n## Tools\n\n| Tool | Purpose |\n|------|---------|\n| `search_docs` | Keyword search across documentation |\n| `get_doc_page` | Fetch a page by slug (`components/button`, \u2026) |\n| `list_components` | All component doc pages |\n| `list_foundations` | Foundation / token doc pages |\n| `get_llm_index` | Full `llm.txt` content |\n| `get_design_rules` | Full `DESIGN.md` (Stitch alpha) |\n| `list_tokens` | Token categories and semantic text roles |\n| `get_index_meta` | Index generation timestamp and page count |\n| `run_doctor` | Read-only workspace diagnostics (setup, tokens, composition) |\n\n## Resources\n\n| URI | Content |\n|-----|---------|\n| `refineui://llm.txt` | Machine-readable docs index |\n| `refineui://DESIGN.md` | Stitch-compatible design identity |\n| `refineui://design-rules` | Alias of `DESIGN.md` |\n\n## vs DESIGN.md vs llms.txt vs Skill\n\n| | DESIGN.md | llms.txt | Skill | MCP |\n|---|-----------|----------|-------|-----|\n| **Format** | Tokens YAML + prose | Static link index | Agent instructions | Live tools + resources |\n| **Best for** | Visual identity / UI generation | Discovery of pages | Routing + rules | Dynamic search & page fetch |\n| **Updates** | Deploy with site | Deploy with site | `skills add` from GitHub | npm package / rebuild index |\n\nUse them together: **DESIGN.md** for look & feel, **Skill** for behavior, **MCP** for lookup, **llms.txt** as the curated index URL.\n\n## Development\n\n```bash\nbun run build:mcp\n```\n\nPackage: [`packages/mcp`](https://github.com/pelagornis/refineui/tree/main/packages/mcp)',
+      searchText: 'mcp model context protocol server \u2014 search refineui docs, fetch component pages, and read design rules from ai tools. \n**`@refineui/mcp`** is a stdio mcp server for editors and agents that support the model context protocol. it embeds a build-time index of this documentation site so agents can query pages without pasting all of `llm.txt` into context.\n\n## install\n\n<mcpinstall />\n\n## mcp configuration\n\nadd to your mcp host config (see [mcp.example.json](/mcp.example.json)):\n\n```json\n{\n  "mcpservers": {\n    "refineui": {\n      "command": "bunx",\n      "args": ["@refineui/mcp"]\n    }\n  }\n}\n```\n\nexample for monorepo contributors (after `bun run build:mcp`):\n\n```json\n{\n  "mcpservers": {\n    "refineui": {\n      "command": "node",\n      "args": ["packages/mcp/lib/server.js"]\n    }\n  }\n}\n```\n\n## tools\n\n| tool | purpose |\n|------|---------|\n| `search_docs` | keyword search across documentation |\n| `get_doc_page` | fetch a page by slug (`components/button`, \u2026) |\n| `list_components` | all component doc pages |\n| `list_foundations` | foundation / token doc pages |\n| `get_llm_index` | full `llm.txt` content |\n| `get_design_rules` | full `design.md` (stitch alpha) |\n| `list_tokens` | token categories and semantic text roles |\n| `get_index_meta` | index generation timestamp and page count |\n| `run_doctor` | read-only workspace diagnostics (setup, tokens, composition) |\n\n## resources\n\n| uri | content |\n|-----|---------|\n| `refineui://llm.txt` | machine-readable docs index |\n| `refineui://design.md` | stitch-compatible design identity |\n| `refineui://design-rules` | alias of `design.md` |\n\n## vs design.md vs llms.txt vs skill\n\n| | design.md | llms.txt | skill | mcp |\n|---|-----------|----------|-------|-----|\n| **format** | tokens yaml + prose | static link index | agent instructions | live tools + resources |\n| **best for** | visual identity / ui generation | discovery of pages | routing + rules | dynamic search & page fetch |\n| **updates** | deploy with site | deploy with site | `skills add` from github | npm package / rebuild index |\n\nuse them together: **design.md** for look & feel, **skill** for behavior, **mcp** for lookup, **llms.txt** as the curated index url.\n\n## development\n\n```bash\nbun run build:mcp\n```\n\npackage: [`packages/mcp`](https://github.com/pelagornis/refineui/tree/main/packages/mcp)\n'
+    },
+    {
+      slug: "ai-tools/skill",
+      href: "/ai-tools/skill/",
+      title: "Skill",
+      description: "RefineUI agent skill \u2014 routes AI assistants to official docs, DESIGN.md, llm.txt, and design rules without duplicating content.",
+      category: "ai-tools",
+      content: 'The **`refineui`** skill teaches AI agents how to work in RefineUI projects: classify requests, read the live doc index, follow token and composition rules, and optionally use `@refineui/mcp`.\n\n## SKILL.md\n\n`SKILL.md` is the skill entry point. Agents read it first on any RefineUI-related task. It does not list components or tokens \u2014 it defines **how** to route to official docs and what constraints apply when writing code.\n\n### Frontmatter\n\n```yaml\n---\nname: refineui\ndescription: RefineUI design-system guide for AI agents\u2026\nuser-invocable: true\nargument-hint: "[question or topic]"\n---\n```\n\n| Field | Purpose |\n|-------|---------|\n| `name` | Skill identifier (`refineui`) |\n| `description` | When hosts should load this skill |\n| `user-invocable` | Users can invoke it directly (e.g. `/refineui`) |\n| `argument-hint` | Optional topic passed with the invocation |\n\n### Sections\n\n| Section | What it tells the agent |\n|---------|-------------------------|\n| **1. Classify the request** | Foundations vs components vs setup vs MCP vs health check \u2014 and whether to read the project first |\n| **2. Documentation routing** | Start from `DESIGN.md` / `llm.txt` / `llms.txt`, open leaf pages on ui.pelagornis.com; use MCP when available |\n| **3. Code-writing contract** | `@refineui/react` imports, composable APIs, tokens-only styling, a11y |\n| **4. Monorepo contributors** | Paths inside this repository (`packages/tokens`, `packages/react`, docs) |\n| **5. MCP** | When and how to use `@refineui/mcp` tools |\n| **6. Doctor** | Read-only diagnostics before suggesting fixes |\n| **7. Response principles** | Cite URLs, separate guidance from edits, no invented APIs |\n\nDeeper detail lives in `references/` and `rules/` \u2014 `SKILL.md` links to them instead of duplicating content.\n\nSource: [skills/refineui/SKILL.md](https://github.com/pelagornis/refineui/blob/main/skills/refineui/SKILL.md)\n\n## What it does\n\n| Layer | Role |\n|-------|------|\n| **Doc routing** | Start from `DESIGN.md` / `llm.txt` / `llms.txt`, open leaf pages on ui.pelagornis.com |\n| **Codegen rules** | Tokens-only styling, composable APIs, no invented props |\n| **Monorepo hints** | Where tokens, components, and docs live in this repository |\n| **MCP pointer** | When to use `@refineui/mcp` tools |\n| **Doctor** | Read-only setup & contract diagnostics |\n\nThe skill does **not** embed component lists or token tables \u2014 those stay in official docs so they never go stale.\n\n## Installation\n\n<SkillInstall />\n\n## File structure\n\n```\nskills/refineui/\n\u251C\u2500\u2500 SKILL.md                      # Entry \u2014 request classification & doc routing\n\u251C\u2500\u2500 references/\n\u2502   \u251C\u2500\u2500 design-rules.md           # Points to canonical DESIGN.md\n\u2502   \u251C\u2500\u2500 doctor.md                 # Doctor workflow & report schema\n\u2502   \u2514\u2500\u2500 mcp.md                    # @refineui/mcp setup & tools\n\u2514\u2500\u2500 rules/                        # Doctor rule definitions (read-only diagnostics)\n    \u251C\u2500\u2500 package-setup.md\n    \u251C\u2500\u2500 stylesheet-setup.md\n    \u251C\u2500\u2500 foundation-contract.md\n    \u251C\u2500\u2500 composition-api.md\n    \u2514\u2500\u2500 component-imports.md\n```\n\n| File | When the agent reads it |\n|------|-------------------------|\n| `SKILL.md` | Any RefineUI-related question \u2014 routes to docs or references |\n| `references/design-rules.md` | Writing or reviewing UI code \u2192 opens `DESIGN.md` |\n| `references/doctor.md` | Health check / "using RefineUI correctly?" requests |\n| `references/mcp.md` | MCP host setup or tool selection |\n| `rules/*.md` | Doctor diagnostics (manual or with `refineui-doctor` CLI) |\n\n## Documentation routing\n\nAgents should **fetch the index on each task**, not rely on memorized slugs:\n\n1. Read `https://ui.pelagornis.com/DESIGN.md` for visual identity\n2. Read `https://ui.pelagornis.com/llms.txt` or `https://ui.pelagornis.com/llm.txt`\n3. Follow links to Foundations, Components, or Development leaf pages\n4. For code generation, combine component docs with [Installation](/development/installation/) and [Theming](/development/theming/)\n\nIf MCP is configured, prefer `search_docs`, `get_doc_page`, and `get_design_rules` from `@refineui/mcp`.\n\n## Request classification\n\n| Request | Action |\n|---------|--------|\n| Token / color / spacing meaning | Foundations docs only |\n| Component API or example | Component doc + optional MCP `get_doc_page` |\n| App setup / CSS import | Development docs + inspect `package.json` |\n| "RefineUI \uC798 \uC4F0\uACE0 \uC788\uB098?" / setup audit | [Doctor](/ai-tools/doctor/) + `references/doctor.md` or MCP `run_doctor` |\n| "List all components" | `llm.txt` or MCP `list_components` |\n\n## Monorepo (this repository)\n\nIn this monorepo, source lives under `packages/tokens`, `packages/react`, and `docs/`. Install the skill in consumer projects; here it is available at `skills/refineui/` for review and `skills add` distribution.',
+      searchText: 'skill refineui agent skill \u2014 routes ai assistants to official docs, design.md, llm.txt, and design rules without duplicating content. \nthe **`refineui`** skill teaches ai agents how to work in refineui projects: classify requests, read the live doc index, follow token and composition rules, and optionally use `@refineui/mcp`.\n\n## skill.md\n\n`skill.md` is the skill entry point. agents read it first on any refineui-related task. it does not list components or tokens \u2014 it defines **how** to route to official docs and what constraints apply when writing code.\n\n### frontmatter\n\n```yaml\n---\nname: refineui\ndescription: refineui design-system guide for ai agents\u2026\nuser-invocable: true\nargument-hint: "[question or topic]"\n---\n```\n\n| field | purpose |\n|-------|---------|\n| `name` | skill identifier (`refineui`) |\n| `description` | when hosts should load this skill |\n| `user-invocable` | users can invoke it directly (e.g. `/refineui`) |\n| `argument-hint` | optional topic passed with the invocation |\n\n### sections\n\n| section | what it tells the agent |\n|---------|-------------------------|\n| **1. classify the request** | foundations vs components vs setup vs mcp vs health check \u2014 and whether to read the project first |\n| **2. documentation routing** | start from `design.md` / `llm.txt` / `llms.txt`, open leaf pages on ui.pelagornis.com; use mcp when available |\n| **3. code-writing contract** | `@refineui/react` imports, composable apis, tokens-only styling, a11y |\n| **4. monorepo contributors** | paths inside this repository (`packages/tokens`, `packages/react`, docs) |\n| **5. mcp** | when and how to use `@refineui/mcp` tools |\n| **6. doctor** | read-only diagnostics before suggesting fixes |\n| **7. response principles** | cite urls, separate guidance from edits, no invented apis |\n\ndeeper detail lives in `references/` and `rules/` \u2014 `skill.md` links to them instead of duplicating content.\n\nsource: [skills/refineui/skill.md](https://github.com/pelagornis/refineui/blob/main/skills/refineui/skill.md)\n\n## what it does\n\n| layer | role |\n|-------|------|\n| **doc routing** | start from `design.md` / `llm.txt` / `llms.txt`, open leaf pages on ui.pelagornis.com |\n| **codegen rules** | tokens-only styling, composable apis, no invented props |\n| **monorepo hints** | where tokens, components, and docs live in this repository |\n| **mcp pointer** | when to use `@refineui/mcp` tools |\n| **doctor** | read-only setup & contract diagnostics |\n\nthe skill does **not** embed component lists or token tables \u2014 those stay in official docs so they never go stale.\n\n## installation\n\n<skillinstall />\n\n## file structure\n\n```\nskills/refineui/\n\u251C\u2500\u2500 skill.md                      # entry \u2014 request classification & doc routing\n\u251C\u2500\u2500 references/\n\u2502   \u251C\u2500\u2500 design-rules.md           # points to canonical design.md\n\u2502   \u251C\u2500\u2500 doctor.md                 # doctor workflow & report schema\n\u2502   \u2514\u2500\u2500 mcp.md                    # @refineui/mcp setup & tools\n\u2514\u2500\u2500 rules/                        # doctor rule definitions (read-only diagnostics)\n    \u251C\u2500\u2500 package-setup.md\n    \u251C\u2500\u2500 stylesheet-setup.md\n    \u251C\u2500\u2500 foundation-contract.md\n    \u251C\u2500\u2500 composition-api.md\n    \u2514\u2500\u2500 component-imports.md\n```\n\n| file | when the agent reads it |\n|------|-------------------------|\n| `skill.md` | any refineui-related question \u2014 routes to docs or references |\n| `references/design-rules.md` | writing or reviewing ui code \u2192 opens `design.md` |\n| `references/doctor.md` | health check / "using refineui correctly?" requests |\n| `references/mcp.md` | mcp host setup or tool selection |\n| `rules/*.md` | doctor diagnostics (manual or with `refineui-doctor` cli) |\n\n## documentation routing\n\nagents should **fetch the index on each task**, not rely on memorized slugs:\n\n1. read `https://ui.pelagornis.com/design.md` for visual identity\n2. read `https://ui.pelagornis.com/llms.txt` or `https://ui.pelagornis.com/llm.txt`\n3. follow links to foundations, components, or development leaf pages\n4. for code generation, combine component docs with [installation](/development/installation/) and [theming](/development/theming/)\n\nif mcp is configured, prefer `search_docs`, `get_doc_page`, and `get_design_rules` from `@refineui/mcp`.\n\n## request classification\n\n| request | action |\n|---------|--------|\n| token / color / spacing meaning | foundations docs only |\n| component api or example | component doc + optional mcp `get_doc_page` |\n| app setup / css import | development docs + inspect `package.json` |\n| "refineui \uC798 \uC4F0\uACE0 \uC788\uB098?" / setup audit | [doctor](/ai-tools/doctor/) + `references/doctor.md` or mcp `run_doctor` |\n| "list all components" | `llm.txt` or mcp `list_components` |\n\n## monorepo (this repository)\n\nin this monorepo, source lives under `packages/tokens`, `packages/react`, and `docs/`. install the skill in consumer projects; here it is available at `skills/refineui/` for review and `skills add` distribution.\n'
+    },
+    {
+      slug: "components/accordion",
+      href: "/components/accordion/",
+      title: "Accordion",
+      description: "Collapsible content panels for dense info.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ComponentPreview client:load component="accordion" />\n</div>\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="accordion" />\n</div>\n\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="accordion" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Accordion type="single" collapsible>\n  <AccordionItem value="item-1">\n    <AccordionTrigger>What is RefineUI?</AccordionTrigger>\n    <AccordionContent>\n      RefineUI is a design system and component library.\n    </AccordionContent>\n  </AccordionItem>\n  <AccordionItem value="item-2">\n    <AccordionTrigger>How do I install it?</AccordionTrigger>\n    <AccordionContent>\n      Run: bun add @refineui/react @refineui/tokens\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n\n<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>\n  {/* Multiple panels can be open */}\n</Accordion>\n\n<Accordion size="lg" value={openItem} onValueChange={setOpenItem}>\n  {/* Controlled accordion */}\n</Accordion>\n```\n\nContract source: `packages/react/spec/components/accordion.json` \u2014 rendered by SpecRenderer above.',
+      searchText: 'accordion collapsible content panels for dense info. \n<div class="not-content my-6">\n  <componentpreview client:load component="accordion" />\n</div>\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="accordion" />\n</div>\n\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="accordion" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<accordion type="single" collapsible>\n  <accordionitem value="item-1">\n    <accordiontrigger>what is refineui?</accordiontrigger>\n    <accordioncontent>\n      refineui is a design system and component library.\n    </accordioncontent>\n  </accordionitem>\n  <accordionitem value="item-2">\n    <accordiontrigger>how do i install it?</accordiontrigger>\n    <accordioncontent>\n      run: bun add @refineui/react @refineui/tokens\n    </accordioncontent>\n  </accordionitem>\n</accordion>\n\n<accordion type="multiple" defaultvalue={["item-1", "item-2"]}>\n  {/* multiple panels can be open */}\n</accordion>\n\n<accordion size="lg" value={openitem} onvaluechange={setopenitem}>\n  {/* controlled accordion */}\n</accordion>\n```\n\ncontract source: `packages/react/spec/components/accordion.json` \u2014 rendered by specrenderer above.\n'
+    },
+    {
+      slug: "components/alert",
+      href: "/components/alert/",
+      title: "Alert",
+      description: "Prominent message communicating status or warning.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ComponentPreview client:load component="alert" variant="info" />\n</div>\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="alert" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="alert" variant="info" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Alert variant="warning">\n  <AlertRow>\n    <AlertIcon />\n    <AlertBody>\n      <AlertTitle>Warning</AlertTitle>\n      <AlertDescription>Review before continuing.</AlertDescription>\n    </AlertBody>\n    <AlertClose type="button" />\n  </AlertRow>\n  <AlertActions>\n    <AlertAction type="button">Review</AlertAction>\n  </AlertActions>\n</Alert>\n```\n\nContract source: `packages/react/spec/components/alert.json` \u2014 rendered by SpecRenderer above.\n\nToken trace source: `packages/react/dist/spec/token-trace-v2.json` + `packages/tokens/dist/spec/trace-v2.json`.',
+      searchText: 'alert prominent message communicating status or warning. \n<div class="not-content my-6">\n  <componentpreview client:load component="alert" variant="info" />\n</div>\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="alert" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="alert" variant="info" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<alert variant="warning">\n  <alertrow>\n    <alerticon />\n    <alertbody>\n      <alerttitle>warning</alerttitle>\n      <alertdescription>review before continuing.</alertdescription>\n    </alertbody>\n    <alertclose type="button" />\n  </alertrow>\n  <alertactions>\n    <alertaction type="button">review</alertaction>\n  </alertactions>\n</alert>\n```\n\ncontract source: `packages/react/spec/components/alert.json` \u2014 rendered by specrenderer above.\n\ntoken trace source: `packages/react/dist/spec/token-trace-v2.json` + `packages/tokens/dist/spec/trace-v2.json`.\n'
+    },
+    {
+      slug: "components/avatar",
+      href: "/components/avatar/",
+      title: "Avatar",
+      description: "User image or initial representation.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <AvatarPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="avatar" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Avatar>\n  <AvatarImage src="/user.jpg" alt="User Name" />\n  <AvatarFallback>UN</AvatarFallback>\n</Avatar>\n\n<Avatar size="lg" showStatus status="online">\n  <AvatarImage src="/avatar.jpg" alt="User" />\n  <AvatarFallback>U</AvatarFallback>\n  <AvatarBadge status="online" />\n</Avatar>\n\n<Avatar layout="icon" color="blue">\n  <AvatarIcon name="user" />\n</Avatar>\n\n<Avatar layout="initials" color="green">\n  <AvatarText>AB</AvatarText>\n</Avatar>\n```\n\n## API Reference\n\n### Avatar\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "src", default: "\u2014", type: "string | null", description: "Image source URL." },\n    { prop: "alt", default: "\u2014", type: "string", description: "Image alt text." },\n    { prop: "layout", default: "\u2014", type: "\\"image\\" | \\"icon\\" | \\"initials\\"", description: "Avatar layout (inferred from children when omitted)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\"", description: "Avatar size tier." },\n    { prop: "showStatus", default: "false", type: "boolean", description: "Shows presence status badge." },\n    { prop: "status", default: "\u2014", type: "\\"online\\" | \\"away\\" | \\"unavailable\\" | \\"offline\\"", description: "Presence status." },\n    { prop: "color", default: "\u2014", type: "AvatarColor", description: "Background color (for icon/initials)." }\n    ]}\n  />\n</div>\n### AvatarImage\n\nImage element.\n\n### AvatarFallback\n\nFallback content when image fails to load.\n\n### AvatarBadge\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "status", default: "\u2014", type: "\\"online\\" | \\"away\\" | \\"unavailable\\" | \\"offline\\"", description: "Presence status indicator." }\n    ]}\n  />\n</div>\n### AvatarText\n\nText content for initials.\n\n### AvatarIcon\n\nIcon element for icon layout.',
+      searchText: 'avatar user image or initial representation. <div class="not-content my-6">\n  <avatarpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="avatar" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<avatar>\n  <avatarimage src="/user.jpg" alt="user name" />\n  <avatarfallback>un</avatarfallback>\n</avatar>\n\n<avatar size="lg" showstatus status="online">\n  <avatarimage src="/avatar.jpg" alt="user" />\n  <avatarfallback>u</avatarfallback>\n  <avatarbadge status="online" />\n</avatar>\n\n<avatar layout="icon" color="blue">\n  <avataricon name="user" />\n</avatar>\n\n<avatar layout="initials" color="green">\n  <avatartext>ab</avatartext>\n</avatar>\n```\n\n## api reference\n\n### avatar\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "src", default: "\u2014", type: "string | null", description: "image source url." },\n    { prop: "alt", default: "\u2014", type: "string", description: "image alt text." },\n    { prop: "layout", default: "\u2014", type: "\\"image\\" | \\"icon\\" | \\"initials\\"", description: "avatar layout (inferred from children when omitted)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\"", description: "avatar size tier." },\n    { prop: "showstatus", default: "false", type: "boolean", description: "shows presence status badge." },\n    { prop: "status", default: "\u2014", type: "\\"online\\" | \\"away\\" | \\"unavailable\\" | \\"offline\\"", description: "presence status." },\n    { prop: "color", default: "\u2014", type: "avatarcolor", description: "background color (for icon/initials)." }\n    ]}\n  />\n</div>\n### avatarimage\n\nimage element.\n\n### avatarfallback\n\nfallback content when image fails to load.\n\n### avatarbadge\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "status", default: "\u2014", type: "\\"online\\" | \\"away\\" | \\"unavailable\\" | \\"offline\\"", description: "presence status indicator." }\n    ]}\n  />\n</div>\n### avatartext\n\ntext content for initials.\n\n### avataricon\n\nicon element for icon layout.\n\n'
+    },
+    {
+      slug: "components/avatars",
+      href: "/components/avatars/",
+      title: "Avatar Group",
+      description: "Grouped avatars for team/user lists.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <AvatarsPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="avatars" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Avatars\n  avatars={[\n    { src: "/user1.jpg", alt: "User 1" },\n    { src: "/user2.jpg", alt: "User 2" },\n    { src: "/user3.jpg", alt: "User 3" }\n  ]}\n/>\n\n<Avatars\n  avatars={teamMembers}\n  size="lg"\n  max={3}\n  layout="spread"\n/>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "avatars", default: "\u2014", type: "AvatarItem[]", description: "Array of avatar items (required). Each item has `src?`, `alt` properties." },\n    { prop: "size", default: "\\"md\\"", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\"", description: "Avatar size tier." },\n    { prop: "max", default: "\u2014", type: "number", description: "Maximum avatars to display before showing count." },\n    { prop: "layout", default: "\\"stack\\"", type: "\\"stack\\" | \\"spread\\"", description: "Layout style: stacked or spread apart." }\n    ]}\n  />\n</div>',
+      searchText: 'avatar group grouped avatars for team/user lists. <div class="not-content my-6">\n  <avatarspreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="avatars" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<avatars\n  avatars={[\n    { src: "/user1.jpg", alt: "user 1" },\n    { src: "/user2.jpg", alt: "user 2" },\n    { src: "/user3.jpg", alt: "user 3" }\n  ]}\n/>\n\n<avatars\n  avatars={teammembers}\n  size="lg"\n  max={3}\n  layout="spread"\n/>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "avatars", default: "\u2014", type: "avataritem[]", description: "array of avatar items (required). each item has `src?`, `alt` properties." },\n    { prop: "size", default: "\\"md\\"", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\"", description: "avatar size tier." },\n    { prop: "max", default: "\u2014", type: "number", description: "maximum avatars to display before showing count." },\n    { prop: "layout", default: "\\"stack\\"", type: "\\"stack\\" | \\"spread\\"", description: "layout style: stacked or spread apart." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/badge",
+      href: "/components/badge/",
+      title: "Badge",
+      description: "Status badge or numerical counter tag.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <BadgePreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="badge" />\n</div>\n\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="badge" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Badge>New</Badge>\n\n<Badge variant="success">5</Badge>\n\n<Badge variant="warning" layout="number">12</Badge>\n\n<Badge variant="danger">Error</Badge>\n\n<Badge variant="outline">Draft</Badge>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"neutral\\" | \\"outline\\" | \\"success\\" | \\"warning\\" | \\"danger\\"", description: "Visual variant style." },\n    { prop: "layout", default: "\\"label\\"", type: "\\"label\\" | \\"number\\"", description: "Layout type for label vs number display." }\n    ]}\n  />\n</div>',
+      searchText: 'badge status badge or numerical counter tag. <div class="not-content my-6">\n  <badgepreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="badge" />\n</div>\n\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="badge" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<badge>new</badge>\n\n<badge variant="success">5</badge>\n\n<badge variant="warning" layout="number">12</badge>\n\n<badge variant="danger">error</badge>\n\n<badge variant="outline">draft</badge>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"neutral\\" | \\"outline\\" | \\"success\\" | \\"warning\\" | \\"danger\\"", description: "visual variant style." },\n    { prop: "layout", default: "\\"label\\"", type: "\\"label\\" | \\"number\\"", description: "layout type for label vs number display." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/box",
+      href: "/components/box/",
+      title: "Box",
+      description: "Padding, semantic fill, radius, and border \u2014 the base layout surface.",
+      category: "components",
+      content: '`Box` applies Foundation spacing, color, radius, and stroke tokens to a single surface. Use it when you need a token-backed wrapper without inventing CSS.\n\n<div class="not-content my-6">\n  <BoxPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="box" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">\n  Content\n</Box>\n\n<Box\n  as="section"\n  paddingX="sizeLarge"\n  paddingY="sizeSmall"\n  border="strokeWidthThin"\n  borderColor="borderDefault"\n  background="backgroundPrimary"\n>\n  Outlined section\n</Box>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "Root element." },\n    { prop: "padding", default: "\u2014", type: "Spacing token", description: "Padding on all sides." },\n    { prop: "paddingX", default: "\u2014", type: "Spacing token", description: "Horizontal padding." },\n    { prop: "paddingY", default: "\u2014", type: "Spacing token", description: "Vertical padding." },\n    { prop: "background", default: "\u2014", type: "Background / surface alias", description: "Fill color." },\n    { prop: "radius", default: "\u2014", type: "Radius token", description: "Corner radius." },\n    { prop: "border", default: "\u2014", type: "Stroke token", description: "Border width." },\n    { prop: "borderColor", default: "\u2014", type: "Border color alias", description: "Border color (defaults with `border`)." }\n    ]}\n  />\n</div>',
+      searchText: 'box padding, semantic fill, radius, and border \u2014 the base layout surface. `box` applies foundation spacing, color, radius, and stroke tokens to a single surface. use it when you need a token-backed wrapper without inventing css.\n\n<div class="not-content my-6">\n  <boxpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="box" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<box padding="sizelarge" background="backgroundsurface" radius="roundedlarge">\n  content\n</box>\n\n<box\n  as="section"\n  paddingx="sizelarge"\n  paddingy="sizesmall"\n  border="strokewidththin"\n  bordercolor="borderdefault"\n  background="backgroundprimary"\n>\n  outlined section\n</box>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "root element." },\n    { prop: "padding", default: "\u2014", type: "spacing token", description: "padding on all sides." },\n    { prop: "paddingx", default: "\u2014", type: "spacing token", description: "horizontal padding." },\n    { prop: "paddingy", default: "\u2014", type: "spacing token", description: "vertical padding." },\n    { prop: "background", default: "\u2014", type: "background / surface alias", description: "fill color." },\n    { prop: "radius", default: "\u2014", type: "radius token", description: "corner radius." },\n    { prop: "border", default: "\u2014", type: "stroke token", description: "border width." },\n    { prop: "bordercolor", default: "\u2014", type: "border color alias", description: "border color (defaults with `border`)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/breadcrumb",
+      href: "/components/breadcrumb/",
+      title: "Breadcrumb",
+      description: "Hierarchical trail showing page location.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <BreadcrumbPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Components</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Current</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API Reference\n\n### Breadcrumb\n\nRoot container (`<nav>` element).\n\n### BreadcrumbList\n\nOrdered list of breadcrumb items.\n\n### BreadcrumbItem\n\nList item wrapper.\n\n### BreadcrumbLink\n\nLink to a page.\n\n### BreadcrumbPage\n\nCurrent page (non-clickable).\n\n### BreadcrumbSeparator\n\nVisual separator between items.\n\n### BreadcrumbEllipsis\n\nCollapsed items indicator.',
+      searchText: 'breadcrumb hierarchical trail showing page location. <div class="not-content my-6">\n  <breadcrumbpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="breadcrumb" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumblink href="/docs">docs</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>components</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbellipsis />\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>current</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n```\n\n## api reference\n\n### breadcrumb\n\nroot container (`<nav>` element).\n\n### breadcrumblist\n\nordered list of breadcrumb items.\n\n### breadcrumbitem\n\nlist item wrapper.\n\n### breadcrumblink\n\nlink to a page.\n\n### breadcrumbpage\n\ncurrent page (non-clickable).\n\n### breadcrumbseparator\n\nvisual separator between items.\n\n### breadcrumbellipsis\n\ncollapsed items indicator.\n\n'
+    },
+    {
+      slug: "components/bubble",
+      href: "/components/bubble/",
+      title: "Bubble",
+      description: "Chat-style message bubble for conversational UI.",
+      category: "components",
+      content: '`Bubble` renders a message surface for chat and conversation layouts. Pair with `BubbleContent`, optional `BubbleReactions`, and `BubbleGroup` for stacked messages.\n\n<div class="not-content my-6">\n  <BubbleDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="bubble" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Bubble variant="muted" align="start">\n  <BubbleContent>Want to catch up later?</BubbleContent>\n</Bubble>\n\n<Bubble variant="default" align="end">\n  <BubbleContent>Sounds good.</BubbleContent>\n</Bubble>\n```\n\n## API Reference\n\n### Bubble\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\u2014", type: "\\"default\\" | \\"secondary\\" | \\"muted\\" | \\"tinted\\" | \\"outline\\" | \\"ghost\\" | \\"destructive\\"", description: "Visual style." },\n    { prop: "align", default: "\u2014", type: "\\"start\\" | \\"end\\"", description: "Message alignment." }\n    ]}\n  />\n</div>\n### BubbleContent / BubbleReactions / BubbleGroup\n\nComposition slots for body text, reactions, and stacked groups. See the preview for structure.',
+      searchText: 'bubble chat-style message bubble for conversational ui. `bubble` renders a message surface for chat and conversation layouts. pair with `bubblecontent`, optional `bubblereactions`, and `bubblegroup` for stacked messages.\n\n<div class="not-content my-6">\n  <bubbledemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="bubble" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<bubble variant="muted" align="start">\n  <bubblecontent>want to catch up later?</bubblecontent>\n</bubble>\n\n<bubble variant="default" align="end">\n  <bubblecontent>sounds good.</bubblecontent>\n</bubble>\n```\n\n## api reference\n\n### bubble\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\u2014", type: "\\"default\\" | \\"secondary\\" | \\"muted\\" | \\"tinted\\" | \\"outline\\" | \\"ghost\\" | \\"destructive\\"", description: "visual style." },\n    { prop: "align", default: "\u2014", type: "\\"start\\" | \\"end\\"", description: "message alignment." }\n    ]}\n  />\n</div>\n### bubblecontent / bubblereactions / bubblegroup\n\ncomposition slots for body text, reactions, and stacked groups. see the preview for structure.\n'
+    },
+    {
+      slug: "components/button-group",
+      href: "/components/button-group/",
+      title: "Button Group",
+      description: "Button Group is not yet available in @refineui/react.",
+      category: "components",
+      content: 'Button Group component is not currently shipped in `@refineui/react`.\n\nFor grouping buttons, use layout components like `Stack`:\n\n```tsx\n<Stack direction="row" gap="sizeXSmall">\n  <Button variant="outline">Cancel</Button>\n  <Button variant="primary">Save</Button>\n</Stack>\n```',
+      searchText: 'button group button group is not yet available in @refineui/react. \nbutton group component is not currently shipped in `@refineui/react`.\n\nfor grouping buttons, use layout components like `stack`:\n\n```tsx\n<stack direction="row" gap="sizexsmall">\n  <button variant="outline">cancel</button>\n  <button variant="primary">save</button>\n</stack>\n```\n\n'
+    },
+    {
+      slug: "components/button",
+      href: "/components/button/",
+      title: "Button",
+      description: "Starts an action \u2014 save, continue, open a panel, or close a dialog.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ComponentPreview client:load component="button" variant="primary" />\n</div>\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="button" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="button" variant="primary" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\nUse one primary action per view. Prefer ghost or outline for secondary actions in dense toolbars.\n\n```tsx\n<Button variant="primary" size="md">\n  Continue\n</Button>\n\n<Button variant="outline" disabled>\n  Unavailable\n</Button>\n\n<Button variant="ghost" layout="icon" aria-label="Add">\n  <WebIcon name="add" size={iconSizes.medium} color="currentColor" />\n</Button>\n```\n\nContract source: `packages/react/spec/components/button.json` \u2014 rendered by SpecRenderer above.',
+      searchText: 'button starts an action \u2014 save, continue, open a panel, or close a dialog. \n<div class="not-content my-6">\n  <componentpreview client:load component="button" variant="primary" />\n</div>\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="button" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="button" variant="primary" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\nuse one primary action per view. prefer ghost or outline for secondary actions in dense toolbars.\n\n```tsx\n<button variant="primary" size="md">\n  continue\n</button>\n\n<button variant="outline" disabled>\n  unavailable\n</button>\n\n<button variant="ghost" layout="icon" aria-label="add">\n  <webicon name="add" size={iconsizes.medium} color="currentcolor" />\n</button>\n```\n\ncontract source: `packages/react/spec/components/button.json` \u2014 rendered by specrenderer above.\n'
+    },
+    {
+      slug: "components/calendar",
+      href: "/components/calendar/",
+      title: "Calendar",
+      description: "Date picker calendar grid component.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <CalendarPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="calendar" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Calendar value={selectedDate} onChange={setSelectedDate} />\n\n<Calendar\n  mode="range"\n  rangeStart={startDate}\n  rangeEnd={endDate}\n  onRangeChange={(start, end) => {\n    setStartDate(start);\n    setEndDate(end);\n  }}\n/>\n\n<Calendar weekStartsOn={1} defaultMonth={new Date(2024, 0)} />\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "mode", default: "\\"single\\"", type: "\\"single\\" | \\"range\\"", description: "Selection mode." },\n    { prop: "value", default: "\u2014", type: "Date", description: "Controlled selected date (single mode)." },\n    { prop: "onChange", default: "\u2014", type: "(date: Date) => void", description: "Event handler when date changes (single mode)." },\n    { prop: "rangeStart", default: "\u2014", type: "Date", description: "Controlled range start date (range mode)." },\n    { prop: "rangeEnd", default: "\u2014", type: "Date", description: "Controlled range end date (range mode)." },\n    { prop: "onRangeChange", default: "\u2014", type: "(start?: Date, end?: Date) => void", description: "Event handler when range changes (range mode)." },\n    { prop: "weekStartsOn", default: "0", type: "0 | 1", description: "First day of week: 0 (Sunday) or 1 (Monday)." },\n    { prop: "defaultMonth", default: "\u2014", type: "Date", description: "Initially displayed month." }\n    ]}\n  />\n</div>',
+      searchText: 'calendar date picker calendar grid component. <div class="not-content my-6">\n  <calendarpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="calendar" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<calendar value={selecteddate} onchange={setselecteddate} />\n\n<calendar\n  mode="range"\n  rangestart={startdate}\n  rangeend={enddate}\n  onrangechange={(start, end) => {\n    setstartdate(start);\n    setenddate(end);\n  }}\n/>\n\n<calendar weekstartson={1} defaultmonth={new date(2024, 0)} />\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "mode", default: "\\"single\\"", type: "\\"single\\" | \\"range\\"", description: "selection mode." },\n    { prop: "value", default: "\u2014", type: "date", description: "controlled selected date (single mode)." },\n    { prop: "onchange", default: "\u2014", type: "(date: date) => void", description: "event handler when date changes (single mode)." },\n    { prop: "rangestart", default: "\u2014", type: "date", description: "controlled range start date (range mode)." },\n    { prop: "rangeend", default: "\u2014", type: "date", description: "controlled range end date (range mode)." },\n    { prop: "onrangechange", default: "\u2014", type: "(start?: date, end?: date) => void", description: "event handler when range changes (range mode)." },\n    { prop: "weekstartson", default: "0", type: "0 | 1", description: "first day of week: 0 (sunday) or 1 (monday)." },\n    { prop: "defaultmonth", default: "\u2014", type: "date", description: "initially displayed month." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/card",
+      href: "/components/card/",
+      title: "Card",
+      description: "Container grouping related information.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <CardPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="card" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Card>\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n    <CardDescription>Card description goes here.</CardDescription>\n  </CardHeader>\n  <CardContent>\n    <p>Card body content</p>\n  </CardContent>\n  <CardFooter>\n    <Button>Action</Button>\n  </CardFooter>\n</Card>\n\n<Card variant="outlined" interactive state="hover">\n  <CardContent>\n    Interactive card with outlined variant\n  </CardContent>\n</Card>\n```\n\n## API Reference\n\n### Card\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"elevated\\"", type: "\\"elevated\\" | \\"outlined\\"", description: "Visual variant style." },\n    { prop: "interactive", default: "false", type: "boolean", description: "Enables hover/press interactions." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"disabled\\"", description: "Visual state." }\n    ]}\n  />\n</div>\n### CardHeader\n\nHeader layout section.\n\n### CardHeaderMain\n\nMain header content wrapper.\n\n### CardTitle\n\nTitle heading element.\n\n### CardDescription\n\nSecondary description text.\n\n### CardContent\n\nMain card body content.\n\n### CardFooter\n\nFooter section (typically for actions).\n\n### CardAction\n\nAction button in header.',
+      searchText: 'card container grouping related information. <div class="not-content my-6">\n  <cardpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="card" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<card>\n  <cardheader>\n    <cardtitle>card title</cardtitle>\n    <carddescription>card description goes here.</carddescription>\n  </cardheader>\n  <cardcontent>\n    <p>card body content</p>\n  </cardcontent>\n  <cardfooter>\n    <button>action</button>\n  </cardfooter>\n</card>\n\n<card variant="outlined" interactive state="hover">\n  <cardcontent>\n    interactive card with outlined variant\n  </cardcontent>\n</card>\n```\n\n## api reference\n\n### card\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"elevated\\"", type: "\\"elevated\\" | \\"outlined\\"", description: "visual variant style." },\n    { prop: "interactive", default: "false", type: "boolean", description: "enables hover/press interactions." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"disabled\\"", description: "visual state." }\n    ]}\n  />\n</div>\n### cardheader\n\nheader layout section.\n\n### cardheadermain\n\nmain header content wrapper.\n\n### cardtitle\n\ntitle heading element.\n\n### carddescription\n\nsecondary description text.\n\n### cardcontent\n\nmain card body content.\n\n### cardfooter\n\nfooter section (typically for actions).\n\n### cardaction\n\naction button in header.\n\n'
+    },
+    {
+      slug: "components/carousel",
+      href: "/components/carousel/",
+      title: "Carousel",
+      description: "Image or card slider carousel.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <CarouselDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="carousel" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Carousel>\n  <CarouselContent>\n    <CarouselItem>\n      <img src="/slide1.jpg" alt="Slide 1" />\n    </CarouselItem>\n    <CarouselItem>\n      <img src="/slide2.jpg" alt="Slide 2" />\n    </CarouselItem>\n    <CarouselItem>\n      <img src="/slide3.jpg" alt="Slide 3" />\n    </CarouselItem>\n  </CarouselContent>\n  <CarouselControls>\n    <CarouselPrevious />\n    <CarouselNext />\n  </CarouselControls>\n  <CarouselIndicators />\n</Carousel>\n\n<Carousel\n  index={currentIndex}\n  onIndexChange={setCurrentIndex}\n  loop\n/>\n```\n\n## API Reference\n\n### Carousel\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "Controlled slide index (0-based)." },\n    { prop: "defaultIndex", default: "0", type: "number", description: "Uncontrolled initial index." },\n    { prop: "onIndexChange", default: "\u2014", type: "(index: number) => void", description: "Event handler when slide changes." },\n    { prop: "loop", default: "false", type: "boolean", description: "Wrap from last to first / first to last." }\n    ]}\n  />\n</div>\n### CarouselContent\n\nSlides container.\n\n### CarouselItem\n\nIndividual slide.\n\n### CarouselControls\n\nContainer for navigation buttons.\n\n### CarouselPrevious\n\nPrevious slide button.\n\n### CarouselNext\n\nNext slide button.\n\n### CarouselIndicators\n\nDot indicators for slides.',
+      searchText: 'carousel image or card slider carousel. <div class="not-content my-6">\n  <carouseldemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="carousel" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<carousel>\n  <carouselcontent>\n    <carouselitem>\n      <img src="/slide1.jpg" alt="slide 1" />\n    </carouselitem>\n    <carouselitem>\n      <img src="/slide2.jpg" alt="slide 2" />\n    </carouselitem>\n    <carouselitem>\n      <img src="/slide3.jpg" alt="slide 3" />\n    </carouselitem>\n  </carouselcontent>\n  <carouselcontrols>\n    <carouselprevious />\n    <carouselnext />\n  </carouselcontrols>\n  <carouselindicators />\n</carousel>\n\n<carousel\n  index={currentindex}\n  onindexchange={setcurrentindex}\n  loop\n/>\n```\n\n## api reference\n\n### carousel\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "controlled slide index (0-based)." },\n    { prop: "defaultindex", default: "0", type: "number", description: "uncontrolled initial index." },\n    { prop: "onindexchange", default: "\u2014", type: "(index: number) => void", description: "event handler when slide changes." },\n    { prop: "loop", default: "false", type: "boolean", description: "wrap from last to first / first to last." }\n    ]}\n  />\n</div>\n### carouselcontent\n\nslides container.\n\n### carouselitem\n\nindividual slide.\n\n### carouselcontrols\n\ncontainer for navigation buttons.\n\n### carouselprevious\n\nprevious slide button.\n\n### carouselnext\n\nnext slide button.\n\n### carouselindicators\n\ndot indicators for slides.\n\n'
+    },
+    {
+      slug: "components/chart",
+      href: "/components/chart/",
+      title: "Chart",
+      description: "Data visualization chart primitive.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ChartPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="chart" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartYAxisLabels values={data} />\n      <ChartPlot aria-label="Weekly sales chart">\n        <ChartGrid values={data} />\n        <ChartBars values={data} seriesColor="blue" />\n      </ChartPlot>\n      <ChartAxisLabels labels={labels} />\n    </ChartContent>\n  </ChartBody>\n  <ChartLegend>\n    <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n  </ChartLegend>\n</Chart>\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartPlot>\n        <ChartGrid values={data} lines={5} />\n        <ChartLine values={data} seriesColor="green" showArea showPoints />\n      </ChartPlot>\n    </ChartContent>\n  </ChartBody>\n</Chart>\n```\n\n## API Reference\n\n### Chart\n\nRoot chart container.\n\n### ChartBody\n\nMain chart body section.\n\n### ChartContent\n\nChart content wrapper.\n\n### ChartPlot\n\nSVG plot area.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the chart." }\n    ]}\n  />\n</div>\n### ChartGrid\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "Horizontal grid line count (includes baseline)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum (auto-derived from values when omitted)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale derivation." }\n    ]}\n  />\n</div>\n### ChartBars\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Bar values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n    { prop: "showTrack", default: "false", type: "boolean", description: "Shows full-height track behind each bar." }\n    ]}\n  />\n</div>\n### ChartLine\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Line values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y scale maximum." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key." },\n    { prop: "showArea", default: "false", type: "boolean", description: "Area fill under the line." },\n    { prop: "showPoints", default: "false", type: "boolean", description: "Point markers on each value." }\n    ]}\n  />\n</div>\n### ChartYAxisLabels\n\nY-axis tick labels.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "Source values for scale." },\n    { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "Custom formatter." }\n    ]}\n  />\n</div>\n### ChartAxisLabels\n\nX-axis labels.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "Label strings (required)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "Alignment style." }\n    ]}\n  />\n</div>\n### ChartLegend\n\nLegend list container.\n\n### ChartLegendItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "Series color key (required)." }\n    ]}\n  />\n</div>',
+      searchText: 'chart data visualization chart primitive. <div class="not-content my-6">\n  <chartpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="chart" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartyaxislabels values={data} />\n      <chartplot aria-label="weekly sales chart">\n        <chartgrid values={data} />\n        <chartbars values={data} seriescolor="blue" />\n      </chartplot>\n      <chartaxislabels labels={labels} />\n    </chartcontent>\n  </chartbody>\n  <chartlegend>\n    <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n  </chartlegend>\n</chart>\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartplot>\n        <chartgrid values={data} lines={5} />\n        <chartline values={data} seriescolor="green" showarea showpoints />\n      </chartplot>\n    </chartcontent>\n  </chartbody>\n</chart>\n```\n\n## api reference\n\n### chart\n\nroot chart container.\n\n### chartbody\n\nmain chart body section.\n\n### chartcontent\n\nchart content wrapper.\n\n### chartplot\n\nsvg plot area.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the chart." }\n    ]}\n  />\n</div>\n### chartgrid\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "horizontal grid line count (includes baseline)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum (auto-derived from values when omitted)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale derivation." }\n    ]}\n  />\n</div>\n### chartbars\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "bar values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n    { prop: "showtrack", default: "false", type: "boolean", description: "shows full-height track behind each bar." }\n    ]}\n  />\n</div>\n### chartline\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "line values (required)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y scale maximum." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key." },\n    { prop: "showarea", default: "false", type: "boolean", description: "area fill under the line." },\n    { prop: "showpoints", default: "false", type: "boolean", description: "point markers on each value." }\n    ]}\n  />\n</div>\n### chartyaxislabels\n\ny-axis tick labels.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "source values for scale." },\n    { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "custom formatter." }\n    ]}\n  />\n</div>\n### chartaxislabels\n\nx-axis labels.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "label strings (required)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "alignment style." }\n    ]}\n  />\n</div>\n### chartlegend\n\nlegend list container.\n\n### chartlegenditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "series color key (required)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/checkbox",
+      href: "/components/checkbox/",
+      title: "Checkbox",
+      description: "Binary selection control for forms.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <CheckboxPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="checkbox" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="checkbox" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n  label="Enable notifications"\n  description="Receive updates about your account"\n  checked={notificationsEnabled}\n  onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "Checkbox label text." },\n    { prop: "description", default: "\u2014", type: "string", description: "Optional description below the label." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "Visual variant style." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "Controlled checked state." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'checkbox binary selection control for forms. <div class="not-content my-6">\n  <checkboxpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="checkbox" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="checkbox" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n  label="enable notifications"\n  description="receive updates about your account"\n  checked={notificationsenabled}\n  onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "checkbox label text." },\n    { prop: "description", default: "\u2014", type: "string", description: "optional description below the label." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "visual variant style." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "controlled checked state." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/command",
+      href: "/components/command/",
+      title: "Command",
+      description: "Command palette interface with search.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <CommandPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="command" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Command>\n  <CommandInput placeholder="Search commands..." />\n  <CommandList>\n    <CommandEmpty>No results found.</CommandEmpty>\n    <CommandGroup>\n      <CommandGroupHeading>File</CommandGroupHeading>\n      <CommandItem value="new" onSelect={() => handleNew()}>\n        New File\n      </CommandItem>\n      <CommandItem value="open">Open</CommandItem>\n    </CommandGroup>\n    <CommandSeparator />\n    <CommandGroup>\n      <CommandGroupHeading>Edit</CommandGroupHeading>\n      <CommandItem value="copy">Copy</CommandItem>\n      <CommandItem value="paste">Paste</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</Command>\n\n<CommandDialog open={isOpen} onOpenChange={setIsOpen}>\n  <Command>\n    {/* Command content */}\n  </Command>\n</CommandDialog>\n```\n\n## API Reference\n\n### Command\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled search query." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial search query." },\n    { prop: "onValueChange", default: "\u2014", type: "(search: string) => void", description: "Event handler when search changes." },\n    { prop: "shouldFilter", default: "true", type: "boolean", description: "When true, filters items by search text." },\n    { prop: "filter", default: "\u2014", type: "CommandFilter", description: "Custom score function (return 0 to hide)." },\n    { prop: "selectedValue", default: "\u2014", type: "string", description: "Controlled highlighted item value." },\n    { prop: "defaultSelectedValue", default: "\u2014", type: "string", description: "Uncontrolled initial highlighted item." },\n    { prop: "onSelectedValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when highlighted item changes." },\n    { prop: "label", default: "\u2014", type: "string", description: "Accessible name (`aria-label`)." }\n    ]}\n  />\n</div>\n### CommandDialog\n\nCommand in a Dialog overlay.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "Controlled open state." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "Event handler when open state changes." },\n    { prop: "commandProps", default: "\u2014", type: "CommandProps", description: "Props forwarded to inner Command." }\n    ]}\n  />\n</div>\n### CommandInput\n\nSearch input with optional `startIcon`.\n\n### CommandList\n\nScrollable list container (uses `ScrollArea` internally).\n\n### CommandEmpty\n\nShown when no items match.\n\n### CommandGroup\n\nGroups related items.\n\n### CommandGroupHeading\n\nHeading for a group.\n\n### CommandSeparator\n\nVisual divider.\n\n### CommandItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Unique value for filtering and selection (required)." },\n    { prop: "keywords", default: "\u2014", type: "string[]", description: "Extra strings for default filter." },\n    { prop: "onSelect", default: "\u2014", type: "(value: string) => void", description: "Called when activated (click/Enter)." },\n    { prop: "forceMount", default: "false", type: "boolean", description: "Keep mounted when filtered out." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n    { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "Trailing icon." },\n    { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "Keyboard shortcut hint." }\n    ]}\n  />\n</div>',
+      searchText: 'command command palette interface with search. <div class="not-content my-6">\n  <commandpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="command" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<command>\n  <commandinput placeholder="search commands..." />\n  <commandlist>\n    <commandempty>no results found.</commandempty>\n    <commandgroup>\n      <commandgroupheading>file</commandgroupheading>\n      <commanditem value="new" onselect={() => handlenew()}>\n        new file\n      </commanditem>\n      <commanditem value="open">open</commanditem>\n    </commandgroup>\n    <commandseparator />\n    <commandgroup>\n      <commandgroupheading>edit</commandgroupheading>\n      <commanditem value="copy">copy</commanditem>\n      <commanditem value="paste">paste</commanditem>\n    </commandgroup>\n  </commandlist>\n</command>\n\n<commanddialog open={isopen} onopenchange={setisopen}>\n  <command>\n    {/* command content */}\n  </command>\n</commanddialog>\n```\n\n## api reference\n\n### command\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled search query." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial search query." },\n    { prop: "onvaluechange", default: "\u2014", type: "(search: string) => void", description: "event handler when search changes." },\n    { prop: "shouldfilter", default: "true", type: "boolean", description: "when true, filters items by search text." },\n    { prop: "filter", default: "\u2014", type: "commandfilter", description: "custom score function (return 0 to hide)." },\n    { prop: "selectedvalue", default: "\u2014", type: "string", description: "controlled highlighted item value." },\n    { prop: "defaultselectedvalue", default: "\u2014", type: "string", description: "uncontrolled initial highlighted item." },\n    { prop: "onselectedvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when highlighted item changes." },\n    { prop: "label", default: "\u2014", type: "string", description: "accessible name (`aria-label`)." }\n    ]}\n  />\n</div>\n### commanddialog\n\ncommand in a dialog overlay.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "controlled open state." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "event handler when open state changes." },\n    { prop: "commandprops", default: "\u2014", type: "commandprops", description: "props forwarded to inner command." }\n    ]}\n  />\n</div>\n### commandinput\n\nsearch input with optional `starticon`.\n\n### commandlist\n\nscrollable list container (uses `scrollarea` internally).\n\n### commandempty\n\nshown when no items match.\n\n### commandgroup\n\ngroups related items.\n\n### commandgroupheading\n\nheading for a group.\n\n### commandseparator\n\nvisual divider.\n\n### commanditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "unique value for filtering and selection (required)." },\n    { prop: "keywords", default: "\u2014", type: "string[]", description: "extra strings for default filter." },\n    { prop: "onselect", default: "\u2014", type: "(value: string) => void", description: "called when activated (click/enter)." },\n    { prop: "forcemount", default: "false", type: "boolean", description: "keep mounted when filtered out." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n    { prop: "endicon", default: "\u2014", type: "reactnode", description: "trailing icon." },\n    { prop: "shortcut", default: "\u2014", type: "reactnode", description: "keyboard shortcut hint." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/container",
+      href: "/components/container/",
+      title: "Container",
+      description: "Centered page shell with token padding and full max width.",
+      category: "components",
+      content: '`Container` centers content horizontally with optional spacing-token padding. Use it as a page or section shell.\n\n<div class="not-content my-6">\n  <ContainerPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="container" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Container padding="sizeXXLarge">\n  <Stack gap="sizeLarge">\n    <Text variant="headingMd" as="h1">Page title</Text>\n    <Text variant="bodyMd">Body</Text>\n  </Stack>\n</Container>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "Root element." },\n    { prop: "padding", default: "\u2014", type: "Spacing token", description: "Padding on all sides." }\n    ]}\n  />\n</div>',
+      searchText: 'container centered page shell with token padding and full max width. `container` centers content horizontally with optional spacing-token padding. use it as a page or section shell.\n\n<div class="not-content my-6">\n  <containerpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="container" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<container padding="sizexxlarge">\n  <stack gap="sizelarge">\n    <text variant="headingmd" as="h1">page title</text>\n    <text variant="bodymd">body</text>\n  </stack>\n</container>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "root element." },\n    { prop: "padding", default: "\u2014", type: "spacing token", description: "padding on all sides." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/dialog",
+      href: "/components/dialog/",
+      title: "Dialog",
+      description: "Modal dialog window overlay for critical tasks.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ComponentPreview client:load component="dialog" variant="lg" />\n</div>\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="dialog" />\n</div>\n\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="dialog" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Dialog>\n  <DialogTrigger asChild>\n    <Button>Open Dialog</Button>\n  </DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Confirm Action</DialogTitle>\n      <DialogDescription>\n        Are you sure you want to continue?\n      </DialogDescription>\n    </DialogHeader>\n    <DialogClose asChild>\n      <Button>Cancel</Button>\n    </DialogClose>\n  </DialogContent>\n</Dialog>\n\n<Dialog size="sm" open={isOpen} onOpenChange={setIsOpen}>\n  <DialogContent scrollable={false}>\n    {/* Content with custom scroll handling */}\n  </DialogContent>\n</Dialog>\n```\n\nContract source: `packages/react/spec/components/dialog.json` \u2014 rendered by SpecRenderer above.',
+      searchText: 'dialog modal dialog window overlay for critical tasks. \n<div class="not-content my-6">\n  <componentpreview client:load component="dialog" variant="lg" />\n</div>\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="dialog" />\n</div>\n\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="dialog" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<dialog>\n  <dialogtrigger aschild>\n    <button>open dialog</button>\n  </dialogtrigger>\n  <dialogcontent>\n    <dialogheader>\n      <dialogtitle>confirm action</dialogtitle>\n      <dialogdescription>\n        are you sure you want to continue?\n      </dialogdescription>\n    </dialogheader>\n    <dialogclose aschild>\n      <button>cancel</button>\n    </dialogclose>\n  </dialogcontent>\n</dialog>\n\n<dialog size="sm" open={isopen} onopenchange={setisopen}>\n  <dialogcontent scrollable={false}>\n    {/* content with custom scroll handling */}\n  </dialogcontent>\n</dialog>\n```\n\ncontract source: `packages/react/spec/components/dialog.json` \u2014 rendered by specrenderer above.\n'
+    },
+    {
+      slug: "components/divider",
+      href: "/components/divider/",
+      title: "Divider",
+      description: "Visual separator line between items.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <DividerPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="divider" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Divider />\n\n<Divider layout="content" align="center">\n  Or continue with\n</Divider>\n\n<Divider layout="icon" align="left" />\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "layout", default: "\\"default\\"", type: "\\"default\\" | \\"content\\" | \\"icon\\"", description: "Divider layout style." },\n    { prop: "align", default: "\\"center\\"", type: "\\"center\\" | \\"left\\" | \\"right\\"", description: "Alignment of content/icon (when layout is not default)." },\n    { prop: "children", default: "\u2014", type: "ReactNode", description: "Content to display (required when layout is \\"content\\")." }\n    ]}\n  />\n</div>',
+      searchText: 'divider visual separator line between items. <div class="not-content my-6">\n  <dividerpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="divider" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<divider />\n\n<divider layout="content" align="center">\n  or continue with\n</divider>\n\n<divider layout="icon" align="left" />\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "layout", default: "\\"default\\"", type: "\\"default\\" | \\"content\\" | \\"icon\\"", description: "divider layout style." },\n    { prop: "align", default: "\\"center\\"", type: "\\"center\\" | \\"left\\" | \\"right\\"", description: "alignment of content/icon (when layout is not default)." },\n    { prop: "children", default: "\u2014", type: "reactnode", description: "content to display (required when layout is \\"content\\")." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/drawer",
+      href: "/components/drawer/",
+      title: "Drawer",
+      description: "Slide-over panel overlay from screen edge.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <DrawerDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="drawer" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button>Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerContent>\n    <DrawerHeader>\n      <DrawerTitle>Settings</DrawerTitle>\n      <DrawerDescription>Adjust your preferences</DrawerDescription>\n    </DrawerHeader>\n    <DrawerBody>\n      {/* Drawer content */}\n    </DrawerBody>\n    <DrawerFooter>\n      <DrawerClose>Close</DrawerClose>\n    </DrawerFooter>\n  </DrawerContent>\n</Drawer>\n\n<Drawer type="inline" placement="left" size="md" showFooter>\n  {/* Drawer content */}\n</Drawer>\n```\n\n## API Reference\n\n### Drawer\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "Controlled open state." },\n    { prop: "defaultOpen", default: "\u2014", type: "boolean", description: "Uncontrolled initial open state." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "Event handler when open state changes." },\n    { prop: "type", default: "\\"overlay\\"", type: "\\"overlay\\" | \\"inline\\"", description: "Drawer display type." },\n    { prop: "placement", default: "\\"right\\"", type: "\\"left\\" | \\"right\\"", description: "Side of the screen." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Drawer width." },\n    { prop: "showFooter", default: "false", type: "boolean", description: "Shows footer section." }\n    ]}\n  />\n</div>\n### DrawerTrigger\n\nTrigger element (usually a Button).\n\n### DrawerContent\n\nDrawer panel container.\n\n### DrawerHeader\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "showClose", default: "true", type: "boolean", description: "Shows the close button." },\n    { prop: "actions", default: "\u2014", type: "ReactNode", description: "Additional header actions." }\n    ]}\n  />\n</div>\n### DrawerTitle\n\nDrawer heading element.\n\n### DrawerDescription\n\nDrawer description text.\n\n### DrawerBody\n\nScrollable content area.\n\n### DrawerFooter\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "state", default: "\u2014", type: "\\"icons\\" | \\"single\\" | \\"split\\"", description: "Footer button layout." }\n    ]}\n  />\n</div>\n### DrawerClose\n\nClose button.',
+      searchText: 'drawer slide-over panel overlay from screen edge. <div class="not-content my-6">\n  <drawerdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="drawer" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<drawer>\n  <drawertrigger aschild>\n    <button>open drawer</button>\n  </drawertrigger>\n  <drawercontent>\n    <drawerheader>\n      <drawertitle>settings</drawertitle>\n      <drawerdescription>adjust your preferences</drawerdescription>\n    </drawerheader>\n    <drawerbody>\n      {/* drawer content */}\n    </drawerbody>\n    <drawerfooter>\n      <drawerclose>close</drawerclose>\n    </drawerfooter>\n  </drawercontent>\n</drawer>\n\n<drawer type="inline" placement="left" size="md" showfooter>\n  {/* drawer content */}\n</drawer>\n```\n\n## api reference\n\n### drawer\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "controlled open state." },\n    { prop: "defaultopen", default: "\u2014", type: "boolean", description: "uncontrolled initial open state." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "event handler when open state changes." },\n    { prop: "type", default: "\\"overlay\\"", type: "\\"overlay\\" | \\"inline\\"", description: "drawer display type." },\n    { prop: "placement", default: "\\"right\\"", type: "\\"left\\" | \\"right\\"", description: "side of the screen." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "drawer width." },\n    { prop: "showfooter", default: "false", type: "boolean", description: "shows footer section." }\n    ]}\n  />\n</div>\n### drawertrigger\n\ntrigger element (usually a button).\n\n### drawercontent\n\ndrawer panel container.\n\n### drawerheader\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "showclose", default: "true", type: "boolean", description: "shows the close button." },\n    { prop: "actions", default: "\u2014", type: "reactnode", description: "additional header actions." }\n    ]}\n  />\n</div>\n### drawertitle\n\ndrawer heading element.\n\n### drawerdescription\n\ndrawer description text.\n\n### drawerbody\n\nscrollable content area.\n\n### drawerfooter\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "state", default: "\u2014", type: "\\"icons\\" | \\"single\\" | \\"split\\"", description: "footer button layout." }\n    ]}\n  />\n</div>\n### drawerclose\n\nclose button.\n\n'
+    },
+    {
+      slug: "components/dropdown",
+      href: "/components/dropdown/",
+      title: "Dropdown",
+      description: "Contextual action dropdown panel.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <DropdownDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="dropdown" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Dropdown>\n  <DropdownTrigger>\n    <Button>Options</Button>\n  </DropdownTrigger>\n  <DropdownContent>\n    <DropdownItem onSelect={() => handleEdit()}>Edit</DropdownItem>\n    <DropdownItem onSelect={() => handleDelete()}>Delete</DropdownItem>\n    <DropdownItem disabled>Disabled</DropdownItem>\n  </DropdownContent>\n</Dropdown>\n\n<Dropdown>\n  <DropdownTrigger>\n    <Button>More</Button>\n  </DropdownTrigger>\n  <DropdownContent align="end" side="bottom">\n    <DropdownItem selected>Active Item</DropdownItem>\n    <DropdownSubTrigger>Submenu</DropdownSubTrigger>\n    <DropdownSubContent>\n      <DropdownItem>Submenu Item</DropdownItem>\n    </DropdownSubContent>\n  </DropdownContent>\n</Dropdown>\n```\n\n## API Reference\n\n### Dropdown\n\nRoot component (manages open state).\n\n### DropdownTrigger\n\nTrigger element that opens the dropdown.\n\n### DropdownContent\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "align", default: "\\"start\\"", type: "\\"start\\" | \\"end\\" | \\"center\\"", description: "Alignment relative to trigger." },\n    { prop: "side", default: "\\"auto\\"", type: "\\"auto\\" | \\"top\\" | \\"bottom\\"", description: "Preferred side." },\n    { prop: "sideOffset", default: "4", type: "number", description: "Gap between trigger and panel (pixels)." }\n    ]}\n  />\n</div>\n### DropdownItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "selected", default: "false", type: "boolean", description: "Shows selected state." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables this item." }\n    ]}\n  />\n</div>\n### DropdownSubTrigger\n\nSubmenu trigger item (shows chevron).\n\n### DropdownSubContent\n\nSubmenu panel.',
+      searchText: 'dropdown contextual action dropdown panel. <div class="not-content my-6">\n  <dropdowndemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="dropdown" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<dropdown>\n  <dropdowntrigger>\n    <button>options</button>\n  </dropdowntrigger>\n  <dropdowncontent>\n    <dropdownitem onselect={() => handleedit()}>edit</dropdownitem>\n    <dropdownitem onselect={() => handledelete()}>delete</dropdownitem>\n    <dropdownitem disabled>disabled</dropdownitem>\n  </dropdowncontent>\n</dropdown>\n\n<dropdown>\n  <dropdowntrigger>\n    <button>more</button>\n  </dropdowntrigger>\n  <dropdowncontent align="end" side="bottom">\n    <dropdownitem selected>active item</dropdownitem>\n    <dropdownsubtrigger>submenu</dropdownsubtrigger>\n    <dropdownsubcontent>\n      <dropdownitem>submenu item</dropdownitem>\n    </dropdownsubcontent>\n  </dropdowncontent>\n</dropdown>\n```\n\n## api reference\n\n### dropdown\n\nroot component (manages open state).\n\n### dropdowntrigger\n\ntrigger element that opens the dropdown.\n\n### dropdowncontent\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "align", default: "\\"start\\"", type: "\\"start\\" | \\"end\\" | \\"center\\"", description: "alignment relative to trigger." },\n    { prop: "side", default: "\\"auto\\"", type: "\\"auto\\" | \\"top\\" | \\"bottom\\"", description: "preferred side." },\n    { prop: "sideoffset", default: "4", type: "number", description: "gap between trigger and panel (pixels)." }\n    ]}\n  />\n</div>\n### dropdownitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "selected", default: "false", type: "boolean", description: "shows selected state." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables this item." }\n    ]}\n  />\n</div>\n### dropdownsubtrigger\n\nsubmenu trigger item (shows chevron).\n\n### dropdownsubcontent\n\nsubmenu panel.\n\n'
+    },
+    {
+      slug: "components/field",
+      href: "/components/field/",
+      title: "Field",
+      description: "Form field container wrapping label, control, error, and helper text.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <FieldPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="field" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Field size="md">\n  <FieldLabel>Email address</FieldLabel>\n  <Input type="email" placeholder="you@example.com" />\n  <FieldHint>We\'ll never share your email.</FieldHint>\n</Field>\n\n<Field size="lg">\n  <FieldLabel>Password <FieldRequired /></FieldLabel>\n  <Input type="password" error={hasError} />\n  {hasError && <FieldError>Password is required</FieldError>}\n</Field>\n```\n\n## API Reference\n\n### Field\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Field size tier (affects label and messages)." }\n    ]}\n  />\n</div>\n### FieldLabel\n\nLabel element for the field. Accepts `size` prop (defaults from Field context).\n\n### FieldRequired\n\nVisual required indicator (asterisk).\n\n### FieldHint\n\nHelper text below the input.\n\n### FieldError\n\nError message below the input.',
+      searchText: 'field form field container wrapping label, control, error, and helper text. <div class="not-content my-6">\n  <fieldpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="field" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<field size="md">\n  <fieldlabel>email address</fieldlabel>\n  <input type="email" placeholder="you@example.com" />\n  <fieldhint>we\'ll never share your email.</fieldhint>\n</field>\n\n<field size="lg">\n  <fieldlabel>password <fieldrequired /></fieldlabel>\n  <input type="password" error={haserror} />\n  {haserror && <fielderror>password is required</fielderror>}\n</field>\n```\n\n## api reference\n\n### field\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "field size tier (affects label and messages)." }\n    ]}\n  />\n</div>\n### fieldlabel\n\nlabel element for the field. accepts `size` prop (defaults from field context).\n\n### fieldrequired\n\nvisual required indicator (asterisk).\n\n### fieldhint\n\nhelper text below the input.\n\n### fielderror\n\nerror message below the input.\n\n'
+    },
+    {
+      slug: "components/footer",
+      href: "/components/footer/",
+      title: "Footer",
+      description: "Site footer with brand, navigation groups, locale, and social links.",
+      category: "components",
+      content: '`Footer` is a compound layout for marketing and app footers \u2014 brand, link groups, meta row, locale, and social icons.\n\n<div class="not-content my-6">\n  <FooterPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="footer" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Footer>\n  <FooterBrand>RefineUI</FooterBrand>\n  <FooterNav>\n    <FooterGroup>\n      <FooterGroupLabel>Product</FooterGroupLabel>\n      <FooterLink href="/components/">Components</FooterLink>\n    </FooterGroup>\n  </FooterNav>\n  <FooterMeta>\n    <FooterCopyright>\xA9 Pelagornis</FooterCopyright>\n  </FooterMeta>\n</Footer>\n```\n\n## Parts\n\n`FooterBrand`, `FooterNav`, `FooterGroup`, `FooterGroupLabel`, `FooterLink`, `FooterExplore`, `FooterSocial`, `FooterLocale`, `FooterMeta`, `FooterMetaEnd`, `FooterCopyright`.',
+      searchText: 'footer site footer with brand, navigation groups, locale, and social links. `footer` is a compound layout for marketing and app footers \u2014 brand, link groups, meta row, locale, and social icons.\n\n<div class="not-content my-6">\n  <footerpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="footer" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<footer>\n  <footerbrand>refineui</footerbrand>\n  <footernav>\n    <footergroup>\n      <footergrouplabel>product</footergrouplabel>\n      <footerlink href="/components/">components</footerlink>\n    </footergroup>\n  </footernav>\n  <footermeta>\n    <footercopyright>\xA9 pelagornis</footercopyright>\n  </footermeta>\n</footer>\n```\n\n## parts\n\n`footerbrand`, `footernav`, `footergroup`, `footergrouplabel`, `footerlink`, `footerexplore`, `footersocial`, `footerlocale`, `footermeta`, `footermetaend`, `footercopyright`.\n'
+    },
+    {
+      slug: "components/grid",
+      href: "/components/grid/",
+      title: "Grid",
+      description: "CSS grid with equal columns or Foundation min-item auto-fit.",
+      category: "components",
+      content: '`Grid` places children in columns. Use fixed `columns`, or `minItem` with a Foundation size for fluid auto-fit grids.\n\n<div class="not-content my-6">\n  <GridPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="grid" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Grid columns={3} gap="sizeMedium">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</Grid>\n\n<Grid minItem="foundationSize2560" gap="sizeLarge">\n  <GridItem>Card</GridItem>\n  <GridItem>Card</GridItem>\n</Grid>\n```\n\n## API Reference\n\n### Grid\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "Root element." },\n    { prop: "columns", default: "1", type: "number", description: "Equal column count (ignored when `minItem` is set)." },\n    { prop: "minItem", default: "\u2014", type: "Foundation size name", description: "Auto-fit min track size." },\n    { prop: "gap", default: "\\"sizeNone\\"", type: "Spacing token", description: "Row and column gap." },\n    { prop: "columnGap", default: "\u2014", type: "Spacing token", description: "Column gap override." },\n    { prop: "rowGap", default: "\u2014", type: "Spacing token", description: "Row gap override." },\n    { prop: "align", default: "\u2014", type: "Align token", description: "Items alignment." },\n    { prop: "justify", default: "\u2014", type: "Justify token", description: "Content justification." }\n    ]}\n  />\n</div>\n### GridItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "span", default: "1", type: "number", description: "Column span." },\n    { prop: "rowSpan", default: "\u2014", type: "number", description: "Row span." }\n    ]}\n  />\n</div>',
+      searchText: 'grid css grid with equal columns or foundation min-item auto-fit. `grid` places children in columns. use fixed `columns`, or `minitem` with a foundation size for fluid auto-fit grids.\n\n<div class="not-content my-6">\n  <gridpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="grid" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<grid columns={3} gap="sizemedium">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</grid>\n\n<grid minitem="foundationsize2560" gap="sizelarge">\n  <griditem>card</griditem>\n  <griditem>card</griditem>\n</grid>\n```\n\n## api reference\n\n### grid\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "root element." },\n    { prop: "columns", default: "1", type: "number", description: "equal column count (ignored when `minitem` is set)." },\n    { prop: "minitem", default: "\u2014", type: "foundation size name", description: "auto-fit min track size." },\n    { prop: "gap", default: "\\"sizenone\\"", type: "spacing token", description: "row and column gap." },\n    { prop: "columngap", default: "\u2014", type: "spacing token", description: "column gap override." },\n    { prop: "rowgap", default: "\u2014", type: "spacing token", description: "row gap override." },\n    { prop: "align", default: "\u2014", type: "align token", description: "items alignment." },\n    { prop: "justify", default: "\u2014", type: "justify token", description: "content justification." }\n    ]}\n  />\n</div>\n### griditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "span", default: "1", type: "number", description: "column span." },\n    { prop: "rowspan", default: "\u2014", type: "number", description: "row span." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/index",
+      href: "/components/index/",
+      title: "Components",
+      description: "Live catalog of RefineUI React components in A\u2013Z order.",
+      category: "components",
+      content: '<div class="not-content">\n  <ComponentCatalog client:load />\n</div>',
+      searchText: 'components live catalog of refineui react components in a\u2013z order. \n<div class="not-content">\n  <componentcatalog client:load />\n</div>\n'
+    },
+    {
+      slug: "components/input-otp",
+      href: "/components/input-otp/",
+      title: "Input OTP",
+      description: "One-time password code input field.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <InputOTPDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="input-otp" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n  <InputOTPSlot index={0} />\n  <InputOTPSlot index={1} />\n  <InputOTPSlot index={2} />\n  <InputOTPSlot index={3} />\n  <InputOTPSlot index={4} />\n  <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n  maxLength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="Enter verification code"\n/>\n```\n\n## API Reference\n\n### InputOTP\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled OTP string." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when value changes." },\n    { prop: "maxLength", default: "\u2014", type: "number", description: "Number of slots (required)." },\n    { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "Per-character allowlist (default: digits only)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Control size tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." },\n    { prop: "autoFocus", default: "false", type: "boolean", description: "Auto-focus on mount." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the control." }\n    ]}\n  />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "Zero-based slot index (required)." }\n    ]}\n  />\n</div>',
+      searchText: 'input otp one-time password code input field. <div class="not-content my-6">\n  <inputotpdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="input-otp" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n  <inputotpslot index={0} />\n  <inputotpslot index={1} />\n  <inputotpslot index={2} />\n  <inputotpslot index={3} />\n  <inputotpslot index={4} />\n  <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n  maxlength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="enter verification code"\n/>\n```\n\n## api reference\n\n### inputotp\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled otp string." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when value changes." },\n    { prop: "maxlength", default: "\u2014", type: "number", description: "number of slots (required)." },\n    { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "per-character allowlist (default: digits only)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "control size tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." },\n    { prop: "autofocus", default: "false", type: "boolean", description: "auto-focus on mount." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the control." }\n    ]}\n  />\n</div>\n### inputotpslot\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "zero-based slot index (required)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/input",
+      href: "/components/input/",
+      title: "Input",
+      description: "Text input for single-line text entry.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <InputPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="input" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="input" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Input placeholder="Enter your name" />\n\n<Input\n  size="lg"\n  error={hasError}\n  value={email}\n  onChange={(e) => setEmail(e.target.value)}\n/>\n\n<Input fullWidth placeholder="Full width input" />\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Input size tier." },\n    { prop: "error", default: "false", type: "boolean", description: "Shows error state styling." },\n    { prop: "success", default: "false", type: "boolean", description: "Shows success state styling." },\n    { prop: "fullWidth", default: "false", type: "boolean", description: "Stretches to full parent width." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'input text input for single-line text entry. <div class="not-content my-6">\n  <inputpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="input" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="input" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<input placeholder="enter your name" />\n\n<input\n  size="lg"\n  error={haserror}\n  value={email}\n  onchange={(e) => setemail(e.target.value)}\n/>\n\n<input fullwidth placeholder="full width input" />\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "input size tier." },\n    { prop: "error", default: "false", type: "boolean", description: "shows error state styling." },\n    { prop: "success", default: "false", type: "boolean", description: "shows success state styling." },\n    { prop: "fullwidth", default: "false", type: "boolean", description: "stretches to full parent width." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/label",
+      href: "/components/label/",
+      title: "Label",
+      description: "Text label control for form fields.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <LabelPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="label" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Label htmlFor="email">Email address</Label>\n\n<Label htmlFor="password" required>\n  Password\n</Label>\n\n<Label size="lg" disabled>\n  Disabled Label\n</Label>\n\n<Label htmlFor="name">\n  Name <LabelRequired />\n</Label>\n```\n\n## API Reference\n\n### Label\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "required", default: "false", type: "boolean", description: "Convenience prop that appends LabelRequired." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Label size tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Shows disabled styling." },\n    { prop: "htmlFor", default: "\u2014", type: "string", description: "Associates label with form control." }\n    ]}\n  />\n</div>\n### LabelRequired\n\nVisual required indicator (asterisk). Use when composing labels manually.',
+      searchText: 'label text label control for form fields. <div class="not-content my-6">\n  <labelpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="label" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<label htmlfor="email">email address</label>\n\n<label htmlfor="password" required>\n  password\n</label>\n\n<label size="lg" disabled>\n  disabled label\n</label>\n\n<label htmlfor="name">\n  name <labelrequired />\n</label>\n```\n\n## api reference\n\n### label\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "required", default: "false", type: "boolean", description: "convenience prop that appends labelrequired." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "label size tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "shows disabled styling." },\n    { prop: "htmlfor", default: "\u2014", type: "string", description: "associates label with form control." }\n    ]}\n  />\n</div>\n### labelrequired\n\nvisual required indicator (asterisk). use when composing labels manually.\n\n'
+    },
+    {
+      slug: "components/link",
+      href: "/components/link/",
+      title: "Link",
+      description: "Interactive text hyperlink control.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <LinkPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="link" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="link" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Link href="/docs">Documentation</Link>\n\n<Link href="https://example.com" target="_blank">\n  External Link\n</Link>\n\n<Link href="https://example.com" showExternalIcon={false}>\n  No Icon\n</Link>\n\n<Link href="/disabled" disabled>\n  Disabled Link\n</Link>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "showExternalIcon", default: "\u2014", type: "boolean", description: "When true, shows external-link icon. Shown automatically for `target=\\"_blank\\"`. Set false to hide." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables link (sets `aria-disabled` and blocks pointer events)." },\n    { prop: "href", default: "\u2014", type: "string", description: "Link destination URL." }\n    ]}\n  />\n</div>',
+      searchText: 'link interactive text hyperlink control. <div class="not-content my-6">\n  <linkpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="link" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="link" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<link href="/docs">documentation</link>\n\n<link href="https://example.com" target="_blank">\n  external link\n</link>\n\n<link href="https://example.com" showexternalicon={false}>\n  no icon\n</link>\n\n<link href="/disabled" disabled>\n  disabled link\n</link>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "showexternalicon", default: "\u2014", type: "boolean", description: "when true, shows external-link icon. shown automatically for `target=\\"_blank\\"`. set false to hide." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables link (sets `aria-disabled` and blocks pointer events)." },\n    { prop: "href", default: "\u2014", type: "string", description: "link destination url." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/menu",
+      href: "/components/menu/",
+      title: "Menu",
+      description: "Action menu dropdown with list items.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <MenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuItem onSelect={() => handleNew()}>\n        New File\n      </MenuItem>\n      <MenuItem onSelect={() => handleOpen()}>\n        Open\n      </MenuItem>\n      <MenuDivider />\n      <MenuItem state="disabled">\n        Save (disabled)\n      </MenuItem>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuSection>\n        <MenuItem\n          startIcon={<Icon />}\n          endIcon={<Badge />}\n          description="Description text"\n          shortcut="\u2318N"\n        >\n          Menu Item\n        </MenuItem>\n        <MenuSubTrigger>Submenu</MenuSubTrigger>\n        <MenuSubContent>\n          <MenuItem>Submenu Item</MenuItem>\n        </MenuSubContent>\n      </MenuSection>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n```\n\n## API Reference\n\n### Menu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "Positioning configuration." }\n    ]}\n  />\n</div>\n### MenuPopover\n\nPopover container for the menu.\n\n### MenuList\n\nList container for menu items.\n\n### MenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n    { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "Keyboard shortcut hint." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n    { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "Trailing icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n    ]}\n  />\n</div>\n### MenuSection\n\nGroups related menu items.\n\n### MenuDivider\n\nVisual separator between items.\n\n### MenuSubTrigger\n\nSubmenu trigger item (shows chevron).\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "Secondary description text." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "Leading icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "Visual state." }\n    ]}\n  />\n</div>\n### MenuSubContent\n\nSubmenu panel.',
+      searchText: 'menu action menu dropdown with list items. <div class="not-content my-6">\n  <menupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<menu>\n  <menupopover>\n    <menulist>\n      <menuitem onselect={() => handlenew()}>\n        new file\n      </menuitem>\n      <menuitem onselect={() => handleopen()}>\n        open\n      </menuitem>\n      <menudivider />\n      <menuitem state="disabled">\n        save (disabled)\n      </menuitem>\n    </menulist>\n  </menupopover>\n</menu>\n\n<menu>\n  <menupopover>\n    <menulist>\n      <menusection>\n        <menuitem\n          starticon={<icon />}\n          endicon={<badge />}\n          description="description text"\n          shortcut="\u2318n"\n        >\n          menu item\n        </menuitem>\n        <menusubtrigger>submenu</menusubtrigger>\n        <menusubcontent>\n          <menuitem>submenu item</menuitem>\n        </menusubcontent>\n      </menusection>\n    </menulist>\n  </menupopover>\n</menu>\n```\n\n## api reference\n\n### menu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "menupositioning", description: "positioning configuration." }\n    ]}\n  />\n</div>\n### menupopover\n\npopover container for the menu.\n\n### menulist\n\nlist container for menu items.\n\n### menuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n    { prop: "shortcut", default: "\u2014", type: "reactnode", description: "keyboard shortcut hint." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n    { prop: "endicon", default: "\u2014", type: "reactnode", description: "trailing icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n    ]}\n  />\n</div>\n### menusection\n\ngroups related menu items.\n\n### menudivider\n\nvisual separator between items.\n\n### menusubtrigger\n\nsubmenu trigger item (shows chevron).\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "secondary description text." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "leading icon." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "visual state." }\n    ]}\n  />\n</div>\n### menusubcontent\n\nsubmenu panel.\n\n'
+    },
+    {
+      slug: "components/navigation-menu",
+      href: "/components/navigation-menu/",
+      title: "Navigation Menu",
+      description: "Top-level responsive header navigation menu.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <NavigationMenuPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/" active>\n        Home\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n        <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/about">About</NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API Reference\n\n### NavigationMenu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled open item value (empty string = closed)." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial open item." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when open item changes." },\n    { prop: "delayDuration", default: "\u2014", type: "number", description: "Delay (ms) before opening on pointer enter." },\n    { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "Delay when moving between items while open." },\n    { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "Accessible name for the navigation landmark." }\n    ]}\n  />\n</div>\n### NavigationMenuList\n\nList of navigation items.\n\n### NavigationMenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Stable id for open state (auto-generated when omitted)." }\n    ]}\n  />\n</div>\n### NavigationMenuTrigger\n\nTrigger button for dropdown content.\n\n### NavigationMenuContent\n\nDropdown panel content.\n\n### NavigationMenuLink\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "Marks the current page (`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### NavigationMenuIndicator\n\nActive item indicator (visual underline).',
+      searchText: 'navigation menu top-level responsive header navigation menu. <div class="not-content my-6">\n  <navigationmenupreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="navigation-menu" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<navigationmenu>\n  <navigationmenulist>\n    <navigationmenuitem>\n      <navigationmenulink href="/" active>\n        home\n      </navigationmenulink>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenutrigger>products</navigationmenutrigger>\n      <navigationmenucontent>\n        <navigationmenulink href="/products/web">web</navigationmenulink>\n        <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n      </navigationmenucontent>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenulink href="/about">about</navigationmenulink>\n    </navigationmenuitem>\n  </navigationmenulist>\n</navigationmenu>\n```\n\n## api reference\n\n### navigationmenu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled open item value (empty string = closed)." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial open item." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when open item changes." },\n    { prop: "delayduration", default: "\u2014", type: "number", description: "delay (ms) before opening on pointer enter." },\n    { prop: "skipdelayduration", default: "\u2014", type: "number", description: "delay when moving between items while open." },\n    { prop: "aria-label", default: "\\"main\\"", type: "string", description: "accessible name for the navigation landmark." }\n    ]}\n  />\n</div>\n### navigationmenulist\n\nlist of navigation items.\n\n### navigationmenuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "stable id for open state (auto-generated when omitted)." }\n    ]}\n  />\n</div>\n### navigationmenutrigger\n\ntrigger button for dropdown content.\n\n### navigationmenucontent\n\ndropdown panel content.\n\n### navigationmenulink\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "marks the current page (`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### navigationmenuindicator\n\nactive item indicator (visual underline).\n\n'
+    },
+    {
+      slug: "components/pagination",
+      href: "/components/pagination/",
+      title: "Pagination",
+      description: "Navigation across multi-page datasets.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <PaginationDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="pagination" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Pagination>\n  <PaginationContent>\n    <PaginationItem>\n      <PaginationPrevious href="#" />\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href="#" isActive>1</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href="#">2</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href="#">3</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationEllipsis />\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href="#">10</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationNext href="#" />\n    </PaginationItem>\n  </PaginationContent>\n</Pagination>\n```\n\n## API Reference\n\n### Pagination\n\nRoot container (`<nav>` element).\n\n### PaginationContent\n\nList of pagination items.\n\n### PaginationItem\n\nList item wrapper.\n\n### PaginationLink\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "isActive", default: "false", type: "boolean", description: "Marks the current page." }\n    ]}\n  />\n</div>\n### PaginationPrevious\n\nPrevious page button.\n\n### PaginationNext\n\nNext page button.\n\n### PaginationEllipsis\n\nIndicator for skipped pages.',
+      searchText: 'pagination navigation across multi-page datasets. <div class="not-content my-6">\n  <paginationdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="pagination" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<pagination>\n  <paginationcontent>\n    <paginationitem>\n      <paginationprevious href="#" />\n    </paginationitem>\n    <paginationitem>\n      <paginationlink href="#" isactive>1</paginationlink>\n    </paginationitem>\n    <paginationitem>\n      <paginationlink href="#">2</paginationlink>\n    </paginationitem>\n    <paginationitem>\n      <paginationlink href="#">3</paginationlink>\n    </paginationitem>\n    <paginationitem>\n      <paginationellipsis />\n    </paginationitem>\n    <paginationitem>\n      <paginationlink href="#">10</paginationlink>\n    </paginationitem>\n    <paginationitem>\n      <paginationnext href="#" />\n    </paginationitem>\n  </paginationcontent>\n</pagination>\n```\n\n## api reference\n\n### pagination\n\nroot container (`<nav>` element).\n\n### paginationcontent\n\nlist of pagination items.\n\n### paginationitem\n\nlist item wrapper.\n\n### paginationlink\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "isactive", default: "false", type: "boolean", description: "marks the current page." }\n    ]}\n  />\n</div>\n### paginationprevious\n\nprevious page button.\n\n### paginationnext\n\nnext page button.\n\n### paginationellipsis\n\nindicator for skipped pages.\n\n'
+    },
+    {
+      slug: "components/popover",
+      href: "/components/popover/",
+      title: "Popover",
+      description: "Floating content panel relative to a trigger.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <PopOverDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="popover" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Popover>\n  <PopoverTrigger>\n    <Button>Show Info</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Additional information here</p>\n  </PopoverContent>\n</Popover>\n\n<Popover open={isOpen} onOpenChange={setIsOpen}>\n  <PopoverTrigger>\n    <Button>Toggle</Button>\n  </PopoverTrigger>\n  <PopoverContent placement="top" align="center">\n    <p>Popover content</p>\n  </PopoverContent>\n</Popover>\n```\n\n## API Reference\n\n### Popover\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "Controlled open state." },\n    { prop: "defaultOpen", default: "\u2014", type: "boolean", description: "Uncontrolled initial open state." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "Event handler when open state changes." }\n    ]}\n  />\n</div>\n### PopoverTrigger\n\nTrigger element that opens the popover.\n\n### PopoverContent\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "placement", default: "\\"bottom\\"", type: "\\"top\\" | \\"bottom\\" | \\"left\\" | \\"right\\"", description: "Position relative to trigger." },\n    { prop: "align", default: "\\"center\\"", type: "\\"start\\" | \\"center\\" | \\"end\\"", description: "Alignment along the edge." }\n    ]}\n  />\n</div>',
+      searchText: 'popover floating content panel relative to a trigger. <div class="not-content my-6">\n  <popoverdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="popover" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<popover>\n  <popovertrigger>\n    <button>show info</button>\n  </popovertrigger>\n  <popovercontent>\n    <p>additional information here</p>\n  </popovercontent>\n</popover>\n\n<popover open={isopen} onopenchange={setisopen}>\n  <popovertrigger>\n    <button>toggle</button>\n  </popovertrigger>\n  <popovercontent placement="top" align="center">\n    <p>popover content</p>\n  </popovercontent>\n</popover>\n```\n\n## api reference\n\n### popover\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "controlled open state." },\n    { prop: "defaultopen", default: "\u2014", type: "boolean", description: "uncontrolled initial open state." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "event handler when open state changes." }\n    ]}\n  />\n</div>\n### popovertrigger\n\ntrigger element that opens the popover.\n\n### popovercontent\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "placement", default: "\\"bottom\\"", type: "\\"top\\" | \\"bottom\\" | \\"left\\" | \\"right\\"", description: "position relative to trigger." },\n    { prop: "align", default: "\\"center\\"", type: "\\"start\\" | \\"center\\" | \\"end\\"", description: "alignment along the edge." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/progress-stepper",
+      href: "/components/progress-stepper/",
+      title: "Progress Stepper",
+      description: "Multi-step process completion indicator.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ProgressStepperPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="progress-stepper" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<ProgressStepper value={currentStep} onValueChange={setCurrentStep}>\n  <ProgressStepperList>\n    <ProgressStepperItem value={1}>\n      <ProgressStepperMarker />\n      <ProgressStepperLabel>Account</ProgressStepperLabel>\n    </ProgressStepperItem>\n    <ProgressStepperItem value={2}>\n      <ProgressStepperMarker />\n      <ProgressStepperLabel>Profile</ProgressStepperLabel>\n    </ProgressStepperItem>\n    <ProgressStepperItem value={3}>\n      <ProgressStepperMarker />\n      <ProgressStepperLabel>Complete</ProgressStepperLabel>\n    </ProgressStepperItem>\n  </ProgressStepperList>\n</ProgressStepper>\n```\n\n## API Reference\n\n### ProgressStepper\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "Controlled active step value." },\n    { prop: "defaultValue", default: "\u2014", type: "number", description: "Uncontrolled initial step." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: number) => void", description: "Event handler when step changes." }\n    ]}\n  />\n</div>\n### ProgressStepperItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "Step identity (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables this step." }\n    ]}\n  />\n</div>\n### ProgressStepperMarker\n\nStep indicator (circle/checkmark).\n\n### ProgressStepperLabel\n\nStep label text.',
+      searchText: 'progress stepper multi-step process completion indicator. <div class="not-content my-6">\n  <progressstepperpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="progress-stepper" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<progressstepper value={currentstep} onvaluechange={setcurrentstep}>\n  <progressstepperlist>\n    <progressstepperitem value={1}>\n      <progresssteppermarker />\n      <progressstepperlabel>account</progressstepperlabel>\n    </progressstepperitem>\n    <progressstepperitem value={2}>\n      <progresssteppermarker />\n      <progressstepperlabel>profile</progressstepperlabel>\n    </progressstepperitem>\n    <progressstepperitem value={3}>\n      <progresssteppermarker />\n      <progressstepperlabel>complete</progressstepperlabel>\n    </progressstepperitem>\n  </progressstepperlist>\n</progressstepper>\n```\n\n## api reference\n\n### progressstepper\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "controlled active step value." },\n    { prop: "defaultvalue", default: "\u2014", type: "number", description: "uncontrolled initial step." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: number) => void", description: "event handler when step changes." }\n    ]}\n  />\n</div>\n### progressstepperitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "step identity (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables this step." }\n    ]}\n  />\n</div>\n### progresssteppermarker\n\nstep indicator (circle/checkmark).\n\n### progressstepperlabel\n\nstep label text.\n\n'
+    },
+    {
+      slug: "components/progress",
+      href: "/components/progress/",
+      title: "Progress",
+      description: "Visual bar indicating completion percentage.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ProgressPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="progress" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Progress value={60} max={100} size="lg" />\n\n<Progress value={uploadedBytes} max={totalBytes} />\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "Current progress value (required)." },\n    { prop: "max", default: "100", type: "number", description: "Maximum value." },\n    { prop: "size", default: "\u2014", type: "\\"sm\\" | \\"lg\\"", description: "Bar thickness: Small (2px) or Large (4px)." }\n    ]}\n  />\n</div>',
+      searchText: 'progress visual bar indicating completion percentage. <div class="not-content my-6">\n  <progresspreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="progress" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<progress value={60} max={100} size="lg" />\n\n<progress value={uploadedbytes} max={totalbytes} />\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "current progress value (required)." },\n    { prop: "max", default: "100", type: "number", description: "maximum value." },\n    { prop: "size", default: "\u2014", type: "\\"sm\\" | \\"lg\\"", description: "bar thickness: small (2px) or large (4px)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/radio",
+      href: "/components/radio/",
+      title: "Radio",
+      description: "Single selection from a group of options.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <RadioPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="radio" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="radio" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Radio name="plan" value="basic" label="Basic Plan" />\n\n<Radio\n  name="plan"\n  value="pro"\n  label="Pro Plan"\n  description="Includes advanced features"\n  checked={selectedPlan === "pro"}\n  onChange={(e) => setSelectedPlan(e.target.value)}\n/>\n\n<Radio\n  name="plan"\n  value="enterprise"\n  label="Enterprise"\n  allowUncheck\n/>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "Radio button label text." },\n    { prop: "description", default: "\u2014", type: "string", description: "Optional description below the label." },\n    { prop: "allowUncheck", default: "false", type: "boolean", description: "Allows unchecking a selected radio." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "Controlled checked state." },\n    { prop: "value", default: "\u2014", type: "string", description: "Value for form submission." },\n    { prop: "name", default: "\u2014", type: "string", description: "Name for grouping radio buttons." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'radio single selection from a group of options. <div class="not-content my-6">\n  <radiopreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="radio" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="radio" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<radio name="plan" value="basic" label="basic plan" />\n\n<radio\n  name="plan"\n  value="pro"\n  label="pro plan"\n  description="includes advanced features"\n  checked={selectedplan === "pro"}\n  onchange={(e) => setselectedplan(e.target.value)}\n/>\n\n<radio\n  name="plan"\n  value="enterprise"\n  label="enterprise"\n  allowuncheck\n/>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "radio button label text." },\n    { prop: "description", default: "\u2014", type: "string", description: "optional description below the label." },\n    { prop: "allowuncheck", default: "false", type: "boolean", description: "allows unchecking a selected radio." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "controlled checked state." },\n    { prop: "value", default: "\u2014", type: "string", description: "value for form submission." },\n    { prop: "name", default: "\u2014", type: "string", description: "name for grouping radio buttons." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/resizable",
+      href: "/components/resizable/",
+      title: "Resizable",
+      description: "Split panel layout with drag handles.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ResizableDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="resizable" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<ResizablePanelGroup orientation="horizontal">\n  <ResizablePanel defaultSize={50} minSize={30}>\n    Left panel\n  </ResizablePanel>\n  <ResizableHandle />\n  <ResizablePanel defaultSize={50} minSize={30}>\n    Right panel\n  </ResizablePanel>\n</ResizablePanelGroup>\n\n<ResizablePanelGroup orientation="vertical" onLayout={(sizes) => console.log(sizes)}>\n  <ResizablePanel size={topPanelSize} onResize={setTopPanelSize}>\n    Top\n  </ResizablePanel>\n  <ResizableHandle withHandle />\n  <ResizablePanel>\n    Bottom\n  </ResizablePanel>\n</ResizablePanelGroup>\n```\n\n## API Reference\n\n### ResizablePanelGroup\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "orientation", default: "\\"horizontal\\"", type: "\\"horizontal\\" | \\"vertical\\"", description: "Split direction." },\n    { prop: "onLayout", default: "\u2014", type: "(sizes: number[]) => void", description: "Fires after resize with panel sizes (percentages summing to ~100)." }\n    ]}\n  />\n</div>\n### ResizablePanel\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "defaultSize", default: "50", type: "number", description: "Initial size as percentage." },\n    { prop: "minSize", default: "10", type: "number", description: "Minimum size percentage." },\n    { prop: "maxSize", default: "100", type: "number", description: "Maximum size percentage." },\n    { prop: "size", default: "\u2014", type: "number", description: "Controlled size percentage." },\n    { prop: "onResize", default: "\u2014", type: "(size: number) => void", description: "Event handler when panel resizes." }\n    ]}\n  />\n</div>\n### ResizableHandle\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "withHandle", default: "false", type: "boolean", description: "Shows grip affordance on separator." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables resizing." }\n    ]}\n  />\n</div>',
+      searchText: 'resizable split panel layout with drag handles. <div class="not-content my-6">\n  <resizabledemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="resizable" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<resizablepanelgroup orientation="horizontal">\n  <resizablepanel defaultsize={50} minsize={30}>\n    left panel\n  </resizablepanel>\n  <resizablehandle />\n  <resizablepanel defaultsize={50} minsize={30}>\n    right panel\n  </resizablepanel>\n</resizablepanelgroup>\n\n<resizablepanelgroup orientation="vertical" onlayout={(sizes) => console.log(sizes)}>\n  <resizablepanel size={toppanelsize} onresize={settoppanelsize}>\n    top\n  </resizablepanel>\n  <resizablehandle withhandle />\n  <resizablepanel>\n    bottom\n  </resizablepanel>\n</resizablepanelgroup>\n```\n\n## api reference\n\n### resizablepanelgroup\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "orientation", default: "\\"horizontal\\"", type: "\\"horizontal\\" | \\"vertical\\"", description: "split direction." },\n    { prop: "onlayout", default: "\u2014", type: "(sizes: number[]) => void", description: "fires after resize with panel sizes (percentages summing to ~100)." }\n    ]}\n  />\n</div>\n### resizablepanel\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "defaultsize", default: "50", type: "number", description: "initial size as percentage." },\n    { prop: "minsize", default: "10", type: "number", description: "minimum size percentage." },\n    { prop: "maxsize", default: "100", type: "number", description: "maximum size percentage." },\n    { prop: "size", default: "\u2014", type: "number", description: "controlled size percentage." },\n    { prop: "onresize", default: "\u2014", type: "(size: number) => void", description: "event handler when panel resizes." }\n    ]}\n  />\n</div>\n### resizablehandle\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "withhandle", default: "false", type: "boolean", description: "shows grip affordance on separator." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables resizing." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/scroll-area",
+      href: "/components/scroll-area/",
+      title: "Scroll Area",
+      description: "Custom styled scrollbar container.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ScrollAreaDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="scroll-area" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<ScrollArea className="h-80">\n  <ScrollAreaViewport>\n    {/* Long content */}\n  </ScrollAreaViewport>\n  <ScrollAreaScrollbar orientation="vertical">\n    <ScrollAreaThumb />\n  </ScrollAreaScrollbar>\n</ScrollArea>\n\n<ScrollArea type="always">\n  <ScrollAreaViewport>\n    {/* Custom viewport */}\n  </ScrollAreaViewport>\n  <ScrollAreaScrollbar orientation="vertical">\n    <ScrollAreaThumb />\n  </ScrollAreaScrollbar>\n  <ScrollAreaScrollbar orientation="horizontal">\n    <ScrollAreaThumb />\n  </ScrollAreaScrollbar>\n</ScrollArea>\n```\n\n## API Reference\n\n### ScrollArea\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "type", default: "\\"hover\\"", type: "\\"hover\\" | \\"always\\"", description: "When the custom scrollbar is visible." }\n    ]}\n  />\n</div>\n### ScrollAreaViewport\n\nViewport container (scrollable area).\n\nAn axis becomes scrollable only when its `ScrollAreaScrollbar` is declared, so a horizontal-only area lets vertical wheel gestures scroll the page instead of swallowing them. The viewport is a tab stop only while its content actually overflows.\n\n### ScrollAreaScrollbar\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "orientation", default: "\\"vertical\\"", type: "\\"vertical\\" | \\"horizontal\\"", description: "Scrollbar direction." }\n    ]}\n  />\n</div>\n### ScrollAreaThumb\n\nScrollbar thumb (draggable handle).',
+      searchText: 'scroll area custom styled scrollbar container. <div class="not-content my-6">\n  <scrollareademo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="scroll-area" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<scrollarea classname="h-80">\n  <scrollareaviewport>\n    {/* long content */}\n  </scrollareaviewport>\n  <scrollareascrollbar orientation="vertical">\n    <scrollareathumb />\n  </scrollareascrollbar>\n</scrollarea>\n\n<scrollarea type="always">\n  <scrollareaviewport>\n    {/* custom viewport */}\n  </scrollareaviewport>\n  <scrollareascrollbar orientation="vertical">\n    <scrollareathumb />\n  </scrollareascrollbar>\n  <scrollareascrollbar orientation="horizontal">\n    <scrollareathumb />\n  </scrollareascrollbar>\n</scrollarea>\n```\n\n## api reference\n\n### scrollarea\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "type", default: "\\"hover\\"", type: "\\"hover\\" | \\"always\\"", description: "when the custom scrollbar is visible." }\n    ]}\n  />\n</div>\n### scrollareaviewport\n\nviewport container (scrollable area).\n\nan axis becomes scrollable only when its `scrollareascrollbar` is declared, so a horizontal-only area lets vertical wheel gestures scroll the page instead of swallowing them. the viewport is a tab stop only while its content actually overflows.\n\n### scrollareascrollbar\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "orientation", default: "\\"vertical\\"", type: "\\"vertical\\" | \\"horizontal\\"", description: "scrollbar direction." }\n    ]}\n  />\n</div>\n### scrollareathumb\n\nscrollbar thumb (draggable handle).\n\n'
+    },
+    {
+      slug: "components/search-field",
+      href: "/components/search-field/",
+      title: "Search Field",
+      description: "Input control tuned for query entry with clear action.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SearchFieldPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="search-field" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<SearchField value={query} onValueChange={setQuery} />\n\n<SearchField\n  value={searchTerm}\n  onValueChange={setSearchTerm}\n  appearance="filled"\n  aria-label="Search products"\n/>\n\n<SearchField appearance="plain" defaultValue="initial query" />\n```\n\n## API Reference\n\n### SearchField\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled query string." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial query." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when query changes." },\n    { prop: "appearance", default: "\\"filled\\"", type: "\\"filled\\" | \\"plain\\"", description: "Visual style: filled (standalone) or plain (for composed surfaces)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "Accessible name for the search input." }\n    ]}\n  />\n</div>\n### SearchFieldIcon\n\nSearch icon slot (defaults to search glyph).\n\n### SearchFieldInput\n\nInput element.\n\n### SearchFieldClear\n\nClear button (defaults to dismiss glyph).',
+      searchText: 'search field input control tuned for query entry with clear action. <div class="not-content my-6">\n  <searchfieldpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="search-field" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<searchfield value={query} onvaluechange={setquery} />\n\n<searchfield\n  value={searchterm}\n  onvaluechange={setsearchterm}\n  appearance="filled"\n  aria-label="search products"\n/>\n\n<searchfield appearance="plain" defaultvalue="initial query" />\n```\n\n## api reference\n\n### searchfield\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled query string." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial query." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when query changes." },\n    { prop: "appearance", default: "\\"filled\\"", type: "\\"filled\\" | \\"plain\\"", description: "visual style: filled (standalone) or plain (for composed surfaces)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "accessible name for the search input." }\n    ]}\n  />\n</div>\n### searchfieldicon\n\nsearch icon slot (defaults to search glyph).\n\n### searchfieldinput\n\ninput element.\n\n### searchfieldclear\n\nclear button (defaults to dismiss glyph).\n\n'
+    },
+    {
+      slug: "components/segmented-control",
+      href: "/components/segmented-control/",
+      title: "Segmented Control",
+      description: "Linear set of mutually exclusive options.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SegmentedControlPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="segmented-control" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n  <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\n## API Reference\n\n### SegmentedControl\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled selected value." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when selection changes." }\n    ]}\n  />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Unique value for this option (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables this option." }\n    ]}\n  />\n</div>',
+      searchText: 'segmented control linear set of mutually exclusive options. <div class="not-content my-6">\n  <segmentedcontrolpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="segmented-control" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="segmented-control" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n  <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n  <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\n## api reference\n\n### segmentedcontrol\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled selected value." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when selection changes." }\n    ]}\n  />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "unique value for this option (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables this option." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/select",
+      href: "/components/select/",
+      title: "Select",
+      description: "Dropdown select control for picking from a list.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SelectPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="select" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="select" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Select value={country} onValueChange={setCountry}>\n  <SelectTrigger>\n    <SelectValue placeholder="Select a country" />\n  </SelectTrigger>\n  <SelectContent>\n    <SelectItem value="us">United States</SelectItem>\n    <SelectItem value="ca">Canada</SelectItem>\n    <SelectItem value="uk">United Kingdom</SelectItem>\n  </SelectContent>\n</Select>\n\n<Select size="lg" fullWidth>\n  <SelectTrigger>\n    <SelectValue placeholder="Choose an option" />\n  </SelectTrigger>\n  <SelectContent>\n    <SelectGroup>\n      <SelectLabel>Fruits</SelectLabel>\n      <SelectItem value="apple">Apple</SelectItem>\n      <SelectItem value="banana">Banana</SelectItem>\n    </SelectGroup>\n    <SelectSeparator />\n    <SelectItem value="other">Other</SelectItem>\n  </SelectContent>\n</Select>\n```\n\n## API Reference\n\n### Select\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled selected value." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial value." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when selection changes." },\n    { prop: "open", default: "\u2014", type: "boolean", description: "Controlled open state." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "Event handler when open state changes." },\n    { prop: "placeholder", default: "\u2014", type: "string", description: "Placeholder text." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Control height tier." },\n    { prop: "fullWidth", default: "false", type: "boolean", description: "Stretches to full parent width." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>\n### SelectTrigger\n\nButton that opens the dropdown.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "appearance", default: "\\"filled\\"", type: "\\"filled\\" | \\"plain\\"", description: "Field chrome vs flush trigger for composed surfaces (Footer locale, Calendar caption)." }\n    ]}\n  />\n</div>\n\n### SelectValue\n\nDisplays selected value or placeholder.\n\n### SelectContent\n\nDropdown panel container.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "position", default: "\\"item-aligned\\"", type: "\\"item-aligned\\" | \\"popper\\"", description: "Positioning strategy." }\n    ]}\n  />\n</div>\n### SelectItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Item value (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables this item." }\n    ]}\n  />\n</div>\n### SelectGroup\n\nGroups related items.\n\n### SelectLabel\n\nLabel for a group.\n\n### SelectSeparator\n\nVisual divider between items.',
+      searchText: 'select dropdown select control for picking from a list. <div class="not-content my-6">\n  <selectpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="select" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="select" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<select value={country} onvaluechange={setcountry}>\n  <selecttrigger>\n    <selectvalue placeholder="select a country" />\n  </selecttrigger>\n  <selectcontent>\n    <selectitem value="us">united states</selectitem>\n    <selectitem value="ca">canada</selectitem>\n    <selectitem value="uk">united kingdom</selectitem>\n  </selectcontent>\n</select>\n\n<select size="lg" fullwidth>\n  <selecttrigger>\n    <selectvalue placeholder="choose an option" />\n  </selecttrigger>\n  <selectcontent>\n    <selectgroup>\n      <selectlabel>fruits</selectlabel>\n      <selectitem value="apple">apple</selectitem>\n      <selectitem value="banana">banana</selectitem>\n    </selectgroup>\n    <selectseparator />\n    <selectitem value="other">other</selectitem>\n  </selectcontent>\n</select>\n```\n\n## api reference\n\n### select\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled selected value." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial value." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when selection changes." },\n    { prop: "open", default: "\u2014", type: "boolean", description: "controlled open state." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "event handler when open state changes." },\n    { prop: "placeholder", default: "\u2014", type: "string", description: "placeholder text." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "control height tier." },\n    { prop: "fullwidth", default: "false", type: "boolean", description: "stretches to full parent width." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n### selecttrigger\n\nbutton that opens the dropdown.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "appearance", default: "\\"filled\\"", type: "\\"filled\\" | \\"plain\\"", description: "field chrome vs flush trigger for composed surfaces (footer locale, calendar caption)." }\n    ]}\n  />\n</div>\n\n### selectvalue\n\ndisplays selected value or placeholder.\n\n### selectcontent\n\ndropdown panel container.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "position", default: "\\"item-aligned\\"", type: "\\"item-aligned\\" | \\"popper\\"", description: "positioning strategy." }\n    ]}\n  />\n</div>\n### selectitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "item value (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables this item." }\n    ]}\n  />\n</div>\n### selectgroup\n\ngroups related items.\n\n### selectlabel\n\nlabel for a group.\n\n### selectseparator\n\nvisual divider between items.\n\n'
+    },
+    {
+      slug: "components/sidebar",
+      href: "/components/sidebar/",
+      title: "Sidebar",
+      description: "Collapsible vertical navigation drawer/sidebar.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SidebarPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="sidebar" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Sidebar>\n  <SidebarHeader>\n    <SidebarBrand>\n      <Logo />\n      My App\n    </SidebarBrand>\n  </SidebarHeader>\n  <SidebarContent>\n    <SidebarNav>\n      <SidebarGroup>\n        <SidebarGroupLabel>Main</SidebarGroupLabel>\n        <SidebarLink href="/" active>Dashboard</SidebarLink>\n        <SidebarLink href="/projects">Projects</SidebarLink>\n        <SidebarLink href="/tasks">Tasks</SidebarLink>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Settings</SidebarGroupLabel>\n        <SidebarLink href="/settings">Preferences</SidebarLink>\n        <SidebarLink href="/profile">Profile</SidebarLink>\n      </SidebarGroup>\n    </SidebarNav>\n  </SidebarContent>\n  <SidebarFooter>\n    <p>\xA9 2024</p>\n  </SidebarFooter>\n</Sidebar>\n```\n\n## API Reference\n\n### Sidebar\n\nRoot sidebar container (`<aside>` element).\n\n### SidebarHeader\n\nHeader section.\n\n### SidebarBrand\n\nBrand/logo area.\n\n### SidebarContent\n\nMain content area.\n\n### SidebarNav\n\nNavigation container (`<nav>` element).\n\n### SidebarGroup\n\nGroups related links.\n\n### SidebarGroupLabel\n\nLabel for a group.\n\n### SidebarLink\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "Marks the current page (`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### SidebarFooter\n\nFooter section.\n\n### Sidebar peek (collapsed hover)\n\nComposable flyout when the docked sidebar is collapsed \u2014 edge hover reveals a floating panel over the main area (content does not reflow).\n\n```tsx\n<SidebarPeek enabled={collapsed} widthPercent={28} mode="contained" onPin={expand}>\n  <SidebarPeekEdge />\n  <SidebarPeekPanel>\n    <SidebarPeekPin>{/* pin control */}</SidebarPeekPin>\n    <Sidebar>...</Sidebar>\n  </SidebarPeekPanel>\n  <SidebarPeekInset>{/* main + toggle */}</SidebarPeekInset>\n</SidebarPeek>\n```\n\nUse `mode="viewport"` with `--refineui-sidebar-peek-viewport-offset` when the peek layer should align below a fixed app header.',
+      searchText: 'sidebar collapsible vertical navigation drawer/sidebar. <div class="not-content my-6">\n  <sidebarpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="sidebar" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<sidebar>\n  <sidebarheader>\n    <sidebarbrand>\n      <logo />\n      my app\n    </sidebarbrand>\n  </sidebarheader>\n  <sidebarcontent>\n    <sidebarnav>\n      <sidebargroup>\n        <sidebargrouplabel>main</sidebargrouplabel>\n        <sidebarlink href="/" active>dashboard</sidebarlink>\n        <sidebarlink href="/projects">projects</sidebarlink>\n        <sidebarlink href="/tasks">tasks</sidebarlink>\n      </sidebargroup>\n      <sidebargroup>\n        <sidebargrouplabel>settings</sidebargrouplabel>\n        <sidebarlink href="/settings">preferences</sidebarlink>\n        <sidebarlink href="/profile">profile</sidebarlink>\n      </sidebargroup>\n    </sidebarnav>\n  </sidebarcontent>\n  <sidebarfooter>\n    <p>\xA9 2024</p>\n  </sidebarfooter>\n</sidebar>\n```\n\n## api reference\n\n### sidebar\n\nroot sidebar container (`<aside>` element).\n\n### sidebarheader\n\nheader section.\n\n### sidebarbrand\n\nbrand/logo area.\n\n### sidebarcontent\n\nmain content area.\n\n### sidebarnav\n\nnavigation container (`<nav>` element).\n\n### sidebargroup\n\ngroups related links.\n\n### sidebargrouplabel\n\nlabel for a group.\n\n### sidebarlink\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "marks the current page (`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### sidebarfooter\n\nfooter section.\n\n### sidebar peek (collapsed hover)\n\ncomposable flyout when the docked sidebar is collapsed \u2014 edge hover reveals a floating panel over the main area (content does not reflow).\n\n```tsx\n<sidebarpeek enabled={collapsed} widthpercent={28} mode="contained" onpin={expand}>\n  <sidebarpeekedge />\n  <sidebarpeekpanel>\n    <sidebarpeekpin>{/* pin control */}</sidebarpeekpin>\n    <sidebar>...</sidebar>\n  </sidebarpeekpanel>\n  <sidebarpeekinset>{/* main + toggle */}</sidebarpeekinset>\n</sidebarpeek>\n```\n\nuse `mode="viewport"` with `--refineui-sidebar-peek-viewport-offset` when the peek layer should align below a fixed app header.\n\n'
+    },
+    {
+      slug: "components/skeleton",
+      href: "/components/skeleton/",
+      title: "Skeleton",
+      description: "Placeholder animation during data fetching.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SkeletonPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="skeleton" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Skeleton width={200} height={20} />\n\n<Skeleton width="100%" height={100} shape="circle" />\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "width", default: "\u2014", type: "number | string", description: "Skeleton width in pixels or CSS value." },\n    { prop: "height", default: "\u2014", type: "number | string", description: "Skeleton height in pixels or CSS value." },\n    { prop: "shape", default: "\\"rectangle\\"", type: "\\"rectangle\\" | \\"circle\\"", description: "Shape of the skeleton." }\n    ]}\n  />\n</div>',
+      searchText: 'skeleton placeholder animation during data fetching. <div class="not-content my-6">\n  <skeletonpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="skeleton" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<skeleton width={200} height={20} />\n\n<skeleton width="100%" height={100} shape="circle" />\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "width", default: "\u2014", type: "number | string", description: "skeleton width in pixels or css value." },\n    { prop: "height", default: "\u2014", type: "number | string", description: "skeleton height in pixels or css value." },\n    { prop: "shape", default: "\\"rectangle\\"", type: "\\"rectangle\\" | \\"circle\\"", description: "shape of the skeleton." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/slider",
+      href: "/components/slider/",
+      title: "Slider",
+      description: "Range selection control across a numeric scale.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SliderDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="slider" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Slider min={0} max={100} value={volume} onChange={setVolume} />\n\n<Slider\n  min={0}\n  max={10}\n  step={1}\n  value={rating}\n  onChange={setRating}\n  size="md"\n/>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "Controlled value." },\n    { prop: "onChange", default: "\u2014", type: "(value: number) => void", description: "Event handler when value changes." },\n    { prop: "min", default: "0", type: "number", description: "Minimum value." },\n    { prop: "max", default: "100", type: "number", description: "Maximum value." },\n    { prop: "step", default: "1", type: "number", description: "Step increment." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\"", description: "Rail thickness: sm (2px) or md (4px)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'slider range selection control across a numeric scale. <div class="not-content my-6">\n  <sliderdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="slider" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<slider min={0} max={100} value={volume} onchange={setvolume} />\n\n<slider\n  min={0}\n  max={10}\n  step={1}\n  value={rating}\n  onchange={setrating}\n  size="md"\n/>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "controlled value." },\n    { prop: "onchange", default: "\u2014", type: "(value: number) => void", description: "event handler when value changes." },\n    { prop: "min", default: "0", type: "number", description: "minimum value." },\n    { prop: "max", default: "100", type: "number", description: "maximum value." },\n    { prop: "step", default: "1", type: "number", description: "step increment." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\"", description: "rail thickness: sm (2px) or md (4px)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/spin-button",
+      href: "/components/spin-button/",
+      title: "Spin Button",
+      description: "Numeric stepper input for incremental changes.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SpinButtonDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="spin-button" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<SpinButton value={quantity} onChange={setQuantity} />\n\n<SpinButton\n  value={amount}\n  onChange={setAmount}\n  min={0}\n  max={100}\n  step={5}\n  placeholder="Enter amount"\n  size="lg"\n/>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "Controlled value (required)." },\n    { prop: "onChange", default: "\u2014", type: "(value: number) => void", description: "Event handler when value changes (required)." },\n    { prop: "min", default: "\u2014", type: "number", description: "Minimum allowed value." },\n    { prop: "max", default: "\u2014", type: "number", description: "Maximum allowed value." },\n    { prop: "step", default: "1", type: "number", description: "Step increment." },\n    { prop: "placeholder", default: "\u2014", type: "string", description: "Placeholder text." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Control height tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'spin button numeric stepper input for incremental changes. <div class="not-content my-6">\n  <spinbuttondemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="spin-button" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<spinbutton value={quantity} onchange={setquantity} />\n\n<spinbutton\n  value={amount}\n  onchange={setamount}\n  min={0}\n  max={100}\n  step={5}\n  placeholder="enter amount"\n  size="lg"\n/>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "controlled value (required)." },\n    { prop: "onchange", default: "\u2014", type: "(value: number) => void", description: "event handler when value changes (required)." },\n    { prop: "min", default: "\u2014", type: "number", description: "minimum allowed value." },\n    { prop: "max", default: "\u2014", type: "number", description: "maximum allowed value." },\n    { prop: "step", default: "1", type: "number", description: "step increment." },\n    { prop: "placeholder", default: "\u2014", type: "string", description: "placeholder text." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "control height tier." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/spinner",
+      href: "/components/spinner/",
+      title: "Spinner",
+      description: "Loading indicator spinner for async actions.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SpinnerPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="spinner" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="spinner" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Spinner size="md" />\n\n<Spinner size="lg" label="Loading..." labelPosition="right" />\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "size", default: "\u2014", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\" | \\"xxl\\"", description: "Spinner size tier." },\n    { prop: "label", default: "\u2014", type: "ReactNode", description: "Optional label text or element." },\n    { prop: "labelPosition", default: "\u2014", type: "\\"left\\" | \\"right\\" | \\"top\\" | \\"bottom\\"", description: "Position of the label relative to spinner." }\n    ]}\n  />\n</div>',
+      searchText: 'spinner loading indicator spinner for async actions. <div class="not-content my-6">\n  <spinnerpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="spinner" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="spinner" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<spinner size="md" />\n\n<spinner size="lg" label="loading..." labelposition="right" />\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "size", default: "\u2014", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\" | \\"xxl\\"", description: "spinner size tier." },\n    { prop: "label", default: "\u2014", type: "reactnode", description: "optional label text or element." },\n    { prop: "labelposition", default: "\u2014", type: "\\"left\\" | \\"right\\" | \\"top\\" | \\"bottom\\"", description: "position of the label relative to spinner." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/stack",
+      href: "/components/stack/",
+      title: "Stack",
+      description: "One-axis flex layout with Foundation gap tokens.",
+      category: "components",
+      content: '`Stack` lays out children in a row or column with a spacing-token `gap`. Default direction is `column`.\n\n<div class="not-content my-6">\n  <StackPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="stack" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Stack gap="sizeMedium">\n  <div>Item 1</div>\n  <div>Item 2</div>\n</Stack>\n\n<Stack direction="row" gap="sizeSmall" align="center" justify="between">\n  <Button type="button" variant="outline">Cancel</Button>\n  <Button type="button" variant="primary">Save</Button>\n</Stack>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "Root element." },\n    { prop: "direction", default: "\\"column\\"", type: "\\"row\\" | \\"column\\" | \\"row-reverse\\" | \\"column-reverse\\"", description: "Flex direction." },\n    { prop: "gap", default: "\\"sizeNone\\"", type: "Spacing token", description: "Gap between children." },\n    { prop: "align", default: "\u2014", type: "\\"start\\" | \\"center\\" | \\"end\\" | \\"stretch\\" | \\"baseline\\"", description: "Cross-axis alignment." },\n    { prop: "justify", default: "\u2014", type: "\\"start\\" | \\"center\\" | \\"end\\" | \\"between\\" | \\"around\\" | \\"evenly\\"", description: "Main-axis justification." },\n    { prop: "wrap", default: "\u2014", type: "boolean | wrap token", description: "Wrapping behavior." },\n    { prop: "inline", default: "false", type: "boolean", description: "Use `inline-flex`." }\n    ]}\n  />\n</div>',
+      searchText: 'stack one-axis flex layout with foundation gap tokens. `stack` lays out children in a row or column with a spacing-token `gap`. default direction is `column`.\n\n<div class="not-content my-6">\n  <stackpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="stack" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<stack gap="sizemedium">\n  <div>item 1</div>\n  <div>item 2</div>\n</stack>\n\n<stack direction="row" gap="sizesmall" align="center" justify="between">\n  <button type="button" variant="outline">cancel</button>\n  <button type="button" variant="primary">save</button>\n</stack>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "root element." },\n    { prop: "direction", default: "\\"column\\"", type: "\\"row\\" | \\"column\\" | \\"row-reverse\\" | \\"column-reverse\\"", description: "flex direction." },\n    { prop: "gap", default: "\\"sizenone\\"", type: "spacing token", description: "gap between children." },\n    { prop: "align", default: "\u2014", type: "\\"start\\" | \\"center\\" | \\"end\\" | \\"stretch\\" | \\"baseline\\"", description: "cross-axis alignment." },\n    { prop: "justify", default: "\u2014", type: "\\"start\\" | \\"center\\" | \\"end\\" | \\"between\\" | \\"around\\" | \\"evenly\\"", description: "main-axis justification." },\n    { prop: "wrap", default: "\u2014", type: "boolean | wrap token", description: "wrapping behavior." },\n    { prop: "inline", default: "false", type: "boolean", description: "use `inline-flex`." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/stepper",
+      href: "/components/stepper/",
+      title: "Stepper",
+      description: "Step list for multi-step flows with indicators and titles.",
+      category: "components",
+      content: '`Stepper` tracks progress through ordered steps. Use it for wizards and onboarding. For linear progress alone, prefer [Progress](/components/progress/) or [ProgressStepper](/components/progress-stepper/).\n\n<div class="not-content my-6">\n  <StepperDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="stepper" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Stepper value={step} onValueChange={setStep}>\n  <StepperList>\n    <StepperItem value={0}>\n      <StepperIndicator>1</StepperIndicator>\n      <StepperTitle>Account</StepperTitle>\n      <StepperDescription>Profile & email</StepperDescription>\n    </StepperItem>\n    <StepperSeparator />\n    <StepperItem value={1}>\n      <StepperIndicator>2</StepperIndicator>\n      <StepperTitle>Plan</StepperTitle>\n    </StepperItem>\n  </StepperList>\n</Stepper>\n```\n\n## Related\n\n- [Progress stepper](/components/progress-stepper/)',
+      searchText: 'stepper step list for multi-step flows with indicators and titles. `stepper` tracks progress through ordered steps. use it for wizards and onboarding. for linear progress alone, prefer [progress](/components/progress/) or [progressstepper](/components/progress-stepper/).\n\n<div class="not-content my-6">\n  <stepperdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="stepper" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<stepper value={step} onvaluechange={setstep}>\n  <stepperlist>\n    <stepperitem value={0}>\n      <stepperindicator>1</stepperindicator>\n      <steppertitle>account</steppertitle>\n      <stepperdescription>profile & email</stepperdescription>\n    </stepperitem>\n    <stepperseparator />\n    <stepperitem value={1}>\n      <stepperindicator>2</stepperindicator>\n      <steppertitle>plan</steppertitle>\n    </stepperitem>\n  </stepperlist>\n</stepper>\n```\n\n## related\n\n- [progress stepper](/components/progress-stepper/)\n'
+    },
+    {
+      slug: "components/switch",
+      href: "/components/switch/",
+      title: "Switch",
+      description: "Immediate toggle switch for settings.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <SwitchDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="switch" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="switch" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Switch checked={isEnabled} onCheckedChange={setIsEnabled} />\n\n<Switch\n  checked={darkMode}\n  onCheckedChange={setDarkMode}\n  aria-label="Toggle dark mode"\n/>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "checked", default: "\u2014", type: "boolean", description: "Controlled checked state." },\n    { prop: "onCheckedChange", default: "\u2014", type: "(checked: boolean) => void", description: "Event handler when checked state changes." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'switch immediate toggle switch for settings. <div class="not-content my-6">\n  <switchdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="switch" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="switch" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<switch checked={isenabled} oncheckedchange={setisenabled} />\n\n<switch\n  checked={darkmode}\n  oncheckedchange={setdarkmode}\n  aria-label="toggle dark mode"\n/>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "checked", default: "\u2014", type: "boolean", description: "controlled checked state." },\n    { prop: "oncheckedchange", default: "\u2014", type: "(checked: boolean) => void", description: "event handler when checked state changes." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/table",
+      href: "/components/table/",
+      title: "Table",
+      description: "Data grid table for structured records.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <TablePreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="table" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Table>\n  <TableCaption>Product inventory</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Product</TableHead>\n      <TableHead>Price</TableHead>\n      <TableHead>Stock</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>Widget A</TableCell>\n      <TableCell>$19.99</TableCell>\n      <TableCell>52</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>Widget B</TableCell>\n      <TableCell>$29.99</TableCell>\n      <TableCell>12</TableCell>\n    </TableRow>\n  </TableBody>\n  <TableFooter>\n    <TableRow>\n      <TableCell colSpan={2}>Total Items</TableCell>\n      <TableCell>64</TableCell>\n    </TableRow>\n  </TableFooter>\n</Table>\n```\n\n## Scroll\n\nTable does not own overflow. Compose with `ScrollArea` when width is constrained (docs column, panel) or height is constrained (dialog, fixed layout). Specimen previews that fit the stage usually skip ScrollArea.\n\n```tsx\n<ScrollArea type="hover" className="w-full min-w-0">\n  <ScrollAreaViewport>\n    <Table>\n      <TableHeader>{/* \u2026 */}</TableHeader>\n      <TableBody>{/* \u2026 */}</TableBody>\n    </Table>\n  </ScrollAreaViewport>\n  <ScrollAreaScrollbar orientation="horizontal">\n    <ScrollAreaThumb />\n  </ScrollAreaScrollbar>\n</ScrollArea>\n```\n\n## API Reference\n\n### Table\n\nRoot table element.\n\n### TableHeader\n\nTable header section (`<thead>`).\n\n### TableBody\n\nTable body section (`<tbody>`).\n\n### TableFooter\n\nTable footer section (`<tfoot>`).\n\n### TableRow\n\nTable row (`<tr>`).\n\n### TableHead\n\nHeader cell (`<th>`).\n\n### TableCell\n\nData cell (`<td>`).\n\n### TableCaption\n\nTable caption for accessibility.',
+      searchText: 'table data grid table for structured records. <div class="not-content my-6">\n  <tablepreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="table" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<table>\n  <tablecaption>product inventory</tablecaption>\n  <tableheader>\n    <tablerow>\n      <tablehead>product</tablehead>\n      <tablehead>price</tablehead>\n      <tablehead>stock</tablehead>\n    </tablerow>\n  </tableheader>\n  <tablebody>\n    <tablerow>\n      <tablecell>widget a</tablecell>\n      <tablecell>$19.99</tablecell>\n      <tablecell>52</tablecell>\n    </tablerow>\n    <tablerow>\n      <tablecell>widget b</tablecell>\n      <tablecell>$29.99</tablecell>\n      <tablecell>12</tablecell>\n    </tablerow>\n  </tablebody>\n  <tablefooter>\n    <tablerow>\n      <tablecell colspan={2}>total items</tablecell>\n      <tablecell>64</tablecell>\n    </tablerow>\n  </tablefooter>\n</table>\n```\n\n## scroll\n\ntable does not own overflow. compose with `scrollarea` when width is constrained (docs column, panel) or height is constrained (dialog, fixed layout). specimen previews that fit the stage usually skip scrollarea.\n\n```tsx\n<scrollarea type="hover" classname="w-full min-w-0">\n  <scrollareaviewport>\n    <table>\n      <tableheader>{/* \u2026 */}</tableheader>\n      <tablebody>{/* \u2026 */}</tablebody>\n    </table>\n  </scrollareaviewport>\n  <scrollareascrollbar orientation="horizontal">\n    <scrollareathumb />\n  </scrollareascrollbar>\n</scrollarea>\n```\n\n## api reference\n\n### table\n\nroot table element.\n\n### tableheader\n\ntable header section (`<thead>`).\n\n### tablebody\n\ntable body section (`<tbody>`).\n\n### tablefooter\n\ntable footer section (`<tfoot>`).\n\n### tablerow\n\ntable row (`<tr>`).\n\n### tablehead\n\nheader cell (`<th>`).\n\n### tablecell\n\ndata cell (`<td>`).\n\n### tablecaption\n\ntable caption for accessibility.\n'
+    },
+    {
+      slug: "components/tabs",
+      href: "/components/tabs/",
+      title: "Tabs",
+      description: "Organizes content into separate view panes.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <TabsPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="tabs" />\n</div>\n\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="tabs" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Tabs defaultValue="overview">\n  <TabsList>\n    <TabsTrigger value="overview">Overview</TabsTrigger>\n    <TabsTrigger value="analytics">Analytics</TabsTrigger>\n    <TabsTrigger value="settings">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value="overview">\n    <p>Overview content</p>\n  </TabsContent>\n  <TabsContent value="analytics">\n    <p>Analytics content</p>\n  </TabsContent>\n  <TabsContent value="settings">\n    <p>Settings content</p>\n  </TabsContent>\n</Tabs>\n\n<Tabs value={activeTab} onValueChange={setActiveTab}>\n  {/* Controlled tabs */}\n</Tabs>\n```\n\n## API Reference\n\n### Tabs\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Controlled active tab value." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "Uncontrolled initial active tab." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "Event handler when active tab changes." }\n    ]}\n  />\n</div>\n### TabsList\n\nContainer for tab triggers.\n\n### TabsTrigger\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Tab identifier (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables this tab." }\n    ]}\n  />\n</div>\n### TabsContent\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Associated tab value (required)." }\n    ]}\n  />\n</div>',
+      searchText: 'tabs organizes content into separate view panes. <div class="not-content my-6">\n  <tabspreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="tabs" />\n</div>\n\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="tabs" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<tabs defaultvalue="overview">\n  <tabslist>\n    <tabstrigger value="overview">overview</tabstrigger>\n    <tabstrigger value="analytics">analytics</tabstrigger>\n    <tabstrigger value="settings">settings</tabstrigger>\n  </tabslist>\n  <tabscontent value="overview">\n    <p>overview content</p>\n  </tabscontent>\n  <tabscontent value="analytics">\n    <p>analytics content</p>\n  </tabscontent>\n  <tabscontent value="settings">\n    <p>settings content</p>\n  </tabscontent>\n</tabs>\n\n<tabs value={activetab} onvaluechange={setactivetab}>\n  {/* controlled tabs */}\n</tabs>\n```\n\n## api reference\n\n### tabs\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "controlled active tab value." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "uncontrolled initial active tab." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "event handler when active tab changes." }\n    ]}\n  />\n</div>\n### tabslist\n\ncontainer for tab triggers.\n\n### tabstrigger\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "tab identifier (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables this tab." }\n    ]}\n  />\n</div>\n### tabscontent\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "associated tab value (required)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/tag",
+      href: "/components/tag/",
+      title: "Tag",
+      description: "Categorization tag or filter chip.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <TagDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="tag" />\n</div>\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="tag" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Chip>Tag Label</Chip>\n\n<Chip variant="filled">Filled</Chip>\n\n<Chip variant="outline" size="sm">Small Tag</Chip>\n\n<Chip onRemove={() => handleRemove()}>\n  Removable\n</Chip>\n\n<Chip avatar={<Avatar src="/user.jpg" />}>\n  With Avatar\n</Chip>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"outline\\" | \\"filled\\"", description: "Visual variant style." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Chip size tier." },\n    { prop: "avatar", default: "\u2014", type: "ReactNode", description: "Optional leading avatar element." },\n    { prop: "onRemove", default: "\u2014", type: "() => void", description: "When provided, shows remove button." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'tag categorization tag or filter chip. <div class="not-content my-6">\n  <tagdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="tag" />\n</div>\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="tag" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<chip>tag label</chip>\n\n<chip variant="filled">filled</chip>\n\n<chip variant="outline" size="sm">small tag</chip>\n\n<chip onremove={() => handleremove()}>\n  removable\n</chip>\n\n<chip avatar={<avatar src="/user.jpg" />}>\n  with avatar\n</chip>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"outline\\" | \\"filled\\"", description: "visual variant style." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "chip size tier." },\n    { prop: "avatar", default: "\u2014", type: "reactnode", description: "optional leading avatar element." },\n    { prop: "onremove", default: "\u2014", type: "() => void", description: "when provided, shows remove button." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/textarea",
+      href: "/components/textarea/",
+      title: "Textarea",
+      description: "Multi-line text input field.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <TextareaPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="textarea" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Textarea placeholder="Enter your comments..." rows={4} />\n\n<Textarea\n  error={hasError}\n  value={message}\n  onChange={(e) => setMessage(e.target.value)}\n  fullWidth\n/>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "error", default: "false", type: "boolean", description: "Shows error state styling." },\n    { prop: "success", default: "false", type: "boolean", description: "Shows success state styling." },\n    { prop: "fullWidth", default: "false", type: "boolean", description: "Stretches to full parent width." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables interaction." }\n    ]}\n  />\n</div>',
+      searchText: 'textarea multi-line text input field. <div class="not-content my-6">\n  <textareapreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="textarea" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<textarea placeholder="enter your comments..." rows={4} />\n\n<textarea\n  error={haserror}\n  value={message}\n  onchange={(e) => setmessage(e.target.value)}\n  fullwidth\n/>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "error", default: "false", type: "boolean", description: "shows error state styling." },\n    { prop: "success", default: "false", type: "boolean", description: "shows success state styling." },\n    { prop: "fullwidth", default: "false", type: "boolean", description: "stretches to full parent width." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables interaction." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/toast",
+      href: "/components/toast/",
+      title: "Toast",
+      description: "Transient notification message overlay.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <ToastPreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="toast" />\n</div>\n\n\n## Tokens\n\n<div class="not-content">\n  <TokenInspector client:load component="toast" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n// Add Toaster to your app root (one toast at a time by default)\n<Toaster />\n\n// Show a toast \u2014 replaces any currently visible toast\ntoast("Settings saved successfully", {\n  variant: "success",\n  duration: 3000,\n});\n\ntoast("Upload failed", {\n  variant: "error",\n  action: {\n    label: "Retry",\n    onClick: () => retryUpload(),\n  },\n});\n```\n\nSwipe or drag the toast upward to dismiss it early.\n\n## API Reference\n\n### Toast\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"success\\" | \\"error\\" | \\"warning\\"", description: "Toast visual variant." },\n    { prop: "message", default: "\u2014", type: "ReactNode", description: "Toast message." },\n    { prop: "icon", default: "\u2014", type: "ReactNode", description: "Custom icon element." },\n    { prop: "iconName", default: "\u2014", type: "string", description: "Icon name (when not using icon)." },\n    { prop: "action", default: "\u2014", type: "ReactNode | ToastAction", description: "Action button or custom element." }\n    ]}\n  />\n</div>\n### Toaster\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "maxToasts", default: "1", type: "number", description: "Maximum simultaneous toasts. Default replaces the previous toast." },\n    { prop: "swipeDirections", default: "[\\"top\\"]", type: "(\\"top\\" | \\"right\\" | \\"bottom\\" | \\"left\\")[]", description: "Allowed swipe-to-dismiss directions." }\n    ]}\n  />\n</div>\n### toast(message, options)\n\nFunction to show a toast programmatically. A new call replaces the previous toast.\n\n**Options:**\n- `variant?: ToastVariant` \u2014 Visual variant\n- `icon?: ReactNode` \u2014 Custom icon\n- `action?: ToastAction` \u2014 Action button\n- `duration?: number` \u2014 Duration in milliseconds (default 4200)',
+      searchText: 'toast transient notification message overlay. <div class="not-content my-6">\n  <toastpreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="toast" />\n</div>\n\n\n## tokens\n\n<div class="not-content">\n  <tokeninspector client:load component="toast" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n// add toaster to your app root (one toast at a time by default)\n<toaster />\n\n// show a toast \u2014 replaces any currently visible toast\ntoast("settings saved successfully", {\n  variant: "success",\n  duration: 3000,\n});\n\ntoast("upload failed", {\n  variant: "error",\n  action: {\n    label: "retry",\n    onclick: () => retryupload(),\n  },\n});\n```\n\nswipe or drag the toast upward to dismiss it early.\n\n## api reference\n\n### toast\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"success\\" | \\"error\\" | \\"warning\\"", description: "toast visual variant." },\n    { prop: "message", default: "\u2014", type: "reactnode", description: "toast message." },\n    { prop: "icon", default: "\u2014", type: "reactnode", description: "custom icon element." },\n    { prop: "iconname", default: "\u2014", type: "string", description: "icon name (when not using icon)." },\n    { prop: "action", default: "\u2014", type: "reactnode | toastaction", description: "action button or custom element." }\n    ]}\n  />\n</div>\n### toaster\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "maxtoasts", default: "1", type: "number", description: "maximum simultaneous toasts. default replaces the previous toast." },\n    { prop: "swipedirections", default: "[\\"top\\"]", type: "(\\"top\\" | \\"right\\" | \\"bottom\\" | \\"left\\")[]", description: "allowed swipe-to-dismiss directions." }\n    ]}\n  />\n</div>\n### toast(message, options)\n\nfunction to show a toast programmatically. a new call replaces the previous toast.\n\n**options:**\n- `variant?: toastvariant` \u2014 visual variant\n- `icon?: reactnode` \u2014 custom icon\n- `action?: toastaction` \u2014 action button\n- `duration?: number` \u2014 duration in milliseconds (default 4200)\n'
+    },
+    {
+      slug: "components/tooltip",
+      href: "/components/tooltip/",
+      title: "Tooltip",
+      description: "Contextual text popup on hover or focus.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <TooltipDemo client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="tooltip" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Tooltip trigger={<Button>Hover me</Button>} content="Helpful tooltip text" />\n\n<Tooltip\n  trigger={<IconButton icon="info" />}\n  content="Extended information"\n  position="Top"\n  align="Center"\n/>\n```\n\n## API Reference\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "trigger", default: "\u2014", type: "ReactNode", description: "Element that triggers the tooltip (required)." },\n    { prop: "content", default: "\u2014", type: "ReactNode", description: "Tooltip content (required)." },\n    { prop: "position", default: "\\"Top\\"", type: "\\"Top\\" | \\"Left\\" | \\"Bottom\\" | \\"Right\\"", description: "Position relative to trigger." },\n    { prop: "align", default: "\\"Center\\"", type: "\\"Start\\" | \\"Center\\" | \\"End\\"", description: "Alignment along the edge." },\n    { prop: "delayMs", default: "700", type: "number", description: "Delay before showing (milliseconds)." },\n    { prop: "open", default: "\u2014", type: "boolean", description: "Controlled open state." },\n    { prop: "defaultOpen", default: "\u2014", type: "boolean", description: "Uncontrolled initial open state." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "Event handler when open state changes." }\n    ]}\n  />\n</div>',
+      searchText: 'tooltip contextual text popup on hover or focus. <div class="not-content my-6">\n  <tooltipdemo client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="tooltip" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<tooltip trigger={<button>hover me</button>} content="helpful tooltip text" />\n\n<tooltip\n  trigger={<iconbutton icon="info" />}\n  content="extended information"\n  position="top"\n  align="center"\n/>\n```\n\n## api reference\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "trigger", default: "\u2014", type: "reactnode", description: "element that triggers the tooltip (required)." },\n    { prop: "content", default: "\u2014", type: "reactnode", description: "tooltip content (required)." },\n    { prop: "position", default: "\\"top\\"", type: "\\"top\\" | \\"left\\" | \\"bottom\\" | \\"right\\"", description: "position relative to trigger." },\n    { prop: "align", default: "\\"center\\"", type: "\\"start\\" | \\"center\\" | \\"end\\"", description: "alignment along the edge." },\n    { prop: "delayms", default: "700", type: "number", description: "delay before showing (milliseconds)." },\n    { prop: "open", default: "\u2014", type: "boolean", description: "controlled open state." },\n    { prop: "defaultopen", default: "\u2014", type: "boolean", description: "uncontrolled initial open state." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "event handler when open state changes." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "components/tree",
+      href: "/components/tree/",
+      title: "Tree",
+      description: "Expandable hierarchical list for files, folders, and nested navigation.",
+      category: "components",
+      content: '<div class="not-content my-6">\n  <TreePreview client:load />\n</div>\n\n\n## Contract\n\n<div class="not-content">\n  <SpecRenderer client:load component="tree" />\n</div>\n\n## Installation\n\n<PackageInstall />\n\n## Usage\n\n```tsx\n<Tree defaultExpanded={["src"]} defaultSelected="button">\n  <TreeItem value="src">\n    <TreeItemTrigger>src</TreeItemTrigger>\n    <TreeItemContent>\n      <TreeItem value="button">\n        <TreeItemTrigger>Button.tsx</TreeItemTrigger>\n      </TreeItem>\n    </TreeItemContent>\n  </TreeItem>\n  <TreeItem value="package">\n    <TreeItemTrigger>package.json</TreeItemTrigger>\n  </TreeItem>\n</Tree>\n```\n\nBuilt from Foundation spacing, radius, color aliases, and typography tokens (same density as Sidebar / Menu). Chevron expands branches; row click selects. Arrow keys follow the WAI-ARIA tree pattern.\n\n## API Reference\n\n### Tree\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Row typography size." },\n    { prop: "expanded", default: "\u2014", type: "string[]", description: "Controlled expanded item values." },\n    { prop: "defaultExpanded", default: "\u2014", type: "string[]", description: "Uncontrolled initial expanded values." },\n    { prop: "onExpandedChange", default: "\u2014", type: "(value: string[]) => void", description: "Fires when expansion changes." },\n    { prop: "selected", default: "\u2014", type: "string | null", description: "Controlled selected item value." },\n    { prop: "defaultSelected", default: "\u2014", type: "string", description: "Uncontrolled initial selection." },\n    { prop: "onSelectedChange", default: "\u2014", type: "(value: string | null) => void", description: "Fires when selection changes." }\n    ]}\n  />\n</div>\n\n### TreeItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "Unique identifier (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "Disables selection and expansion." }\n    ]}\n  />\n</div>\n\n### TreeItemTrigger\n\nFocusable row label. Shows a chevron when the item has `TreeItemContent`.\n\n### TreeItemContent\n\nNested `TreeItem` group. Mounted only while the parent is expanded.',
+      searchText: 'tree expandable hierarchical list for files, folders, and nested navigation. <div class="not-content my-6">\n  <treepreview client:load />\n</div>\n\n\n## contract\n\n<div class="not-content">\n  <specrenderer client:load component="tree" />\n</div>\n\n## installation\n\n<packageinstall />\n\n## usage\n\n```tsx\n<tree defaultexpanded={["src"]} defaultselected="button">\n  <treeitem value="src">\n    <treeitemtrigger>src</treeitemtrigger>\n    <treeitemcontent>\n      <treeitem value="button">\n        <treeitemtrigger>button.tsx</treeitemtrigger>\n      </treeitem>\n    </treeitemcontent>\n  </treeitem>\n  <treeitem value="package">\n    <treeitemtrigger>package.json</treeitemtrigger>\n  </treeitem>\n</tree>\n```\n\nbuilt from foundation spacing, radius, color aliases, and typography tokens (same density as sidebar / menu). chevron expands branches; row click selects. arrow keys follow the wai-aria tree pattern.\n\n## api reference\n\n### tree\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "row typography size." },\n    { prop: "expanded", default: "\u2014", type: "string[]", description: "controlled expanded item values." },\n    { prop: "defaultexpanded", default: "\u2014", type: "string[]", description: "uncontrolled initial expanded values." },\n    { prop: "onexpandedchange", default: "\u2014", type: "(value: string[]) => void", description: "fires when expansion changes." },\n    { prop: "selected", default: "\u2014", type: "string | null", description: "controlled selected item value." },\n    { prop: "defaultselected", default: "\u2014", type: "string", description: "uncontrolled initial selection." },\n    { prop: "onselectedchange", default: "\u2014", type: "(value: string | null) => void", description: "fires when selection changes." }\n    ]}\n  />\n</div>\n\n### treeitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "unique identifier (required)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "disables selection and expansion." }\n    ]}\n  />\n</div>\n\n### treeitemtrigger\n\nfocusable row label. shows a chevron when the item has `treeitemcontent`.\n\n### treeitemcontent\n\nnested `treeitem` group. mounted only while the parent is expanded.\n'
+    },
+    {
+      slug: "development/index",
+      href: "/development/index/",
+      title: "Development",
+      description: "Install, theme, and ship RefineUI in product code.",
+      category: "development",
+      content: "RefineUI documentation is a **first-class consumer** of the design system \u2014 the same packages, tokens, and motion roles as production.\n\n## Guides\n\n- [Getting started](/getting-started/) \u2014 architecture, install, and first example\n- [Installation](/development/installation/) \u2014 add packages and load CSS\n- [Theming](/development/theming/) \u2014 light/dark and token surfaces\n- [Motion](/development/motion/) \u2014 CSS transitions vs motion runtime\n\n## Principles\n\n1. **Tokens only** \u2014 no arbitrary px, hex, or ms in component styles\n2. **Real components** \u2014 docs render `@refineui/react`, never mockups\n3. **Motion roles** \u2014 `fast`, `press`, `panel` via `--refineui-motion-*`\n4. **Docs match product** \u2014 same packages, tokens, and stylesheets in apps and this site",
+      searchText: "development install, theme, and ship refineui in product code. \nrefineui documentation is a **first-class consumer** of the design system \u2014 the same packages, tokens, and motion roles as production.\n\n## guides\n\n- [getting started](/getting-started/) \u2014 architecture, install, and first example\n- [installation](/development/installation/) \u2014 add packages and load css\n- [theming](/development/theming/) \u2014 light/dark and token surfaces\n- [motion](/development/motion/) \u2014 css transitions vs motion runtime\n\n## principles\n\n1. **tokens only** \u2014 no arbitrary px, hex, or ms in component styles\n2. **real components** \u2014 docs render `@refineui/react`, never mockups\n3. **motion roles** \u2014 `fast`, `press`, `panel` via `--refineui-motion-*`\n4. **docs match product** \u2014 same packages, tokens, and stylesheets in apps and this site\n"
+    },
+    {
+      slug: "development/installation",
+      href: "/development/installation/",
+      title: "Installation",
+      description: "Add RefineUI packages and load Foundation CSS.",
+      category: "development",
+      content: '<PackageInstallFull />\n\n## CSS\n\nLoad token CSS and component interaction styles once at the app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\n## First component\n\n```tsx\nexport function App() {\n  return <Button variant="primary">Continue</Button>;\n}\n```\n\nUse the same imports in documentation previews \u2014 no parallel mock UI.',
+      searchText: 'installation add refineui packages and load foundation css. \n<packageinstallfull />\n\n## css\n\nload token css and component interaction styles once at the app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\n## first component\n\n```tsx\nexport function app() {\n  return <button variant="primary">continue</button>;\n}\n```\n\nuse the same imports in documentation previews \u2014 no parallel mock ui.\n'
+    },
+    {
+      slug: "development/motion",
+      href: "/development/motion/",
+      title: "Motion in code",
+      description: "Prefer CSS transitions on motion tokens; use a runtime only when required.",
+      category: "development",
+      content: "Motion is a first-class design-system primitive.\n\n## Prefer CSS transitions\n\nMicro-interactions (hover, press, focus color) use semantic roles:\n\n```css\n.control {\n  transition:\n    transform var(--refineui-motion-duration-fast)\n      var(--refineui-motion-easing-ease-out),\n    background-color var(--refineui-motion-duration-fast)\n      var(--refineui-motion-easing-ease-out);\n}\n\n.control:active {\n  transform: scale(var(--refineui-motion-scale-press));\n}\n```\n\n## Motion runtime\n\nUse a runtime **only** when you need layout animation, enter/exit, shared-element, spring, or sequenced choreography (Dialog, Drawer, Accordion). Resolve duration from `semanticInteraction` / `motionMsToNumber` \u2014 never hard-code `150ms`.\n\n## Reduced motion\n\nHonor `prefers-reduced-motion: reduce` \u2014 collapse transforms and non-essential animation. Foundation pages: [Motion](/foundations/motion/).",
+      searchText: "motion in code prefer css transitions on motion tokens; use a runtime only when required. \nmotion is a first-class design-system primitive.\n\n## prefer css transitions\n\nmicro-interactions (hover, press, focus color) use semantic roles:\n\n```css\n.control {\n  transition:\n    transform var(--refineui-motion-duration-fast)\n      var(--refineui-motion-easing-ease-out),\n    background-color var(--refineui-motion-duration-fast)\n      var(--refineui-motion-easing-ease-out);\n}\n\n.control:active {\n  transform: scale(var(--refineui-motion-scale-press));\n}\n```\n\n## motion runtime\n\nuse a runtime **only** when you need layout animation, enter/exit, shared-element, spring, or sequenced choreography (dialog, drawer, accordion). resolve duration from `semanticinteraction` / `motionmstonumber` \u2014 never hard-code `150ms`.\n\n## reduced motion\n\nhonor `prefers-reduced-motion: reduce` \u2014 collapse transforms and non-essential animation. foundation pages: [motion](/foundations/motion/).\n"
+    },
+    {
+      slug: "development/theming",
+      href: "/development/theming/",
+      title: "Theming",
+      description: "Light and dark surfaces from semantic color aliases.",
+      category: "development",
+      content: 'RefineUI themes resolve through semantic aliases (`--refineui-color-alias-*`). Toggle dark by setting `data-theme="dark"` (and optionally `.dark`) on the document root \u2014 the same path documentation uses.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## Rules\n\n- Consume **aliases** in UI (`background-brand`, `foreground-primary`), not raw palette steps\n- Component sizes stay linked to Foundation size steps\n- Do not invent theme-specific hex in product CSS\n\nSee [Color](/foundations/color/) for the visual token map.',
+      searchText: 'theming light and dark surfaces from semantic color aliases. \nrefineui themes resolve through semantic aliases (`--refineui-color-alias-*`). toggle dark by setting `data-theme="dark"` (and optionally `.dark`) on the document root \u2014 the same path documentation uses.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## rules\n\n- consume **aliases** in ui (`background-brand`, `foreground-primary`), not raw palette steps\n- component sizes stay linked to foundation size steps\n- do not invent theme-specific hex in product css\n\nsee [color](/foundations/color/) for the visual token map.\n'
+    },
+    {
+      slug: "foundations/border",
+      href: "/foundations/border/",
+      title: "Border",
+      description: "Stroke widths for outlines and dividers.",
+      category: "foundations",
+      content: 'Stroke widths are Foundation keys. Default UI chrome uses `strokeWidthThin`. Border **color** comes from color aliases (`borderDefault`, `borderSubtle`, `borderFocus`), not from this scale.\n\n## Scale\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Stroke width scale"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "value", header: "Value", mono: true },\n    ]}\n    rows={[\n      { token: "strokeWidthNone", value: "0" },\n      { token: "strokeWidthHairline", value: "0.5px" },\n      { token: "strokeWidthThin", value: "1px" },\n      { token: "strokeWidthThick", value: "2px" },\n      { token: "strokeWidthThicker", value: "4px" },\n      { token: "strokeWidthThickest", value: "6px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <StrokePreview client:load />\n</div>\n\n## Usage\n\n```tsx\n<Box\n  border="strokeWidthThin"\n  borderColor="borderDefault"\n  radius="roundedLarge"\n  padding="sizeLarge"\n  background="backgroundSurface"\n>\n  Outlined surface\n</Box>\n```',
+      searchText: 'border stroke widths for outlines and dividers. \nstroke widths are foundation keys. default ui chrome uses `strokewidththin`. border **color** comes from color aliases (`borderdefault`, `bordersubtle`, `borderfocus`), not from this scale.\n\n## scale\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="stroke width scale"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "value", header: "value", mono: true },\n    ]}\n    rows={[\n      { token: "strokewidthnone", value: "0" },\n      { token: "strokewidthhairline", value: "0.5px" },\n      { token: "strokewidththin", value: "1px" },\n      { token: "strokewidththick", value: "2px" },\n      { token: "strokewidththicker", value: "4px" },\n      { token: "strokewidththickest", value: "6px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <strokepreview client:load />\n</div>\n\n## usage\n\n```tsx\n<box\n  border="strokewidththin"\n  bordercolor="borderdefault"\n  radius="roundedlarge"\n  padding="sizelarge"\n  background="backgroundsurface"\n>\n  outlined surface\n</box>\n```\n'
+    },
+    {
+      slug: "foundations/color",
+      href: "/foundations/color/",
+      title: "Color",
+      description: "Palette primitives and semantic aliases \u2014 backgrounds, foregrounds, borders, and surfaces.",
+      category: "foundations",
+      content: 'Paint UI with **aliases** (`foregroundPrimary`, `backgroundBrand`, `borderDefault`). The palette is the Foundation source those aliases resolve to in light and dark. Do not paste hex or raw palette keys into product UI.\n\n`surfaceOverlay` is the modal scrim \u2014 Foundation RGBA, not a palette pair (`--refineui-color-alias-surface-overlay`).\n\n## Aliases\n\nLive CSS variables. Captions show `light / dark` palette keys.\n\n<div class="not-content">\n  <ColorAliasPreview client:load />\n</div>\n\n## Palette\n\n<div class="not-content">\n  <ColorPalettePreview client:load />\n</div>\n\n## Usage\n\n```tsx\n<Box\n  padding="sizeLarge"\n  background="backgroundSurface"\n  radius="roundedLarge"\n  border="strokeWidthThin"\n  borderColor="borderDefault"\n>\n  Surface\n</Box>\n```\n\n```tsx\n<div style={{ color: semanticColorCssVar("foregroundPrimary") }} />\n```',
+      searchText: 'color palette primitives and semantic aliases \u2014 backgrounds, foregrounds, borders, and surfaces. \npaint ui with **aliases** (`foregroundprimary`, `backgroundbrand`, `borderdefault`). the palette is the foundation source those aliases resolve to in light and dark. do not paste hex or raw palette keys into product ui.\n\n`surfaceoverlay` is the modal scrim \u2014 foundation rgba, not a palette pair (`--refineui-color-alias-surface-overlay`).\n\n## aliases\n\nlive css variables. captions show `light / dark` palette keys.\n\n<div class="not-content">\n  <coloraliaspreview client:load />\n</div>\n\n## palette\n\n<div class="not-content">\n  <colorpalettepreview client:load />\n</div>\n\n## usage\n\n```tsx\n<box\n  padding="sizelarge"\n  background="backgroundsurface"\n  radius="roundedlarge"\n  border="strokewidththin"\n  bordercolor="borderdefault"\n>\n  surface\n</box>\n```\n\n```tsx\n<div style={{ color: semanticcolorcssvar("foregroundprimary") }} />\n```\n'
+    },
+    {
+      slug: "foundations/design-tokens",
+      href: "/foundations/design-tokens/",
+      title: "Design tokens",
+      description: "Semantic variables that power RefineUI \u2014 color, type, space, motion, and stacking.",
+      category: "foundations",
+      content: 'Tokens are the single source for visual values. `@refineui/tokens` maps Foundation scales to CSS variables and Tailwind utilities. Components and product UI should reference **semantic names**, not palette hex or raw `px`.\n\n## Categories\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Token categories"\n    columns={[\n      { key: "category", header: "Category", hrefKey: "href" },\n      { key: "use", header: "Use for" },\n    ]}\n    rows={[\n      { category: "Color", href: "/foundations/color/", use: "Surfaces, text, borders, brand, status" },\n      { category: "Typography", href: "/foundations/typography/", use: "Text roles (headingMd, bodyMd, \u2026)" },\n      { category: "Spacing", href: "/foundations/spacing/", use: "Gaps, padding, margins" },\n      { category: "Sizing", href: "/foundations/sizing/", use: "Control heights, icons, layout steps" },\n      { category: "Radius", href: "/foundations/radius/", use: "Corner radii" },\n      { category: "Border", href: "/foundations/border/", use: "Stroke widths" },\n      { category: "Elevation", href: "/foundations/elevation/", use: "Shadows / depth" },\n      { category: "Opacity", href: "/foundations/opacity/", use: "Disabled wash, overlay helpers" },\n      { category: "Motion", href: "/foundations/motion/", use: "Duration, easing, press scale" },\n      { category: "Z-index", href: "/foundations/z-index/", use: "Overlay stacking" },\n    ]}\n  />\n</div>\n\n## Rules\n\n1. Prefer semantic aliases (`backgroundSurface`, `sizeMedium`, `fast`) over Foundation primitives in product code.\n2. If a value is missing, update Foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. Import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.',
+      searchText: 'design tokens semantic variables that power refineui \u2014 color, type, space, motion, and stacking. \ntokens are the single source for visual values. `@refineui/tokens` maps foundation scales to css variables and tailwind utilities. components and product ui should reference **semantic names**, not palette hex or raw `px`.\n\n## categories\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="token categories"\n    columns={[\n      { key: "category", header: "category", hrefkey: "href" },\n      { key: "use", header: "use for" },\n    ]}\n    rows={[\n      { category: "color", href: "/foundations/color/", use: "surfaces, text, borders, brand, status" },\n      { category: "typography", href: "/foundations/typography/", use: "text roles (headingmd, bodymd, \u2026)" },\n      { category: "spacing", href: "/foundations/spacing/", use: "gaps, padding, margins" },\n      { category: "sizing", href: "/foundations/sizing/", use: "control heights, icons, layout steps" },\n      { category: "radius", href: "/foundations/radius/", use: "corner radii" },\n      { category: "border", href: "/foundations/border/", use: "stroke widths" },\n      { category: "elevation", href: "/foundations/elevation/", use: "shadows / depth" },\n      { category: "opacity", href: "/foundations/opacity/", use: "disabled wash, overlay helpers" },\n      { category: "motion", href: "/foundations/motion/", use: "duration, easing, press scale" },\n      { category: "z-index", href: "/foundations/z-index/", use: "overlay stacking" },\n    ]}\n  />\n</div>\n\n## rules\n\n1. prefer semantic aliases (`backgroundsurface`, `sizemedium`, `fast`) over foundation primitives in product code.\n2. if a value is missing, update foundation first, then `packages/tokens` \u2014 do not invent a one-off.\n3. import `@refineui/react/refineui.css` once so control hover / focus motion stays consistent.\n'
+    },
+    {
+      slug: "foundations/elevation",
+      href: "/foundations/elevation/",
+      title: "Elevation",
+      description: "Shadow recipes for cards, popovers, and floating surfaces.",
+      category: "foundations",
+      content: 'Each elevation step (`--refineui-elevation-N`) automatically switches between light and dark values based on the active theme. Use the bare variable \u2014 explicit `*light` / `*dark` suffixes are only needed when a surface must stay in one mode regardless of theme.\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Elevation CSS variables"\n    columns={[\n      { key: "use", header: "Use" },\n      { key: "css", header: "CSS", mono: true },\n    ]}\n    rows={[\n      { use: "Theme-aware (recommended)", css: "--refineui-elevation-8" },\n      { use: "Force light", css: "--refineui-elevation-8light" },\n      { use: "Force dark", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <ElevationPreview client:load />\n</div>\n\n## Usage\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-8);\n}\n```',
+      searchText: 'elevation shadow recipes for cards, popovers, and floating surfaces. \neach elevation step (`--refineui-elevation-n`) automatically switches between light and dark values based on the active theme. use the bare variable \u2014 explicit `*light` / `*dark` suffixes are only needed when a surface must stay in one mode regardless of theme.\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="elevation css variables"\n    columns={[\n      { key: "use", header: "use" },\n      { key: "css", header: "css", mono: true },\n    ]}\n    rows={[\n      { use: "theme-aware (recommended)", css: "--refineui-elevation-8" },\n      { use: "force light", css: "--refineui-elevation-8light" },\n      { use: "force dark", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <elevationpreview client:load />\n</div>\n\n## usage\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-8);\n}\n```\n'
+    },
+    {
+      slug: "foundations/index",
+      href: "/foundations/index/",
+      title: "Foundations",
+      description: "Design tokens and layout principles that every RefineUI surface is built on.",
+      category: "foundations",
+      content: '<div class="not-content">\n  <FoundationCatalog client:load />\n</div>',
+      searchText: 'foundations design tokens and layout principles that every refineui surface is built on. \n<div class="not-content">\n  <foundationcatalog client:load />\n</div>\n'
+    },
+    {
+      slug: "foundations/layout",
+      href: "/foundations/layout/",
+      title: "Layout",
+      description: "Spatial rhythm, containers, grids, alignment, and responsive rules.",
+      category: "foundations",
+      content: 'Layout foundations describe how space is composed. The React primitives that implement them are **[Box, Stack, Grid, Container](/components/stack/)** (plus Resizable and ScrollArea).\n\n## Principles\n\n1. **Token gaps and padding** \u2014 Use spacing keys (`sizeSmall`, `sizeLarge`), not arbitrary `px`.\n2. **Compose primitives** \u2014 Prefer `Stack` / `Grid` / `Container` over one-off flex CSS in product screens.\n3. **One primary reading width** \u2014 Constrain long text with `Container` or a Foundation max-width token.\n\n## Container\n\nA container centers content and caps width so long pages stay readable. In React, use the [`Container`](/components/container/) primitive with spacing-token padding.\n\n**When to use**\n\n- Documentation and marketing pages\n- Form or settings columns that should not stretch edge-to-edge on wide screens\n\n**Rules**\n\n- Prefer Foundation / component max-width tokens over inventing a new breakpoint width.\n- Pair with page-level vertical spacing (`sizeXXLarge` / `sizeXXXLarge`) rather than ad-hoc margins.\n- Nested containers are usually unnecessary \u2014 one page shell is enough.\n\n## Grid\n\nUse a grid when content is two-dimensional (cards, dashboards, galleries). In React, use [`Grid`](/components/grid/) with `columns` or `minItem` (Foundation size) and spacing-token gaps.\n\n**When to use**\n\n- Repeating cards or tiles\n- Form fields in two columns on desktop\n- Dense data that still needs aligned columns\n\n**Rules**\n\n- Gaps come from spacing tokens (`gap="sizeLarge"`).\n- Prefer `minItem` auto-fit for fluid card grids; fixed `columns` when the count is intentional.\n- Collapse to a single column on small viewports (see [Responsive](#responsive)).\n\n## Alignment\n\nAlignment controls how children sit along the main and cross axes. In React, `Stack` and `Grid` expose `align` and `justify` (`start`, `center`, `end`, `between`, \u2026).\n\n- Align labels and controls to a shared start edge in forms.\n- Center only when the block is intentionally focal (empty states, dialogs).\n- Prefer `between` for toolbars (title left, actions right) instead of manual `margin-left: auto` on every child.\n\n## Responsive\n\nLayouts should reflow with the viewport while keeping spacing and type tokens stable. Prefer fewer columns, stacked stacks, and full-width controls on small screens.\n\n1. **Same tokens** \u2014 Do not invent a second spacing scale for mobile.\n2. **Collapse structure** \u2014 Grids become one column; side-by-side stacks become `direction="column"`.\n3. **Touch targets** \u2014 Keep control sizes from the component API (`size="md"` / `lg`); do not shrink below Foundation control heights.\n4. **Navigation** \u2014 Desktop rails become drawers on small screens (see [Drawer](/components/drawer/) and [Sidebar](/components/sidebar/)).\n\n## Related components\n\n- [Stack](/components/stack/)\n- [Grid](/components/grid/)\n- [Container](/components/container/)\n- [Box](/components/box/)',
+      searchText: 'layout spatial rhythm, containers, grids, alignment, and responsive rules. \nlayout foundations describe how space is composed. the react primitives that implement them are **[box, stack, grid, container](/components/stack/)** (plus resizable and scrollarea).\n\n## principles\n\n1. **token gaps and padding** \u2014 use spacing keys (`sizesmall`, `sizelarge`), not arbitrary `px`.\n2. **compose primitives** \u2014 prefer `stack` / `grid` / `container` over one-off flex css in product screens.\n3. **one primary reading width** \u2014 constrain long text with `container` or a foundation max-width token.\n\n## container\n\na container centers content and caps width so long pages stay readable. in react, use the [`container`](/components/container/) primitive with spacing-token padding.\n\n**when to use**\n\n- documentation and marketing pages\n- form or settings columns that should not stretch edge-to-edge on wide screens\n\n**rules**\n\n- prefer foundation / component max-width tokens over inventing a new breakpoint width.\n- pair with page-level vertical spacing (`sizexxlarge` / `sizexxxlarge`) rather than ad-hoc margins.\n- nested containers are usually unnecessary \u2014 one page shell is enough.\n\n## grid\n\nuse a grid when content is two-dimensional (cards, dashboards, galleries). in react, use [`grid`](/components/grid/) with `columns` or `minitem` (foundation size) and spacing-token gaps.\n\n**when to use**\n\n- repeating cards or tiles\n- form fields in two columns on desktop\n- dense data that still needs aligned columns\n\n**rules**\n\n- gaps come from spacing tokens (`gap="sizelarge"`).\n- prefer `minitem` auto-fit for fluid card grids; fixed `columns` when the count is intentional.\n- collapse to a single column on small viewports (see [responsive](#responsive)).\n\n## alignment\n\nalignment controls how children sit along the main and cross axes. in react, `stack` and `grid` expose `align` and `justify` (`start`, `center`, `end`, `between`, \u2026).\n\n- align labels and controls to a shared start edge in forms.\n- center only when the block is intentionally focal (empty states, dialogs).\n- prefer `between` for toolbars (title left, actions right) instead of manual `margin-left: auto` on every child.\n\n## responsive\n\nlayouts should reflow with the viewport while keeping spacing and type tokens stable. prefer fewer columns, stacked stacks, and full-width controls on small screens.\n\n1. **same tokens** \u2014 do not invent a second spacing scale for mobile.\n2. **collapse structure** \u2014 grids become one column; side-by-side stacks become `direction="column"`.\n3. **touch targets** \u2014 keep control sizes from the component api (`size="md"` / `lg`); do not shrink below foundation control heights.\n4. **navigation** \u2014 desktop rails become drawers on small screens (see [drawer](/components/drawer/) and [sidebar](/components/sidebar/)).\n\n## related components\n\n- [stack](/components/stack/)\n- [grid](/components/grid/)\n- [container](/components/container/)\n- [box](/components/box/)\n'
+    },
+    {
+      slug: "foundations/motion",
+      href: "/foundations/motion/",
+      title: "Motion",
+      description: "Duration, easing, scale, and distance roles for interaction.",
+      category: "foundations",
+      content: 'Use **semantic roles** (`fast`, `press`, `panel`) \u2014 CSS `--refineui-motion-duration-fast`, `--refineui-motion-scale-press`. Do not write `150ms` or a one-off curve in a component. `refineui.css` already covers control hover and focus.\n\n## Roles (summary)\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Motion role summary"\n    columns={[\n      { key: "kind", header: "Kind" },\n      { key: "examples", header: "Examples", mono: true },\n    ]}\n    rows={[\n      { kind: "Duration", examples: "instant, fast, normal, medium, slow, overlay, panel" },\n      { kind: "Easing", examples: "standard, emphasized, panel, content, easeOut" },\n      { kind: "Scale", examples: "enter, press, hoverGrow" },\n      { kind: "Distance", examples: "float (4px)" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <MotionPreview client:load />\n</div>\n\n## Usage\n\n```css\n.control {\n  transition: transform var(--refineui-motion-duration-fast)\n    var(--refineui-motion-easing-standard);\n}\n\n.control[data-pressed] {\n  transform: scale(var(--refineui-motion-scale-press));\n}\n```',
+      searchText: 'motion duration, easing, scale, and distance roles for interaction. \nuse **semantic roles** (`fast`, `press`, `panel`) \u2014 css `--refineui-motion-duration-fast`, `--refineui-motion-scale-press`. do not write `150ms` or a one-off curve in a component. `refineui.css` already covers control hover and focus.\n\n## roles (summary)\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="motion role summary"\n    columns={[\n      { key: "kind", header: "kind" },\n      { key: "examples", header: "examples", mono: true },\n    ]}\n    rows={[\n      { kind: "duration", examples: "instant, fast, normal, medium, slow, overlay, panel" },\n      { kind: "easing", examples: "standard, emphasized, panel, content, easeout" },\n      { kind: "scale", examples: "enter, press, hovergrow" },\n      { kind: "distance", examples: "float (4px)" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <motionpreview client:load />\n</div>\n\n## usage\n\n```css\n.control {\n  transition: transform var(--refineui-motion-duration-fast)\n    var(--refineui-motion-easing-standard);\n}\n\n.control[data-pressed] {\n  transform: scale(var(--refineui-motion-scale-press));\n}\n```\n'
+    },
+    {
+      slug: "foundations/opacity",
+      href: "/foundations/opacity/",
+      title: "Opacity",
+      description: "Shared opacity steps and overlay helpers.",
+      category: "foundations",
+      content: '<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Opacity tokens"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "value", header: "Value", mono: true },\n      { key: "use", header: "Use" },\n    ]}\n    rows={[\n      { token: "opacityFull", value: "1", use: "Default" },\n      { token: "opacityDisabled", value: "0.5", use: "Disabled wash" },\n      { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (dark)" },\n    ]}\n  />\n</div>\n\nPage dimmers use `surfaceOverlay` / `--refineui-overlay-backdrop` (see [Color](/foundations/color/)), not a custom alpha.\n\n<div class="not-content">\n  <OpacityPreview client:load />\n</div>\n\n## Usage\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```',
+      searchText: 'opacity shared opacity steps and overlay helpers. \n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="opacity tokens"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "value", header: "value", mono: true },\n      { key: "use", header: "use" },\n    ]}\n    rows={[\n      { token: "opacityfull", value: "1", use: "default" },\n      { token: "opacitydisabled", value: "0.5", use: "disabled wash" },\n      { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (dark)" },\n    ]}\n  />\n</div>\n\npage dimmers use `surfaceoverlay` / `--refineui-overlay-backdrop` (see [color](/foundations/color/)), not a custom alpha.\n\n<div class="not-content">\n  <opacitypreview client:load />\n</div>\n\n## usage\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```\n'
+    },
+    {
+      slug: "foundations/radius",
+      href: "/foundations/radius/",
+      title: "Radius",
+      description: "Corner radii from Foundation \u2014 use keys, not raw pixels.",
+      category: "foundations",
+      content: 'Corners are Foundation keys (`roundedLarge`, `roundedXXLarge`). `roundedCircle` is the pill / full round.\n\n## Scale\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Radius scale"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "value", header: "Value", mono: true },\n    ]}\n    rows={[\n      { token: "roundedNone", value: "0" },\n      { token: "roundedXSmall", value: "2px" },\n      { token: "roundedSmall", value: "4px" },\n      { token: "roundedMedium", value: "6px" },\n      { token: "roundedLarge", value: "8px" },\n      { token: "roundedXLarge", value: "12px" },\n      { token: "roundedXXLarge", value: "16px" },\n      { token: "roundedCircle", value: "9999px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <RadiusPreview client:load />\n</div>\n\n## Usage\n\n```tsx\n<Box\n  padding="sizeLarge"\n  radius="roundedXLarge"\n  border="strokeWidthThin"\n  borderColor="borderDefault"\n  background="backgroundSurface"\n>\n  Rounded surface\n</Box>\n```',
+      searchText: 'radius corner radii from foundation \u2014 use keys, not raw pixels. \ncorners are foundation keys (`roundedlarge`, `roundedxxlarge`). `roundedcircle` is the pill / full round.\n\n## scale\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="radius scale"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "value", header: "value", mono: true },\n    ]}\n    rows={[\n      { token: "roundednone", value: "0" },\n      { token: "roundedxsmall", value: "2px" },\n      { token: "roundedsmall", value: "4px" },\n      { token: "roundedmedium", value: "6px" },\n      { token: "roundedlarge", value: "8px" },\n      { token: "roundedxlarge", value: "12px" },\n      { token: "roundedxxlarge", value: "16px" },\n      { token: "roundedcircle", value: "9999px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <radiuspreview client:load />\n</div>\n\n## usage\n\n```tsx\n<box\n  padding="sizelarge"\n  radius="roundedxlarge"\n  border="strokewidththin"\n  bordercolor="borderdefault"\n  background="backgroundsurface"\n>\n  rounded surface\n</box>\n```\n'
+    },
+    {
+      slug: "foundations/sizing",
+      href: "/foundations/sizing/",
+      title: "Sizing",
+      description: "Foundation layout steps, control heights, and icon dimensions.",
+      category: "foundations",
+      content: 'Component dimensions alias **Foundation size steps** through `componentSizes` in `@refineui/tokens`. Do not hardcode control heights or icon boxes in React styles.\n\n## What to use\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Sizing layers"\n    columns={[\n      { key: "layer", header: "Layer", mono: true },\n      { key: "purpose", header: "Purpose" },\n    ]}\n    rows={[\n      { layer: "foundationSizes", purpose: "Global size steps (source of truth in Foundation)" },\n      { layer: "componentSizes", purpose: "Web Kit dimension aliases \u2192 Foundation keys" },\n      { layer: "iconSizes", purpose: "Glyph sizes in px (xxsmall \u2026 xxlarge)" },\n    ]}\n  />\n</div>\n\n## Icon sizes\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Icon sizes"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "px", header: "px", mono: true },\n    ]}\n    rows={[\n      { token: "xxsmall", px: "12" },\n      { token: "xsmall", px: "16" },\n      { token: "small", px: "20" },\n      { token: "medium", px: "24" },\n      { token: "large", px: "28" },\n      { token: "xlarge", px: "32" },\n      { token: "xxlarge", px: "48" },\n    ]}\n  />\n</div>\n\n## Examples\n\nControl heights (button, input) and overlay widths resolve as CSS variables such as `--refineui-size-button-min-height-md` and `--refineui-size-dialog-max-width`. Prefer component props (`size="md"`) over reading those vars in product CSS unless you are composing a custom chrome.\n\n```tsx\n<WebIcon name="search" size={iconSizes.small} />\n```',
+      searchText: 'sizing foundation layout steps, control heights, and icon dimensions. \ncomponent dimensions alias **foundation size steps** through `componentsizes` in `@refineui/tokens`. do not hardcode control heights or icon boxes in react styles.\n\n## what to use\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="sizing layers"\n    columns={[\n      { key: "layer", header: "layer", mono: true },\n      { key: "purpose", header: "purpose" },\n    ]}\n    rows={[\n      { layer: "foundationsizes", purpose: "global size steps (source of truth in foundation)" },\n      { layer: "componentsizes", purpose: "web kit dimension aliases \u2192 foundation keys" },\n      { layer: "iconsizes", purpose: "glyph sizes in px (xxsmall \u2026 xxlarge)" },\n    ]}\n  />\n</div>\n\n## icon sizes\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="icon sizes"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "px", header: "px", mono: true },\n    ]}\n    rows={[\n      { token: "xxsmall", px: "12" },\n      { token: "xsmall", px: "16" },\n      { token: "small", px: "20" },\n      { token: "medium", px: "24" },\n      { token: "large", px: "28" },\n      { token: "xlarge", px: "32" },\n      { token: "xxlarge", px: "48" },\n    ]}\n  />\n</div>\n\n## examples\n\ncontrol heights (button, input) and overlay widths resolve as css variables such as `--refineui-size-button-min-height-md` and `--refineui-size-dialog-max-width`. prefer component props (`size="md"`) over reading those vars in product css unless you are composing a custom chrome.\n\n```tsx\n<webicon name="search" size={iconsizes.small} />\n```\n'
+    },
+    {
+      slug: "foundations/spacing",
+      href: "/foundations/spacing/",
+      title: "Spacing",
+      description: "T-shirt spacing scale for gaps, padding, and margins.",
+      category: "foundations",
+      content: 'Gaps and padding use `spacings`. Prefer these keys on `Stack`, `Box`, and layout props \u2014 not arbitrary pixels.\n\n## Scale\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Spacing scale"\n    columns={[\n      { key: "token", header: "Token", mono: true },\n      { key: "value", header: "Value", mono: true },\n    ]}\n    rows={[\n      { token: "sizeNone", value: "0" },\n      { token: "sizeXXXSmall", value: "2px" },\n      { token: "sizeXXSmall", value: "4px" },\n      { token: "sizeXSmall", value: "6px" },\n      { token: "sizeSmall", value: "8px" },\n      { token: "sizeMedium", value: "10px" },\n      { token: "sizeLarge", value: "16px" },\n      { token: "sizeXLarge", value: "20px" },\n      { token: "sizeXXLarge", value: "24px" },\n      { token: "sizeXXXLarge", value: "32px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <SpacingPreview client:load />\n</div>\n\n## Icon glyph sizes\n\nIcon pixels are separate from spacing (`iconSizes`). Use them for `WebIcon` / glyph slots only.\n\n<div class="not-content">\n  <IconSizePreview client:load />\n</div>\n\n## Usage\n\n```tsx\n<Stack gap="sizeMedium">\n  <Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">\n    Inset\n  </Box>\n</Stack>\n```',
+      searchText: 'spacing t-shirt spacing scale for gaps, padding, and margins. \ngaps and padding use `spacings`. prefer these keys on `stack`, `box`, and layout props \u2014 not arbitrary pixels.\n\n## scale\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="spacing scale"\n    columns={[\n      { key: "token", header: "token", mono: true },\n      { key: "value", header: "value", mono: true },\n    ]}\n    rows={[\n      { token: "sizenone", value: "0" },\n      { token: "sizexxxsmall", value: "2px" },\n      { token: "sizexxsmall", value: "4px" },\n      { token: "sizexsmall", value: "6px" },\n      { token: "sizesmall", value: "8px" },\n      { token: "sizemedium", value: "10px" },\n      { token: "sizelarge", value: "16px" },\n      { token: "sizexlarge", value: "20px" },\n      { token: "sizexxlarge", value: "24px" },\n      { token: "sizexxxlarge", value: "32px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <spacingpreview client:load />\n</div>\n\n## icon glyph sizes\n\nicon pixels are separate from spacing (`iconsizes`). use them for `webicon` / glyph slots only.\n\n<div class="not-content">\n  <iconsizepreview client:load />\n</div>\n\n## usage\n\n```tsx\n<stack gap="sizemedium">\n  <box padding="sizelarge" background="backgroundsurface" radius="roundedlarge">\n    inset\n  </box>\n</stack>\n```\n'
+    },
+    {
+      slug: "foundations/typography",
+      href: "/foundations/typography/",
+      title: "Typography",
+      description: "Semantic text roles on top of Foundation heading, title, body, and caption styles.",
+      category: "foundations",
+      content: 'Use `Text` with a **semantic role** (`headingMd`, `bodyMd`, `labelSm`). Each role aliases a Foundation preset in `typographys`. Do not pass raw `fontSize` or Foundation keys like `body2` in product UI.\n\n## Roles\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Typography roles"\n    columns={[\n      { key: "family", header: "Role family" },\n      { key: "examples", header: "Examples", mono: true },\n      { key: "use", header: "Typical use" },\n    ]}\n    rows={[\n      { family: "Display", examples: "displayLg, displayMd, displaySm", use: "Marketing / hero" },\n      { family: "Heading", examples: "headingLg, headingMd, headingSm", use: "Page and section titles" },\n      { family: "Title", examples: "titleLg, titleMd, titleSm", use: "Card / dialog titles" },\n      { family: "Subtitle", examples: "subtitleLg, subtitleMd", use: "Emphasized secondary lines" },\n      { family: "Body", examples: "bodyLg \u2026 bodyXs", use: "Reading text" },\n      { family: "Label", examples: "labelLg, labelMd, labelSm", use: "Form and menu labels" },\n      { family: "Caption", examples: "captionLg \u2026 captionSm", use: "Metadata and helpers" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <TypographyPreview client:load />\n</div>\n\n## Usage\n\n```tsx\n<Text variant="headingMd" as="h2">\n  Section title\n</Text>\n<Text variant="bodyMd" as="p">\n  Body copy.\n</Text>\n```',
+      searchText: 'typography semantic text roles on top of foundation heading, title, body, and caption styles. \nuse `text` with a **semantic role** (`headingmd`, `bodymd`, `labelsm`). each role aliases a foundation preset in `typographys`. do not pass raw `fontsize` or foundation keys like `body2` in product ui.\n\n## roles\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="typography roles"\n    columns={[\n      { key: "family", header: "role family" },\n      { key: "examples", header: "examples", mono: true },\n      { key: "use", header: "typical use" },\n    ]}\n    rows={[\n      { family: "display", examples: "displaylg, displaymd, displaysm", use: "marketing / hero" },\n      { family: "heading", examples: "headinglg, headingmd, headingsm", use: "page and section titles" },\n      { family: "title", examples: "titlelg, titlemd, titlesm", use: "card / dialog titles" },\n      { family: "subtitle", examples: "subtitlelg, subtitlemd", use: "emphasized secondary lines" },\n      { family: "body", examples: "bodylg \u2026 bodyxs", use: "reading text" },\n      { family: "label", examples: "labellg, labelmd, labelsm", use: "form and menu labels" },\n      { family: "caption", examples: "captionlg \u2026 captionsm", use: "metadata and helpers" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <typographypreview client:load />\n</div>\n\n## usage\n\n```tsx\n<text variant="headingmd" as="h2">\n  section title\n</text>\n<text variant="bodymd" as="p">\n  body copy.\n</text>\n```\n'
+    },
+    {
+      slug: "foundations/z-index",
+      href: "/foundations/z-index/",
+      title: "Z-index",
+      description: "Stacking layers for content, overlays, popups, toasts, and debug.",
+      category: "foundations",
+      content: '<div class="not-content">\n  <TokenSpec\n    client:load\n    columns="pair"\n    aria-label="Z-index tokens"\n    rows={[\n      { token: "zIndexBackground", role: "Behind content" },\n      { token: "zIndexContent", role: "Default content" },\n      { token: "zIndexOverlay", role: "Modal / drawer scrim and panels" },\n      { token: "zIndexPopup / zIndexFloating", role: "Menus, popovers" },\n      { token: "zIndexMessages", role: "Toasts" },\n      { token: "zIndexPriority", role: "Critical chrome" },\n      { token: "zIndexDebug", role: "Dev overlays" },\n    ]}\n  />\n</div>\n\nModal and drawer \u2192 `overlay`. Menu and popover \u2192 `popup`. Toast \u2192 `messages`. Do not invent `z-index: 9999`.\n\n<div class="not-content">\n  <ZIndexPreview client:load />\n</div>\n\n## Usage\n\n```css\n.menu {\n  z-index: var(--refineui-z-popup);\n}\n```',
+      searchText: 'z-index stacking layers for content, overlays, popups, toasts, and debug. \n<div class="not-content">\n  <tokenspec\n    client:load\n    columns="pair"\n    aria-label="z-index tokens"\n    rows={[\n      { token: "zindexbackground", role: "behind content" },\n      { token: "zindexcontent", role: "default content" },\n      { token: "zindexoverlay", role: "modal / drawer scrim and panels" },\n      { token: "zindexpopup / zindexfloating", role: "menus, popovers" },\n      { token: "zindexmessages", role: "toasts" },\n      { token: "zindexpriority", role: "critical chrome" },\n      { token: "zindexdebug", role: "dev overlays" },\n    ]}\n  />\n</div>\n\nmodal and drawer \u2192 `overlay`. menu and popover \u2192 `popup`. toast \u2192 `messages`. do not invent `z-index: 9999`.\n\n<div class="not-content">\n  <zindexpreview client:load />\n</div>\n\n## usage\n\n```css\n.menu {\n  z-index: var(--refineui-z-popup);\n}\n```\n'
+    },
+    {
+      slug: "getting-started",
+      href: "/getting-started/",
+      title: "Getting started",
+      description: "Install RefineUI and learn the architecture \u2014 tokens, components, and AI-ready docs.",
+      category: "guides",
+      content: 'RefineUI is the unified design system for Pelagornis products. Foundation variables become `@refineui/tokens`. UI is `@refineui/react`. The Web Kit you design against is the React you ship.\n\n## Architecture\n\n- **[Foundations](/foundations/)** \u2014 Visual language, design tokens, and layout\n- **[Components](/components/)** \u2014 Actions, Forms, Navigation, Feedback, Overlays, Data Display, Content, Layout\n- **[Development](/development/)** \u2014 Installation, theming, and motion in product code\n- **[AI & Tools](/ai-tools/)** \u2014 DESIGN.md, llms.txt, Skill, Doctor, MCP\n\n## Install\n\n<PackageInstallFull />\n\n## Stylesheet\n\nLoad token CSS and component interaction styles once at the app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nOr in JS:\n\n```tsx\n```\n\n## Example\n\n```tsx\nexport function Example() {\n  return (\n    <Card>\n      <Input placeholder="Email" />\n      <Button variant="primary">Continue</Button>\n    </Card>\n  );\n}\n```\n\n## Next\n\n- [Foundations](/foundations/) \u2014 tokens and layout\n- [Components](/components/) \u2014 interactive UI primitives\n- [Development / Installation](/development/installation/) \u2014 deeper setup notes\n- [Iconography](https://github.com/pelagornis/refineui-system-icons) \u2014 system icons (separate site / repo)',
+      searchText: 'getting started install refineui and learn the architecture \u2014 tokens, components, and ai-ready docs. \nrefineui is the unified design system for pelagornis products. foundation variables become `@refineui/tokens`. ui is `@refineui/react`. the web kit you design against is the react you ship.\n\n## architecture\n\n- **[foundations](/foundations/)** \u2014 visual language, design tokens, and layout\n- **[components](/components/)** \u2014 actions, forms, navigation, feedback, overlays, data display, content, layout\n- **[development](/development/)** \u2014 installation, theming, and motion in product code\n- **[ai & tools](/ai-tools/)** \u2014 design.md, llms.txt, skill, doctor, mcp\n\n## install\n\n<packageinstallfull />\n\n## stylesheet\n\nload token css and component interaction styles once at the app root:\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\nor in js:\n\n```tsx\n```\n\n## example\n\n```tsx\nexport function example() {\n  return (\n    <card>\n      <input placeholder="email" />\n      <button variant="primary">continue</button>\n    </card>\n  );\n}\n```\n\n## next\n\n- [foundations](/foundations/) \u2014 tokens and layout\n- [components](/components/) \u2014 interactive ui primitives\n- [development / installation](/development/installation/) \u2014 deeper setup notes\n- [iconography](https://github.com/pelagornis/refineui-system-icons) \u2014 system icons (separate site / repo)\n'
+    },
+    {
+      slug: "index",
+      href: "/index/",
+      title: "RefineUI",
+      description: "Design system for Pelagornis products \u2014 tokens, React components, and live documentation.",
+      category: "guides",
+      content: '<div class="not-content">\n  <DocsHome client:load />\n</div>',
+      searchText: 'refineui design system for pelagornis products \u2014 tokens, react components, and live documentation. \n<div class="not-content">\n  <docshome client:load />\n</div>\n'
+    },
+    {
+      slug: "ko/ai-tools/doctor",
+      href: "/ko/ai-tools/doctor/",
+      title: "Doctor",
+      description: "\uC77D\uAE30 \uC804\uC6A9 RefineUI \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4 \uC9C4\uB2E8 \u2014 \uC14B\uC5C5, \uD1A0\uD070, \uCEF4\uD3EC\uC9C0\uC158 \uACC4\uC57D, \uC784\uD3EC\uD2B8 \uADDC\uCE59.",
+      category: "guides",
+      content: '**RefineUI Doctor**\uB294 `@refineui/*`\uB97C \uC4F0\uB294 \uD504\uB85C\uC81D\uD2B8\uB97C \uAC80\uC0AC\uD574 \uC14B\uC5C5 \uACF5\uBC31, \uD1A0\uD070 \uACC4\uC57D \uC704\uBC18, \uCEF4\uD3EC\uB10C\uD2B8 API \uC624\uC6A9\uC744 \uBCF4\uACE0\uD569\uB2C8\uB2E4 \u2014 \uCF54\uB4DC\uB97C \uC218\uC815\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## \uAC80\uC0AC \uD56D\uBAA9\n\n| Rule | Category | Description |\n|------|----------|-------------|\n| `package-setup` | setup | \uC571 \uD504\uB85C\uC81D\uD2B8\uAC00 `@refineui/react`\uC640 `@refineui/tokens`\uB97C \uC120\uC5B8 |\n| `stylesheet-setup` | setup | \uC804\uC5ED CSS\uAC00 \uD1A0\uD070, \uC544\uC774\uCF58, `refineui.css`\uB97C \uC784\uD3EC\uD2B8 |\n| `foundation-contract` | foundations | \uCEF4\uD3EC\uB10C\uD2B8 \uC2A4\uD0C0\uC77C\uC5D0 \uD558\uB4DC\uCF54\uB529 hex/rgba\xB7\uC784\uC758 px \uC5C6\uC74C |\n| `composition-api` | components | RefineUI \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uD3B8\uC758 props(`title`, `description`, \u2026) \uC5C6\uC74C |\n| `component-imports` | components | `@refineui/react` \uB8E8\uD2B8\uC5D0\uC11C\uB9CC \uC784\uD3EC\uD2B8 |\n\n\uC9C4\uB2E8\uC740 **\uC77D\uAE30 \uC804\uC6A9**\uC785\uB2C8\uB2E4. Doctor\uB294 YAML \uB9AC\uD3EC\uD2B8\uB97C \uC4F0\uBA70, \uBCC4\uB3C4\uB85C \uC5D0\uC774\uC804\uD2B8\uC5D0\uAC8C \uC218\uC815\uC744 \uC694\uCCAD\uD558\uC9C0 \uC54A\uB294 \uD55C \uD328\uD0A4\uC9C0\uB97C \uC124\uCE58\uD558\uAC70\uB098 \uD30C\uC77C\uC744 \uD3B8\uC9D1\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## \uC124\uCE58\n\n<DoctorInstall />\n\n## CLI\n\n```bash\nrefineui-doctor\nrefineui-doctor ./apps/web\nrefineui-doctor --workspace packages/my-app --output ./doctor-report.yaml\nrefineui-doctor --category setup --category foundations\n```\n\nerror \uC2EC\uAC01\uB3C4 \uC18C\uACAC\uC774 \uC788\uC73C\uBA74 \uC885\uB8CC \uCF54\uB4DC `1`\uC785\uB2C8\uB2E4.\n\n## Skill \uC6CC\uD06C\uD50C\uB85C\n\nRefineUI \uC2A4\uD0AC\uC744 \uC124\uCE58\uD55C \uB4A4 \uC790\uC5F0\uC5B4\uB85C \uC694\uCCAD\uD558\uC138\uC694.\n\n```\nRefineUI \uC798 \uC4F0\uACE0 \uC788\uB098 \uBD10\uC918\n\uC14B\uC5C5\uB9CC \uC9C4\uB2E8\uD574\uC918\n\uC774 \uBAA8\uB178\uB808\uD3EC\uC758 RefineUI \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4\uB97C \uC804\uBD80 \uC9C4\uB2E8\uD574\uC918\n```\n\n\uC2A4\uD0AC\uC740 [doctor rules](https://github.com/pelagornis/refineui/tree/main/skills/refineui/rules)\uB97C \uB85C\uB4DC\uD558\uACE0 [llm.txt](/llm.txt)\uB85C \uB77C\uC774\uBE0C \uBB38\uC11C\uC5D0 \uB77C\uC6B0\uD305\uD569\uB2C8\uB2E4 \u2014 \uBB38\uC11C\uB97C \uBCF5\uC81C\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## MCP\n\n`@refineui/mcp`\uAC00 \uC124\uC815\uB418\uC5B4 \uC788\uC73C\uBA74 \uC5D0\uC774\uC804\uD2B8\uAC00 \uC120\uD0DD\uC801 \uD504\uB85C\uC81D\uD2B8 \uACBD\uB85C\xB7\uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4 \uC774\uB984\uC73C\uB85C **`run_doctor`**\uB97C \uD638\uCD9C\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uB3C4\uAD6C\uB294 YAML \uC2A4\uD0A4\uB9C8\uC640 \uB9DE\uB294 JSON\uC744 \uBC18\uD658\uD569\uB2C8\uB2E4.\n\n## \uB9AC\uD3EC\uD2B8 \uD615\uC2DD\n\n\uC784\uC2DC \uB514\uB809\uD130\uB9AC \uB610\uB294 `--output`\uC5D0 \uC4F0\uB294 \uC2A4\uD0A4\uB9C8 v2 YAML:\n\n```yaml\nschemaVersion: 2\nmeta:\n  target: /path/to/project\n  projectKinds: [app]\n  refineui:\n    declared:\n      "@refineui/react": "^0.x"\nsummary:\n  error: 0\n  warn: 1\n  info: 0\nchecks: [...]\nfindings: [...]\n```\n\n\uAC01 \uC18C\uACAC\uC5D0\uB294 \uC5D0\uC774\uC804\uD2B8 \uAC00\uC774\uB4DC \uC218\uC815\uC5D0 \uC4F8 `remediation` \uD14D\uC2A4\uD2B8\uAC00 \uD3EC\uD568\uB429\uB2C8\uB2E4.\n\n## Skill vs MCP \uBE44\uAD50\n\n| | Doctor CLI | Skill | MCP `run_doctor` |\n|---|------------|-------|------------------|\n| **\uB85C\uCEEC \uC2E4\uD589** | Yes | \uC5D0\uC774\uC804\uD2B8\uAC00 \uADDC\uCE59 \uB530\uB984 | Yes |\n| **\uC801\uD569\uD55C \uC6A9\uB3C4** | CI / \uC2A4\uD06C\uB9BD\uD2B8 | \uC790\uC5F0\uC5B4 \uC694\uCCAD | \uC5D0\uC774\uC804\uD2B8 \uC790\uB3D9\uD654 |\n| **\uCD9C\uB825** | YAML \uD30C\uC77C | \uB300\uD654 + \uC120\uD0DD\uC801 YAML | JSON |\n\n\uB300\uD654\uD615 \uC9C4\uB2E8\uC740 **Skill**, \uBC18\uBCF5 \uAC80\uC0AC\uB294 **CLI**, \uD504\uB85C\uADF8\uB798\uBC0D \uBC29\uC2DD \uC9C4\uB2E8\uC740 **MCP**\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.',
+      searchText: 'doctor \uC77D\uAE30 \uC804\uC6A9 refineui \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4 \uC9C4\uB2E8 \u2014 \uC14B\uC5C5, \uD1A0\uD070, \uCEF4\uD3EC\uC9C0\uC158 \uACC4\uC57D, \uC784\uD3EC\uD2B8 \uADDC\uCE59. \n**refineui doctor**\uB294 `@refineui/*`\uB97C \uC4F0\uB294 \uD504\uB85C\uC81D\uD2B8\uB97C \uAC80\uC0AC\uD574 \uC14B\uC5C5 \uACF5\uBC31, \uD1A0\uD070 \uACC4\uC57D \uC704\uBC18, \uCEF4\uD3EC\uB10C\uD2B8 api \uC624\uC6A9\uC744 \uBCF4\uACE0\uD569\uB2C8\uB2E4 \u2014 \uCF54\uB4DC\uB97C \uC218\uC815\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## \uAC80\uC0AC \uD56D\uBAA9\n\n| rule | category | description |\n|------|----------|-------------|\n| `package-setup` | setup | \uC571 \uD504\uB85C\uC81D\uD2B8\uAC00 `@refineui/react`\uC640 `@refineui/tokens`\uB97C \uC120\uC5B8 |\n| `stylesheet-setup` | setup | \uC804\uC5ED css\uAC00 \uD1A0\uD070, \uC544\uC774\uCF58, `refineui.css`\uB97C \uC784\uD3EC\uD2B8 |\n| `foundation-contract` | foundations | \uCEF4\uD3EC\uB10C\uD2B8 \uC2A4\uD0C0\uC77C\uC5D0 \uD558\uB4DC\uCF54\uB529 hex/rgba\xB7\uC784\uC758 px \uC5C6\uC74C |\n| `composition-api` | components | refineui \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uD3B8\uC758 props(`title`, `description`, \u2026) \uC5C6\uC74C |\n| `component-imports` | components | `@refineui/react` \uB8E8\uD2B8\uC5D0\uC11C\uB9CC \uC784\uD3EC\uD2B8 |\n\n\uC9C4\uB2E8\uC740 **\uC77D\uAE30 \uC804\uC6A9**\uC785\uB2C8\uB2E4. doctor\uB294 yaml \uB9AC\uD3EC\uD2B8\uB97C \uC4F0\uBA70, \uBCC4\uB3C4\uB85C \uC5D0\uC774\uC804\uD2B8\uC5D0\uAC8C \uC218\uC815\uC744 \uC694\uCCAD\uD558\uC9C0 \uC54A\uB294 \uD55C \uD328\uD0A4\uC9C0\uB97C \uC124\uCE58\uD558\uAC70\uB098 \uD30C\uC77C\uC744 \uD3B8\uC9D1\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## \uC124\uCE58\n\n<doctorinstall />\n\n## cli\n\n```bash\nrefineui-doctor\nrefineui-doctor ./apps/web\nrefineui-doctor --workspace packages/my-app --output ./doctor-report.yaml\nrefineui-doctor --category setup --category foundations\n```\n\nerror \uC2EC\uAC01\uB3C4 \uC18C\uACAC\uC774 \uC788\uC73C\uBA74 \uC885\uB8CC \uCF54\uB4DC `1`\uC785\uB2C8\uB2E4.\n\n## skill \uC6CC\uD06C\uD50C\uB85C\n\nrefineui \uC2A4\uD0AC\uC744 \uC124\uCE58\uD55C \uB4A4 \uC790\uC5F0\uC5B4\uB85C \uC694\uCCAD\uD558\uC138\uC694.\n\n```\nrefineui \uC798 \uC4F0\uACE0 \uC788\uB098 \uBD10\uC918\n\uC14B\uC5C5\uB9CC \uC9C4\uB2E8\uD574\uC918\n\uC774 \uBAA8\uB178\uB808\uD3EC\uC758 refineui \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4\uB97C \uC804\uBD80 \uC9C4\uB2E8\uD574\uC918\n```\n\n\uC2A4\uD0AC\uC740 [doctor rules](https://github.com/pelagornis/refineui/tree/main/skills/refineui/rules)\uB97C \uB85C\uB4DC\uD558\uACE0 [llm.txt](/llm.txt)\uB85C \uB77C\uC774\uBE0C \uBB38\uC11C\uC5D0 \uB77C\uC6B0\uD305\uD569\uB2C8\uB2E4 \u2014 \uBB38\uC11C\uB97C \uBCF5\uC81C\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n## mcp\n\n`@refineui/mcp`\uAC00 \uC124\uC815\uB418\uC5B4 \uC788\uC73C\uBA74 \uC5D0\uC774\uC804\uD2B8\uAC00 \uC120\uD0DD\uC801 \uD504\uB85C\uC81D\uD2B8 \uACBD\uB85C\xB7\uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4 \uC774\uB984\uC73C\uB85C **`run_doctor`**\uB97C \uD638\uCD9C\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uB3C4\uAD6C\uB294 yaml \uC2A4\uD0A4\uB9C8\uC640 \uB9DE\uB294 json\uC744 \uBC18\uD658\uD569\uB2C8\uB2E4.\n\n## \uB9AC\uD3EC\uD2B8 \uD615\uC2DD\n\n\uC784\uC2DC \uB514\uB809\uD130\uB9AC \uB610\uB294 `--output`\uC5D0 \uC4F0\uB294 \uC2A4\uD0A4\uB9C8 v2 yaml:\n\n```yaml\nschemaversion: 2\nmeta:\n  target: /path/to/project\n  projectkinds: [app]\n  refineui:\n    declared:\n      "@refineui/react": "^0.x"\nsummary:\n  error: 0\n  warn: 1\n  info: 0\nchecks: [...]\nfindings: [...]\n```\n\n\uAC01 \uC18C\uACAC\uC5D0\uB294 \uC5D0\uC774\uC804\uD2B8 \uAC00\uC774\uB4DC \uC218\uC815\uC5D0 \uC4F8 `remediation` \uD14D\uC2A4\uD2B8\uAC00 \uD3EC\uD568\uB429\uB2C8\uB2E4.\n\n## skill vs mcp \uBE44\uAD50\n\n| | doctor cli | skill | mcp `run_doctor` |\n|---|------------|-------|------------------|\n| **\uB85C\uCEEC \uC2E4\uD589** | yes | \uC5D0\uC774\uC804\uD2B8\uAC00 \uADDC\uCE59 \uB530\uB984 | yes |\n| **\uC801\uD569\uD55C \uC6A9\uB3C4** | ci / \uC2A4\uD06C\uB9BD\uD2B8 | \uC790\uC5F0\uC5B4 \uC694\uCCAD | \uC5D0\uC774\uC804\uD2B8 \uC790\uB3D9\uD654 |\n| **\uCD9C\uB825** | yaml \uD30C\uC77C | \uB300\uD654 + \uC120\uD0DD\uC801 yaml | json |\n\n\uB300\uD654\uD615 \uC9C4\uB2E8\uC740 **skill**, \uBC18\uBCF5 \uAC80\uC0AC\uB294 **cli**, \uD504\uB85C\uADF8\uB798\uBC0D \uBC29\uC2DD \uC9C4\uB2E8\uC740 **mcp**\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.\n'
+    },
+    {
+      slug: "ko/ai-tools/index",
+      href: "/ko/ai-tools/index/",
+      title: "AI & \uB3C4\uAD6C",
+      description: "RefineUI\uB97C \uC704\uD55C \uAE30\uACC4 \uD310\uB3C5 \uC778\uB371\uC2A4, \uC5D0\uC774\uC804\uD2B8 \uC2A4\uD0AC, Doctor \uC9C4\uB2E8, MCP \uC11C\uBC84.",
+      category: "guides",
+      content: '<div class="not-content">\n  <AiToolsCatalog client:load locale="ko" />\n</div>',
+      searchText: 'ai & \uB3C4\uAD6C refineui\uB97C \uC704\uD55C \uAE30\uACC4 \uD310\uB3C5 \uC778\uB371\uC2A4, \uC5D0\uC774\uC804\uD2B8 \uC2A4\uD0AC, doctor \uC9C4\uB2E8, mcp \uC11C\uBC84. \n<div class="not-content">\n  <aitoolscatalog client:load locale="ko" />\n</div>\n'
+    },
+    {
+      slug: "ko/ai-tools/mcp",
+      href: "/ko/ai-tools/mcp/",
+      title: "MCP",
+      description: "Model Context Protocol \uC11C\uBC84 \u2014 RefineUI \uBB38\uC11C \uAC80\uC0C9, \uCEF4\uD3EC\uB10C\uD2B8 \uD398\uC774\uC9C0 \uC870\uD68C, AI \uB3C4\uAD6C\uC5D0\uC11C \uB514\uC790\uC778 \uADDC\uCE59 \uC77D\uAE30.",
+      category: "guides",
+      content: '**`@refineui/mcp`**\uB294 Model Context Protocol\uC744 \uC9C0\uC6D0\uD558\uB294 \uC5D0\uB514\uD130\xB7\uC5D0\uC774\uC804\uD2B8\uC6A9 stdio MCP \uC11C\uBC84\uC785\uB2C8\uB2E4. \uBB38\uC11C \uC0AC\uC774\uD2B8\uC758 \uBE4C\uB4DC \uD0C0\uC784 \uC778\uB371\uC2A4\uB97C \uB0B4\uC7A5\uD574 `llm.txt` \uC804\uCCB4\uB97C \uCEE8\uD14D\uC2A4\uD2B8\uC5D0 \uBD99\uC5EC\uB123\uC9C0 \uC54A\uACE0\uB3C4 \uD398\uC774\uC9C0\uB97C \uC870\uD68C\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.\n\n## \uC124\uCE58\n\n<McpInstall />\n\n## MCP \uC124\uC815\n\nMCP \uD638\uC2A4\uD2B8 \uC124\uC815\uC5D0 \uCD94\uAC00\uD558\uC138\uC694 ([mcp.example.json](/mcp.example.json) \uCC38\uACE0):\n\n```json\n{\n  "mcpServers": {\n    "refineui": {\n      "command": "bunx",\n      "args": ["@refineui/mcp"]\n    }\n  }\n}\n```\n\n\uBAA8\uB178\uB808\uD3EC \uAE30\uC5EC\uC790 \uC608\uC2DC (`bun run build:mcp` \uC774\uD6C4):\n\n```json\n{\n  "mcpServers": {\n    "refineui": {\n      "command": "node",\n      "args": ["packages/mcp/lib/server.js"]\n    }\n  }\n}\n```\n\n## \uB3C4\uAD6C\n\n| Tool | Purpose |\n|------|---------|\n| `search_docs` | \uBB38\uC11C \uD0A4\uC6CC\uB4DC \uAC80\uC0C9 |\n| `get_doc_page` | \uC2AC\uB7EC\uADF8\uB85C \uD398\uC774\uC9C0 \uAC00\uC838\uC624\uAE30 (`components/button`, \u2026) |\n| `list_components` | \uBAA8\uB4E0 \uCEF4\uD3EC\uB10C\uD2B8 \uBB38\uC11C \uD398\uC774\uC9C0 |\n| `list_foundations` | \uD30C\uC6B4\uB370\uC774\uC158 / \uD1A0\uD070 \uBB38\uC11C \uD398\uC774\uC9C0 |\n| `get_llm_index` | `llm.txt` \uC804\uCCB4 \uB0B4\uC6A9 |\n| `get_design_rules` | `DESIGN.md` \uC804\uCCB4 (Stitch alpha) |\n| `list_tokens` | \uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC\uC640 \uC2DC\uB9E8\uD2F1 \uD14D\uC2A4\uD2B8 \uC5ED\uD560 |\n| `get_index_meta` | \uC778\uB371\uC2A4 \uC0DD\uC131 \uC2DC\uAC01\uACFC \uD398\uC774\uC9C0 \uC218 |\n| `run_doctor` | \uC77D\uAE30 \uC804\uC6A9 \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4 \uC9C4\uB2E8 (\uC14B\uC5C5, \uD1A0\uD070, \uCEF4\uD3EC\uC9C0\uC158) |\n\n## \uB9AC\uC18C\uC2A4\n\n| URI | Content |\n|-----|---------|\n| `refineui://llm.txt` | \uAE30\uACC4 \uD310\uB3C5 \uBB38\uC11C \uC778\uB371\uC2A4 |\n| `refineui://DESIGN.md` | Stitch \uD638\uD658 \uB514\uC790\uC778 \uC544\uC774\uB374\uD2F0\uD2F0 |\n| `refineui://design-rules` | `DESIGN.md` \uBCC4\uCE6D |\n\n## DESIGN.md vs llms.txt vs Skill \uBE44\uAD50\n\n| | DESIGN.md | llms.txt | Skill | MCP |\n|---|-----------|----------|-------|-----|\n| **\uD615\uC2DD** | \uD1A0\uD070 YAML + \uD504\uB85C\uC988 | \uC815\uC801 \uB9C1\uD06C \uC778\uB371\uC2A4 | \uC5D0\uC774\uC804\uD2B8 \uC9C0\uCE68 | \uB77C\uC774\uBE0C \uB3C4\uAD6C + \uB9AC\uC18C\uC2A4 |\n| **\uC801\uD569\uD55C \uC6A9\uB3C4** | \uBE44\uC8FC\uC5BC \uC544\uC774\uB374\uD2F0\uD2F0 / UI \uC0DD\uC131 | \uD398\uC774\uC9C0 \uBC1C\uACAC | \uB77C\uC6B0\uD305 + \uADDC\uCE59 | \uB3D9\uC801 \uAC80\uC0C9\xB7\uD398\uC774\uC9C0 \uC870\uD68C |\n| **\uC5C5\uB370\uC774\uD2B8** | \uC0AC\uC774\uD2B8 \uBC30\uD3EC\uC640 \uD568\uAED8 | \uC0AC\uC774\uD2B8 \uBC30\uD3EC\uC640 \uD568\uAED8 | GitHub\uC5D0\uC11C `skills add` | npm \uD328\uD0A4\uC9C0 / \uC778\uB371\uC2A4 \uC7AC\uBE4C\uB4DC |\n\n\uD568\uAED8 \uC0AC\uC6A9\uD558\uC138\uC694: \uB8E9\uC564\uD544\uC740 **DESIGN.md**, \uB3D9\uC791\uC740 **Skill**, \uC870\uD68C\uB294 **MCP**, \uD050\uB808\uC774\uC158 \uC778\uB371\uC2A4\uB294 **llms.txt**.\n\n## \uAC1C\uBC1C\n\n```bash\nbun run build:mcp\n```\n\n\uD328\uD0A4\uC9C0: [`packages/mcp`](https://github.com/pelagornis/refineui/tree/main/packages/mcp)',
+      searchText: 'mcp model context protocol \uC11C\uBC84 \u2014 refineui \uBB38\uC11C \uAC80\uC0C9, \uCEF4\uD3EC\uB10C\uD2B8 \uD398\uC774\uC9C0 \uC870\uD68C, ai \uB3C4\uAD6C\uC5D0\uC11C \uB514\uC790\uC778 \uADDC\uCE59 \uC77D\uAE30. \n**`@refineui/mcp`**\uB294 model context protocol\uC744 \uC9C0\uC6D0\uD558\uB294 \uC5D0\uB514\uD130\xB7\uC5D0\uC774\uC804\uD2B8\uC6A9 stdio mcp \uC11C\uBC84\uC785\uB2C8\uB2E4. \uBB38\uC11C \uC0AC\uC774\uD2B8\uC758 \uBE4C\uB4DC \uD0C0\uC784 \uC778\uB371\uC2A4\uB97C \uB0B4\uC7A5\uD574 `llm.txt` \uC804\uCCB4\uB97C \uCEE8\uD14D\uC2A4\uD2B8\uC5D0 \uBD99\uC5EC\uB123\uC9C0 \uC54A\uACE0\uB3C4 \uD398\uC774\uC9C0\uB97C \uC870\uD68C\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.\n\n## \uC124\uCE58\n\n<mcpinstall />\n\n## mcp \uC124\uC815\n\nmcp \uD638\uC2A4\uD2B8 \uC124\uC815\uC5D0 \uCD94\uAC00\uD558\uC138\uC694 ([mcp.example.json](/mcp.example.json) \uCC38\uACE0):\n\n```json\n{\n  "mcpservers": {\n    "refineui": {\n      "command": "bunx",\n      "args": ["@refineui/mcp"]\n    }\n  }\n}\n```\n\n\uBAA8\uB178\uB808\uD3EC \uAE30\uC5EC\uC790 \uC608\uC2DC (`bun run build:mcp` \uC774\uD6C4):\n\n```json\n{\n  "mcpservers": {\n    "refineui": {\n      "command": "node",\n      "args": ["packages/mcp/lib/server.js"]\n    }\n  }\n}\n```\n\n## \uB3C4\uAD6C\n\n| tool | purpose |\n|------|---------|\n| `search_docs` | \uBB38\uC11C \uD0A4\uC6CC\uB4DC \uAC80\uC0C9 |\n| `get_doc_page` | \uC2AC\uB7EC\uADF8\uB85C \uD398\uC774\uC9C0 \uAC00\uC838\uC624\uAE30 (`components/button`, \u2026) |\n| `list_components` | \uBAA8\uB4E0 \uCEF4\uD3EC\uB10C\uD2B8 \uBB38\uC11C \uD398\uC774\uC9C0 |\n| `list_foundations` | \uD30C\uC6B4\uB370\uC774\uC158 / \uD1A0\uD070 \uBB38\uC11C \uD398\uC774\uC9C0 |\n| `get_llm_index` | `llm.txt` \uC804\uCCB4 \uB0B4\uC6A9 |\n| `get_design_rules` | `design.md` \uC804\uCCB4 (stitch alpha) |\n| `list_tokens` | \uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC\uC640 \uC2DC\uB9E8\uD2F1 \uD14D\uC2A4\uD2B8 \uC5ED\uD560 |\n| `get_index_meta` | \uC778\uB371\uC2A4 \uC0DD\uC131 \uC2DC\uAC01\uACFC \uD398\uC774\uC9C0 \uC218 |\n| `run_doctor` | \uC77D\uAE30 \uC804\uC6A9 \uC6CC\uD06C\uC2A4\uD398\uC774\uC2A4 \uC9C4\uB2E8 (\uC14B\uC5C5, \uD1A0\uD070, \uCEF4\uD3EC\uC9C0\uC158) |\n\n## \uB9AC\uC18C\uC2A4\n\n| uri | content |\n|-----|---------|\n| `refineui://llm.txt` | \uAE30\uACC4 \uD310\uB3C5 \uBB38\uC11C \uC778\uB371\uC2A4 |\n| `refineui://design.md` | stitch \uD638\uD658 \uB514\uC790\uC778 \uC544\uC774\uB374\uD2F0\uD2F0 |\n| `refineui://design-rules` | `design.md` \uBCC4\uCE6D |\n\n## design.md vs llms.txt vs skill \uBE44\uAD50\n\n| | design.md | llms.txt | skill | mcp |\n|---|-----------|----------|-------|-----|\n| **\uD615\uC2DD** | \uD1A0\uD070 yaml + \uD504\uB85C\uC988 | \uC815\uC801 \uB9C1\uD06C \uC778\uB371\uC2A4 | \uC5D0\uC774\uC804\uD2B8 \uC9C0\uCE68 | \uB77C\uC774\uBE0C \uB3C4\uAD6C + \uB9AC\uC18C\uC2A4 |\n| **\uC801\uD569\uD55C \uC6A9\uB3C4** | \uBE44\uC8FC\uC5BC \uC544\uC774\uB374\uD2F0\uD2F0 / ui \uC0DD\uC131 | \uD398\uC774\uC9C0 \uBC1C\uACAC | \uB77C\uC6B0\uD305 + \uADDC\uCE59 | \uB3D9\uC801 \uAC80\uC0C9\xB7\uD398\uC774\uC9C0 \uC870\uD68C |\n| **\uC5C5\uB370\uC774\uD2B8** | \uC0AC\uC774\uD2B8 \uBC30\uD3EC\uC640 \uD568\uAED8 | \uC0AC\uC774\uD2B8 \uBC30\uD3EC\uC640 \uD568\uAED8 | github\uC5D0\uC11C `skills add` | npm \uD328\uD0A4\uC9C0 / \uC778\uB371\uC2A4 \uC7AC\uBE4C\uB4DC |\n\n\uD568\uAED8 \uC0AC\uC6A9\uD558\uC138\uC694: \uB8E9\uC564\uD544\uC740 **design.md**, \uB3D9\uC791\uC740 **skill**, \uC870\uD68C\uB294 **mcp**, \uD050\uB808\uC774\uC158 \uC778\uB371\uC2A4\uB294 **llms.txt**.\n\n## \uAC1C\uBC1C\n\n```bash\nbun run build:mcp\n```\n\n\uD328\uD0A4\uC9C0: [`packages/mcp`](https://github.com/pelagornis/refineui/tree/main/packages/mcp)\n'
+    },
+    {
+      slug: "ko/ai-tools/skill",
+      href: "/ko/ai-tools/skill/",
+      title: "Skill",
+      description: "RefineUI \uC5D0\uC774\uC804\uD2B8 \uC2A4\uD0AC \u2014 \uCF58\uD150\uCE20\uB97C \uBCF5\uC81C\uD558\uC9C0 \uC54A\uACE0 \uACF5\uC2DD \uBB38\uC11C, DESIGN.md, llm.txt, \uB514\uC790\uC778 \uADDC\uCE59\uC73C\uB85C AI \uC5B4\uC2DC\uC2A4\uD134\uD2B8\uB97C \uB77C\uC6B0\uD305\uD569\uB2C8\uB2E4.",
+      category: "guides",
+      content: '**`refineui`** \uC2A4\uD0AC\uC740 AI \uC5D0\uC774\uC804\uD2B8\uAC00 RefineUI \uD504\uB85C\uC81D\uD2B8\uC5D0\uC11C \uC77C\uD558\uB294 \uBC29\uBC95\uC744 \uAC00\uB974\uCE69\uB2C8\uB2E4. \uC694\uCCAD\uC744 \uBD84\uB958\uD558\uACE0, \uB77C\uC774\uBE0C \uBB38\uC11C \uC778\uB371\uC2A4\uB97C \uC77D\uC73C\uBA70, \uD1A0\uD070\xB7\uCEF4\uD3EC\uC9C0\uC158 \uADDC\uCE59\uC744 \uB530\uB974\uACE0, \uC120\uD0DD\uC801\uC73C\uB85C `@refineui/mcp`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n## SKILL.md\n\n`SKILL.md`\uB294 \uC2A4\uD0AC \uC9C4\uC785\uC810\uC785\uB2C8\uB2E4. \uC5D0\uC774\uC804\uD2B8\uB294 RefineUI \uAD00\uB828 \uC791\uC5C5\uB9C8\uB2E4 \uBA3C\uC800 \uC774 \uD30C\uC77C\uC744 \uC77D\uC2B5\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uB098 \uD1A0\uD070 \uBAA9\uB85D\uC744 \uB098\uC5F4\uD558\uC9C0 \uC54A\uC73C\uBA70 \u2014 \uACF5\uC2DD \uBB38\uC11C\uB85C **\uC5B4\uB5BB\uAC8C** \uB77C\uC6B0\uD305\uD560\uC9C0, \uCF54\uB4DC\uB97C \uC791\uC131\uD560 \uB54C \uC5B4\uB5A4 \uC81C\uC57D\uC774 \uC801\uC6A9\uB418\uB294\uC9C0\uB97C \uC815\uC758\uD569\uB2C8\uB2E4.\n\n### Frontmatter\n\n```yaml\n---\nname: refineui\ndescription: RefineUI design-system guide for AI agents\u2026\nuser-invocable: true\nargument-hint: "[question or topic]"\n---\n```\n\n| Field | Purpose |\n|-------|---------|\n| `name` | \uC2A4\uD0AC \uC2DD\uBCC4\uC790 (`refineui`) |\n| `description` | \uD638\uC2A4\uD2B8\uAC00 \uC774 \uC2A4\uD0AC\uC744 \uB85C\uB4DC\uD574\uC57C \uD558\uB294 \uC2DC\uC810 |\n| `user-invocable` | \uC0AC\uC6A9\uC790\uAC00 \uC9C1\uC811 \uD638\uCD9C \uAC00\uB2A5 (\uC608: `/refineui`) |\n| `argument-hint` | \uD638\uCD9C\uACFC \uD568\uAED8 \uC804\uB2EC\uB418\uB294 \uC120\uD0DD\uC801 \uC8FC\uC81C |\n\n### Sections\n\n| Section | What it tells the agent |\n|---------|-------------------------|\n| **1. Classify the request** | Foundations vs components vs setup vs MCP vs health check \u2014 \uADF8\uB9AC\uACE0 \uD504\uB85C\uC81D\uD2B8\uB97C \uBA3C\uC800 \uC77D\uC5B4\uC57C \uD558\uB294\uC9C0 |\n| **2. Documentation routing** | `DESIGN.md` / `llm.txt` / `llms.txt`\uC5D0\uC11C \uC2DC\uC791, ui.pelagornis.com\uC758 leaf \uD398\uC774\uC9C0 \uC5F4\uAE30; \uAC00\uB2A5\uD558\uBA74 MCP \uC0AC\uC6A9 |\n| **3. Code-writing contract** | `@refineui/react` \uC784\uD3EC\uD2B8, \uCEF4\uD3EC\uC800\uBE14 API, \uD1A0\uD070\uB9CC\uC73C\uB85C \uC2A4\uD0C0\uC77C\uB9C1, a11y |\n| **4. Monorepo contributors** | \uC774 \uC800\uC7A5\uC18C \uB0B4\uBD80 \uACBD\uB85C (`packages/tokens`, `packages/react`, docs) |\n| **5. MCP** | `@refineui/mcp` \uB3C4\uAD6C\uB97C \uC5B8\uC81C\xB7\uC5B4\uB5BB\uAC8C \uC0AC\uC6A9\uD558\uB294\uC9C0 |\n| **6. Doctor** | \uC218\uC815\uC744 \uC81C\uC548\uD558\uAE30 \uC804 \uC77D\uAE30 \uC804\uC6A9 \uC9C4\uB2E8 |\n| **7. Response principles** | URL \uC778\uC6A9, \uAC00\uC774\uB358\uC2A4\uC640 \uD3B8\uC9D1 \uBD84\uB9AC, \uC784\uC758 API \uAE08\uC9C0 |\n\n\uB354 \uAE4A\uC740 \uB0B4\uC6A9\uC740 `references/`\uC640 `rules/`\uC5D0 \uC788\uC2B5\uB2C8\uB2E4 \u2014 `SKILL.md`\uB294 \uCF58\uD150\uCE20\uB97C \uBCF5\uC81C\uD558\uC9C0 \uC54A\uACE0 \uB9C1\uD06C\uD569\uB2C8\uB2E4.\n\n\uC18C\uC2A4: [skills/refineui/SKILL.md](https://github.com/pelagornis/refineui/blob/main/skills/refineui/SKILL.md)\n\n## \uC5ED\uD560\n\n| Layer | Role |\n|-------|------|\n| **Doc routing** | `DESIGN.md` / `llm.txt` / `llms.txt`\uC5D0\uC11C \uC2DC\uC791, ui.pelagornis.com\uC758 leaf \uD398\uC774\uC9C0 \uC5F4\uAE30 |\n| **Codegen rules** | \uD1A0\uD070\uB9CC\uC73C\uB85C \uC2A4\uD0C0\uC77C\uB9C1, \uCEF4\uD3EC\uC800\uBE14 API, \uC784\uC758 props \uAE08\uC9C0 |\n| **Monorepo hints** | \uC774 \uC800\uC7A5\uC18C\uC5D0\uC11C \uD1A0\uD070\xB7\uCEF4\uD3EC\uB10C\uD2B8\xB7\uBB38\uC11C\uAC00 \uC5B4\uB514\uC5D0 \uC788\uB294\uC9C0 |\n| **MCP pointer** | `@refineui/mcp` \uB3C4\uAD6C\uB97C \uC5B8\uC81C \uC0AC\uC6A9\uD558\uB294\uC9C0 |\n| **Doctor** | \uC77D\uAE30 \uC804\uC6A9 \uC124\uC815\xB7\uACC4\uC57D \uC9C4\uB2E8 |\n\n\uC2A4\uD0AC\uC740 \uCEF4\uD3EC\uB10C\uD2B8 \uBAA9\uB85D\uC774\uB098 \uD1A0\uD070 \uD14C\uC774\uBE14\uC744 **\uC784\uBCA0\uB4DC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4** \u2014 \uACF5\uC2DD \uBB38\uC11C\uC5D0 \uB450\uC5B4 \uD56D\uC0C1 \uCD5C\uC2E0 \uC0C1\uD0DC\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4.\n\n## \uC124\uCE58\n\n<SkillInstall />\n\n## \uD30C\uC77C \uAD6C\uC870\n\n```\nskills/refineui/\n\u251C\u2500\u2500 SKILL.md                      # Entry \u2014 request classification & doc routing\n\u251C\u2500\u2500 references/\n\u2502   \u251C\u2500\u2500 design-rules.md           # Points to canonical DESIGN.md\n\u2502   \u251C\u2500\u2500 doctor.md                 # Doctor workflow & report schema\n\u2502   \u2514\u2500\u2500 mcp.md                    # @refineui/mcp setup & tools\n\u2514\u2500\u2500 rules/                        # Doctor rule definitions (read-only diagnostics)\n    \u251C\u2500\u2500 package-setup.md\n    \u251C\u2500\u2500 stylesheet-setup.md\n    \u251C\u2500\u2500 foundation-contract.md\n    \u251C\u2500\u2500 composition-api.md\n    \u2514\u2500\u2500 component-imports.md\n```\n\n| File | When the agent reads it |\n|------|-------------------------|\n| `SKILL.md` | RefineUI \uAD00\uB828 \uC9C8\uBB38 \u2014 \uBB38\uC11C \uB610\uB294 references\uB85C \uB77C\uC6B0\uD305 |\n| `references/design-rules.md` | UI \uCF54\uB4DC \uC791\uC131\xB7\uB9AC\uBDF0 \u2192 `DESIGN.md` \uC5F4\uAE30 |\n| `references/doctor.md` | \uD5EC\uC2A4 \uCCB4\uD06C / "RefineUI\uB97C \uC62C\uBC14\uB974\uAC8C \uC4F0\uACE0 \uC788\uB098?" \uC694\uCCAD |\n| `references/mcp.md` | MCP \uD638\uC2A4\uD2B8 \uC124\uC815 \uB610\uB294 \uB3C4\uAD6C \uC120\uD0DD |\n| `rules/*.md` | Doctor \uC9C4\uB2E8 (\uC218\uB3D9 \uB610\uB294 `refineui-doctor` CLI) |\n\n## \uBB38\uC11C \uB77C\uC6B0\uD305\n\n\uC5D0\uC774\uC804\uD2B8\uB294 \uC554\uAE30\uD55C \uC2AC\uB7EC\uADF8\uC5D0 \uC758\uC874\uD558\uC9C0 \uB9D0\uACE0 **\uB9E4 \uC791\uC5C5\uB9C8\uB2E4 \uC778\uB371\uC2A4\uB97C \uAC00\uC838\uC640\uC57C** \uD569\uB2C8\uB2E4.\n\n1. \uC2DC\uAC01\uC801 \uC544\uC774\uB374\uD2F0\uD2F0\uB97C \uC704\uD574 `https://ui.pelagornis.com/DESIGN.md` \uC77D\uAE30\n2. `https://ui.pelagornis.com/llms.txt` \uB610\uB294 `https://ui.pelagornis.com/llm.txt` \uC77D\uAE30\n3. Foundations, Components, Development leaf \uD398\uC774\uC9C0 \uB9C1\uD06C\uB97C \uB530\uB77C\uAC00\uAE30\n4. \uCF54\uB4DC \uC0DD\uC131 \uC2DC \uCEF4\uD3EC\uB10C\uD2B8 \uBB38\uC11C\uC640 [\uC124\uCE58](/ko/development/installation/), [\uD14C\uB9C8](/ko/development/theming/)\uB97C \uD568\uAED8 \uC0AC\uC6A9\n\nMCP\uAC00 \uC124\uC815\uB418\uC5B4 \uC788\uC73C\uBA74 `@refineui/mcp`\uC758 `search_docs`, `get_doc_page`, `get_design_rules`\uB97C \uC6B0\uC120 \uC0AC\uC6A9\uD558\uC138\uC694.\n\n## \uC694\uCCAD \uBD84\uB958\n\n| Request | Action |\n|---------|--------|\n| Token / color / spacing \uC758\uBBF8 | Foundations \uBB38\uC11C\uB9CC |\n| \uCEF4\uD3EC\uB10C\uD2B8 API \uB610\uB294 \uC608\uC81C | \uCEF4\uD3EC\uB10C\uD2B8 \uBB38\uC11C + \uC120\uD0DD\uC801 MCP `get_doc_page` |\n| \uC571 \uC124\uC815 / CSS \uC784\uD3EC\uD2B8 | Development \uBB38\uC11C + `package.json` \uAC80\uC0AC |\n| "RefineUI \uC798 \uC4F0\uACE0 \uC788\uB098?" / \uC124\uC815 \uAC10\uC0AC | [Doctor](/ko/ai-tools/doctor/) + `references/doctor.md` \uB610\uB294 MCP `run_doctor` |\n| "List all components" | `llm.txt` \uB610\uB294 MCP `list_components` |\n\n## \uBAA8\uB178\uB808\uD3EC (\uC774 \uC800\uC7A5\uC18C)\n\n\uC774 \uBAA8\uB178\uB808\uD3EC\uC5D0\uC11C \uC18C\uC2A4\uB294 `packages/tokens`, `packages/react`, `docs/`\uC5D0 \uC788\uC2B5\uB2C8\uB2E4. \uC2A4\uD0AC\uC740 \uC18C\uBE44\uC790 \uD504\uB85C\uC81D\uD2B8\uC5D0 \uC124\uCE58\uD558\uACE0, \uC5EC\uAE30\uC11C\uB294 \uB9AC\uBDF0\uC640 `skills add` \uBC30\uD3EC\uB97C \uC704\uD574 `skills/refineui/`\uC5D0\uC11C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.',
+      searchText: 'skill refineui \uC5D0\uC774\uC804\uD2B8 \uC2A4\uD0AC \u2014 \uCF58\uD150\uCE20\uB97C \uBCF5\uC81C\uD558\uC9C0 \uC54A\uACE0 \uACF5\uC2DD \uBB38\uC11C, design.md, llm.txt, \uB514\uC790\uC778 \uADDC\uCE59\uC73C\uB85C ai \uC5B4\uC2DC\uC2A4\uD134\uD2B8\uB97C \uB77C\uC6B0\uD305\uD569\uB2C8\uB2E4. \n**`refineui`** \uC2A4\uD0AC\uC740 ai \uC5D0\uC774\uC804\uD2B8\uAC00 refineui \uD504\uB85C\uC81D\uD2B8\uC5D0\uC11C \uC77C\uD558\uB294 \uBC29\uBC95\uC744 \uAC00\uB974\uCE69\uB2C8\uB2E4. \uC694\uCCAD\uC744 \uBD84\uB958\uD558\uACE0, \uB77C\uC774\uBE0C \uBB38\uC11C \uC778\uB371\uC2A4\uB97C \uC77D\uC73C\uBA70, \uD1A0\uD070\xB7\uCEF4\uD3EC\uC9C0\uC158 \uADDC\uCE59\uC744 \uB530\uB974\uACE0, \uC120\uD0DD\uC801\uC73C\uB85C `@refineui/mcp`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n## skill.md\n\n`skill.md`\uB294 \uC2A4\uD0AC \uC9C4\uC785\uC810\uC785\uB2C8\uB2E4. \uC5D0\uC774\uC804\uD2B8\uB294 refineui \uAD00\uB828 \uC791\uC5C5\uB9C8\uB2E4 \uBA3C\uC800 \uC774 \uD30C\uC77C\uC744 \uC77D\uC2B5\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uB098 \uD1A0\uD070 \uBAA9\uB85D\uC744 \uB098\uC5F4\uD558\uC9C0 \uC54A\uC73C\uBA70 \u2014 \uACF5\uC2DD \uBB38\uC11C\uB85C **\uC5B4\uB5BB\uAC8C** \uB77C\uC6B0\uD305\uD560\uC9C0, \uCF54\uB4DC\uB97C \uC791\uC131\uD560 \uB54C \uC5B4\uB5A4 \uC81C\uC57D\uC774 \uC801\uC6A9\uB418\uB294\uC9C0\uB97C \uC815\uC758\uD569\uB2C8\uB2E4.\n\n### frontmatter\n\n```yaml\n---\nname: refineui\ndescription: refineui design-system guide for ai agents\u2026\nuser-invocable: true\nargument-hint: "[question or topic]"\n---\n```\n\n| field | purpose |\n|-------|---------|\n| `name` | \uC2A4\uD0AC \uC2DD\uBCC4\uC790 (`refineui`) |\n| `description` | \uD638\uC2A4\uD2B8\uAC00 \uC774 \uC2A4\uD0AC\uC744 \uB85C\uB4DC\uD574\uC57C \uD558\uB294 \uC2DC\uC810 |\n| `user-invocable` | \uC0AC\uC6A9\uC790\uAC00 \uC9C1\uC811 \uD638\uCD9C \uAC00\uB2A5 (\uC608: `/refineui`) |\n| `argument-hint` | \uD638\uCD9C\uACFC \uD568\uAED8 \uC804\uB2EC\uB418\uB294 \uC120\uD0DD\uC801 \uC8FC\uC81C |\n\n### sections\n\n| section | what it tells the agent |\n|---------|-------------------------|\n| **1. classify the request** | foundations vs components vs setup vs mcp vs health check \u2014 \uADF8\uB9AC\uACE0 \uD504\uB85C\uC81D\uD2B8\uB97C \uBA3C\uC800 \uC77D\uC5B4\uC57C \uD558\uB294\uC9C0 |\n| **2. documentation routing** | `design.md` / `llm.txt` / `llms.txt`\uC5D0\uC11C \uC2DC\uC791, ui.pelagornis.com\uC758 leaf \uD398\uC774\uC9C0 \uC5F4\uAE30; \uAC00\uB2A5\uD558\uBA74 mcp \uC0AC\uC6A9 |\n| **3. code-writing contract** | `@refineui/react` \uC784\uD3EC\uD2B8, \uCEF4\uD3EC\uC800\uBE14 api, \uD1A0\uD070\uB9CC\uC73C\uB85C \uC2A4\uD0C0\uC77C\uB9C1, a11y |\n| **4. monorepo contributors** | \uC774 \uC800\uC7A5\uC18C \uB0B4\uBD80 \uACBD\uB85C (`packages/tokens`, `packages/react`, docs) |\n| **5. mcp** | `@refineui/mcp` \uB3C4\uAD6C\uB97C \uC5B8\uC81C\xB7\uC5B4\uB5BB\uAC8C \uC0AC\uC6A9\uD558\uB294\uC9C0 |\n| **6. doctor** | \uC218\uC815\uC744 \uC81C\uC548\uD558\uAE30 \uC804 \uC77D\uAE30 \uC804\uC6A9 \uC9C4\uB2E8 |\n| **7. response principles** | url \uC778\uC6A9, \uAC00\uC774\uB358\uC2A4\uC640 \uD3B8\uC9D1 \uBD84\uB9AC, \uC784\uC758 api \uAE08\uC9C0 |\n\n\uB354 \uAE4A\uC740 \uB0B4\uC6A9\uC740 `references/`\uC640 `rules/`\uC5D0 \uC788\uC2B5\uB2C8\uB2E4 \u2014 `skill.md`\uB294 \uCF58\uD150\uCE20\uB97C \uBCF5\uC81C\uD558\uC9C0 \uC54A\uACE0 \uB9C1\uD06C\uD569\uB2C8\uB2E4.\n\n\uC18C\uC2A4: [skills/refineui/skill.md](https://github.com/pelagornis/refineui/blob/main/skills/refineui/skill.md)\n\n## \uC5ED\uD560\n\n| layer | role |\n|-------|------|\n| **doc routing** | `design.md` / `llm.txt` / `llms.txt`\uC5D0\uC11C \uC2DC\uC791, ui.pelagornis.com\uC758 leaf \uD398\uC774\uC9C0 \uC5F4\uAE30 |\n| **codegen rules** | \uD1A0\uD070\uB9CC\uC73C\uB85C \uC2A4\uD0C0\uC77C\uB9C1, \uCEF4\uD3EC\uC800\uBE14 api, \uC784\uC758 props \uAE08\uC9C0 |\n| **monorepo hints** | \uC774 \uC800\uC7A5\uC18C\uC5D0\uC11C \uD1A0\uD070\xB7\uCEF4\uD3EC\uB10C\uD2B8\xB7\uBB38\uC11C\uAC00 \uC5B4\uB514\uC5D0 \uC788\uB294\uC9C0 |\n| **mcp pointer** | `@refineui/mcp` \uB3C4\uAD6C\uB97C \uC5B8\uC81C \uC0AC\uC6A9\uD558\uB294\uC9C0 |\n| **doctor** | \uC77D\uAE30 \uC804\uC6A9 \uC124\uC815\xB7\uACC4\uC57D \uC9C4\uB2E8 |\n\n\uC2A4\uD0AC\uC740 \uCEF4\uD3EC\uB10C\uD2B8 \uBAA9\uB85D\uC774\uB098 \uD1A0\uD070 \uD14C\uC774\uBE14\uC744 **\uC784\uBCA0\uB4DC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4** \u2014 \uACF5\uC2DD \uBB38\uC11C\uC5D0 \uB450\uC5B4 \uD56D\uC0C1 \uCD5C\uC2E0 \uC0C1\uD0DC\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4.\n\n## \uC124\uCE58\n\n<skillinstall />\n\n## \uD30C\uC77C \uAD6C\uC870\n\n```\nskills/refineui/\n\u251C\u2500\u2500 skill.md                      # entry \u2014 request classification & doc routing\n\u251C\u2500\u2500 references/\n\u2502   \u251C\u2500\u2500 design-rules.md           # points to canonical design.md\n\u2502   \u251C\u2500\u2500 doctor.md                 # doctor workflow & report schema\n\u2502   \u2514\u2500\u2500 mcp.md                    # @refineui/mcp setup & tools\n\u2514\u2500\u2500 rules/                        # doctor rule definitions (read-only diagnostics)\n    \u251C\u2500\u2500 package-setup.md\n    \u251C\u2500\u2500 stylesheet-setup.md\n    \u251C\u2500\u2500 foundation-contract.md\n    \u251C\u2500\u2500 composition-api.md\n    \u2514\u2500\u2500 component-imports.md\n```\n\n| file | when the agent reads it |\n|------|-------------------------|\n| `skill.md` | refineui \uAD00\uB828 \uC9C8\uBB38 \u2014 \uBB38\uC11C \uB610\uB294 references\uB85C \uB77C\uC6B0\uD305 |\n| `references/design-rules.md` | ui \uCF54\uB4DC \uC791\uC131\xB7\uB9AC\uBDF0 \u2192 `design.md` \uC5F4\uAE30 |\n| `references/doctor.md` | \uD5EC\uC2A4 \uCCB4\uD06C / "refineui\uB97C \uC62C\uBC14\uB974\uAC8C \uC4F0\uACE0 \uC788\uB098?" \uC694\uCCAD |\n| `references/mcp.md` | mcp \uD638\uC2A4\uD2B8 \uC124\uC815 \uB610\uB294 \uB3C4\uAD6C \uC120\uD0DD |\n| `rules/*.md` | doctor \uC9C4\uB2E8 (\uC218\uB3D9 \uB610\uB294 `refineui-doctor` cli) |\n\n## \uBB38\uC11C \uB77C\uC6B0\uD305\n\n\uC5D0\uC774\uC804\uD2B8\uB294 \uC554\uAE30\uD55C \uC2AC\uB7EC\uADF8\uC5D0 \uC758\uC874\uD558\uC9C0 \uB9D0\uACE0 **\uB9E4 \uC791\uC5C5\uB9C8\uB2E4 \uC778\uB371\uC2A4\uB97C \uAC00\uC838\uC640\uC57C** \uD569\uB2C8\uB2E4.\n\n1. \uC2DC\uAC01\uC801 \uC544\uC774\uB374\uD2F0\uD2F0\uB97C \uC704\uD574 `https://ui.pelagornis.com/design.md` \uC77D\uAE30\n2. `https://ui.pelagornis.com/llms.txt` \uB610\uB294 `https://ui.pelagornis.com/llm.txt` \uC77D\uAE30\n3. foundations, components, development leaf \uD398\uC774\uC9C0 \uB9C1\uD06C\uB97C \uB530\uB77C\uAC00\uAE30\n4. \uCF54\uB4DC \uC0DD\uC131 \uC2DC \uCEF4\uD3EC\uB10C\uD2B8 \uBB38\uC11C\uC640 [\uC124\uCE58](/ko/development/installation/), [\uD14C\uB9C8](/ko/development/theming/)\uB97C \uD568\uAED8 \uC0AC\uC6A9\n\nmcp\uAC00 \uC124\uC815\uB418\uC5B4 \uC788\uC73C\uBA74 `@refineui/mcp`\uC758 `search_docs`, `get_doc_page`, `get_design_rules`\uB97C \uC6B0\uC120 \uC0AC\uC6A9\uD558\uC138\uC694.\n\n## \uC694\uCCAD \uBD84\uB958\n\n| request | action |\n|---------|--------|\n| token / color / spacing \uC758\uBBF8 | foundations \uBB38\uC11C\uB9CC |\n| \uCEF4\uD3EC\uB10C\uD2B8 api \uB610\uB294 \uC608\uC81C | \uCEF4\uD3EC\uB10C\uD2B8 \uBB38\uC11C + \uC120\uD0DD\uC801 mcp `get_doc_page` |\n| \uC571 \uC124\uC815 / css \uC784\uD3EC\uD2B8 | development \uBB38\uC11C + `package.json` \uAC80\uC0AC |\n| "refineui \uC798 \uC4F0\uACE0 \uC788\uB098?" / \uC124\uC815 \uAC10\uC0AC | [doctor](/ko/ai-tools/doctor/) + `references/doctor.md` \uB610\uB294 mcp `run_doctor` |\n| "list all components" | `llm.txt` \uB610\uB294 mcp `list_components` |\n\n## \uBAA8\uB178\uB808\uD3EC (\uC774 \uC800\uC7A5\uC18C)\n\n\uC774 \uBAA8\uB178\uB808\uD3EC\uC5D0\uC11C \uC18C\uC2A4\uB294 `packages/tokens`, `packages/react`, `docs/`\uC5D0 \uC788\uC2B5\uB2C8\uB2E4. \uC2A4\uD0AC\uC740 \uC18C\uBE44\uC790 \uD504\uB85C\uC81D\uD2B8\uC5D0 \uC124\uCE58\uD558\uACE0, \uC5EC\uAE30\uC11C\uB294 \uB9AC\uBDF0\uC640 `skills add` \uBC30\uD3EC\uB97C \uC704\uD574 `skills/refineui/`\uC5D0\uC11C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.\n'
+    },
+    {
+      slug: "ko/components/accordion",
+      href: "/ko/components/accordion/",
+      title: "Accordion",
+      description: "\uBC00\uC9D1\uB41C \uC815\uBCF4\uB97C \uC704\uD55C \uC811\uC774\uC2DD \uCF58\uD150\uCE20 \uD328\uB110.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ComponentPreview client:load component="accordion" />\n</div>\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="accordion" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="accordion" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Accordion type="single" collapsible>\n  <AccordionItem value="item-1">\n    <AccordionTrigger>What is RefineUI?</AccordionTrigger>\n    <AccordionContent>\n      RefineUI is a design system and component library.\n    </AccordionContent>\n  </AccordionItem>\n  <AccordionItem value="item-2">\n    <AccordionTrigger>How do I install it?</AccordionTrigger>\n    <AccordionContent>\n      Run: bun add @refineui/react @refineui/tokens\n    </AccordionContent>\n  </AccordionItem>\n</Accordion>\n\n<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>\n  {/* Multiple panels can be open */}\n</Accordion>\n\n<Accordion size="lg" value={openItem} onValueChange={setOpenItem}>\n  {/* Controlled accordion */}\n</Accordion>\n```\n\n\uACC4\uC57D \uC18C\uC2A4: `packages/react/spec/components/accordion.json` \u2014 \uC704\uC758 SpecRenderer\uB85C \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.',
+      searchText: 'accordion \uBC00\uC9D1\uB41C \uC815\uBCF4\uB97C \uC704\uD55C \uC811\uC774\uC2DD \uCF58\uD150\uCE20 \uD328\uB110. \n<div class="not-content my-6">\n  <componentpreview client:load component="accordion" />\n</div>\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="accordion" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="accordion" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<accordion type="single" collapsible>\n  <accordionitem value="item-1">\n    <accordiontrigger>what is refineui?</accordiontrigger>\n    <accordioncontent>\n      refineui is a design system and component library.\n    </accordioncontent>\n  </accordionitem>\n  <accordionitem value="item-2">\n    <accordiontrigger>how do i install it?</accordiontrigger>\n    <accordioncontent>\n      run: bun add @refineui/react @refineui/tokens\n    </accordioncontent>\n  </accordionitem>\n</accordion>\n\n<accordion type="multiple" defaultvalue={["item-1", "item-2"]}>\n  {/* multiple panels can be open */}\n</accordion>\n\n<accordion size="lg" value={openitem} onvaluechange={setopenitem}>\n  {/* controlled accordion */}\n</accordion>\n```\n\n\uACC4\uC57D \uC18C\uC2A4: `packages/react/spec/components/accordion.json` \u2014 \uC704\uC758 specrenderer\uB85C \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.\n'
+    },
+    {
+      slug: "ko/components/alert",
+      href: "/ko/components/alert/",
+      title: "Alert",
+      description: "\uC0C1\uD0DC\uB098 \uACBD\uACE0\uB97C \uC804\uB2EC\uD558\uB294 \uB208\uC5D0 \uB744\uB294 \uBA54\uC2DC\uC9C0.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ComponentPreview client:load component="alert" variant="info" />\n</div>\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="alert" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="alert" variant="info" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Alert variant="warning">\n  <AlertRow>\n    <AlertIcon />\n    <AlertBody>\n      <AlertTitle>Warning</AlertTitle>\n      <AlertDescription>Review before continuing.</AlertDescription>\n    </AlertBody>\n    <AlertClose type="button" />\n  </AlertRow>\n  <AlertActions>\n    <AlertAction type="button">Review</AlertAction>\n  </AlertActions>\n</Alert>\n```\n\n\uACC4\uC57D \uC18C\uC2A4: `packages/react/spec/components/alert.json` \u2014 \uC704\uC758 SpecRenderer\uB85C \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.\n\n\uD1A0\uD070 \uCD94\uC801 \uC18C\uC2A4: `packages/react/dist/spec/token-trace-v2.json` + `packages/tokens/dist/spec/trace-v2.json`.',
+      searchText: 'alert \uC0C1\uD0DC\uB098 \uACBD\uACE0\uB97C \uC804\uB2EC\uD558\uB294 \uB208\uC5D0 \uB744\uB294 \uBA54\uC2DC\uC9C0. \n<div class="not-content my-6">\n  <componentpreview client:load component="alert" variant="info" />\n</div>\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="alert" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="alert" variant="info" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<alert variant="warning">\n  <alertrow>\n    <alerticon />\n    <alertbody>\n      <alerttitle>warning</alerttitle>\n      <alertdescription>review before continuing.</alertdescription>\n    </alertbody>\n    <alertclose type="button" />\n  </alertrow>\n  <alertactions>\n    <alertaction type="button">review</alertaction>\n  </alertactions>\n</alert>\n```\n\n\uACC4\uC57D \uC18C\uC2A4: `packages/react/spec/components/alert.json` \u2014 \uC704\uC758 specrenderer\uB85C \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.\n\n\uD1A0\uD070 \uCD94\uC801 \uC18C\uC2A4: `packages/react/dist/spec/token-trace-v2.json` + `packages/tokens/dist/spec/trace-v2.json`.\n'
+    },
+    {
+      slug: "ko/components/avatar",
+      href: "/ko/components/avatar/",
+      title: "Avatar",
+      description: "\uC0AC\uC6A9\uC790 \uC774\uBBF8\uC9C0 \uB610\uB294 \uC774\uB2C8\uC15C \uD45C\uD604.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <AvatarPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="avatar" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Avatar>\n  <AvatarImage src="/user.jpg" alt="User Name" />\n  <AvatarFallback>UN</AvatarFallback>\n</Avatar>\n\n<Avatar size="lg" showStatus status="online">\n  <AvatarImage src="/avatar.jpg" alt="User" />\n  <AvatarFallback>U</AvatarFallback>\n  <AvatarBadge status="online" />\n</Avatar>\n\n<Avatar layout="icon" color="blue">\n  <AvatarIcon name="user" />\n</Avatar>\n\n<Avatar layout="initials" color="green">\n  <AvatarText>AB</AvatarText>\n</Avatar>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Avatar\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "src", default: "\u2014", type: "string | null", description: "\uC774\uBBF8\uC9C0 \uC18C\uC2A4 URL." },\n    { prop: "alt", default: "\u2014", type: "string", description: "\uC774\uBBF8\uC9C0 alt \uD14D\uC2A4\uD2B8." },\n    { prop: "layout", default: "\u2014", type: "\\"image\\" | \\"icon\\" | \\"initials\\"", description: "\uC544\uBC14\uD0C0 \uB808\uC774\uC544\uC6C3(\uC0DD\uB7B5 \uC2DC children\uC5D0\uC11C \uCD94\uB860)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\"", description: "\uC544\uBC14\uD0C0 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "showStatus", default: "false", type: "boolean", description: "\uD504\uB808\uC98C\uC2A4 \uC0C1\uD0DC \uBC30\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "status", default: "\u2014", type: "\\"online\\" | \\"away\\" | \\"unavailable\\" | \\"offline\\"", description: "\uD504\uB808\uC98C\uC2A4 \uC0C1\uD0DC." },\n    { prop: "color", default: "\u2014", type: "AvatarColor", description: "\uBC30\uACBD\uC0C9(\uC544\uC774\uCF58/\uC774\uB2C8\uC15C\uC6A9)." }\n    ]}\n  />\n</div>\n### AvatarImage\n\n\uC774\uBBF8\uC9C0 \uC694\uC18C.\n\n### AvatarFallback\n\n\uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328 \uC2DC \uB300\uCCB4 \uCF58\uD150\uCE20.\n\n### AvatarBadge\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "status", default: "\u2014", type: "\\"online\\" | \\"away\\" | \\"unavailable\\" | \\"offline\\"", description: "\uD504\uB808\uC98C\uC2A4 \uC0C1\uD0DC \uC778\uB514\uCF00\uC774\uD130." }\n    ]}\n  />\n</div>\n### AvatarText\n\n\uC774\uB2C8\uC15C\uC6A9 \uD14D\uC2A4\uD2B8 \uCF58\uD150\uCE20.\n\n### AvatarIcon\n\n\uC544\uC774\uCF58 \uB808\uC774\uC544\uC6C3\uC6A9 \uC544\uC774\uCF58 \uC694\uC18C.',
+      searchText: 'avatar \uC0AC\uC6A9\uC790 \uC774\uBBF8\uC9C0 \uB610\uB294 \uC774\uB2C8\uC15C \uD45C\uD604. <div class="not-content my-6">\n  <avatarpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="avatar" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<avatar>\n  <avatarimage src="/user.jpg" alt="user name" />\n  <avatarfallback>un</avatarfallback>\n</avatar>\n\n<avatar size="lg" showstatus status="online">\n  <avatarimage src="/avatar.jpg" alt="user" />\n  <avatarfallback>u</avatarfallback>\n  <avatarbadge status="online" />\n</avatar>\n\n<avatar layout="icon" color="blue">\n  <avataricon name="user" />\n</avatar>\n\n<avatar layout="initials" color="green">\n  <avatartext>ab</avatartext>\n</avatar>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### avatar\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "src", default: "\u2014", type: "string | null", description: "\uC774\uBBF8\uC9C0 \uC18C\uC2A4 url." },\n    { prop: "alt", default: "\u2014", type: "string", description: "\uC774\uBBF8\uC9C0 alt \uD14D\uC2A4\uD2B8." },\n    { prop: "layout", default: "\u2014", type: "\\"image\\" | \\"icon\\" | \\"initials\\"", description: "\uC544\uBC14\uD0C0 \uB808\uC774\uC544\uC6C3(\uC0DD\uB7B5 \uC2DC children\uC5D0\uC11C \uCD94\uB860)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\"", description: "\uC544\uBC14\uD0C0 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "showstatus", default: "false", type: "boolean", description: "\uD504\uB808\uC98C\uC2A4 \uC0C1\uD0DC \uBC30\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "status", default: "\u2014", type: "\\"online\\" | \\"away\\" | \\"unavailable\\" | \\"offline\\"", description: "\uD504\uB808\uC98C\uC2A4 \uC0C1\uD0DC." },\n    { prop: "color", default: "\u2014", type: "avatarcolor", description: "\uBC30\uACBD\uC0C9(\uC544\uC774\uCF58/\uC774\uB2C8\uC15C\uC6A9)." }\n    ]}\n  />\n</div>\n### avatarimage\n\n\uC774\uBBF8\uC9C0 \uC694\uC18C.\n\n### avatarfallback\n\n\uC774\uBBF8\uC9C0 \uB85C\uB4DC \uC2E4\uD328 \uC2DC \uB300\uCCB4 \uCF58\uD150\uCE20.\n\n### avatarbadge\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "status", default: "\u2014", type: "\\"online\\" | \\"away\\" | \\"unavailable\\" | \\"offline\\"", description: "\uD504\uB808\uC98C\uC2A4 \uC0C1\uD0DC \uC778\uB514\uCF00\uC774\uD130." }\n    ]}\n  />\n</div>\n### avatartext\n\n\uC774\uB2C8\uC15C\uC6A9 \uD14D\uC2A4\uD2B8 \uCF58\uD150\uCE20.\n\n### avataricon\n\n\uC544\uC774\uCF58 \uB808\uC774\uC544\uC6C3\uC6A9 \uC544\uC774\uCF58 \uC694\uC18C.\n\n'
+    },
+    {
+      slug: "ko/components/avatars",
+      href: "/ko/components/avatars/",
+      title: "Avatar Group",
+      description: "\uD300/\uC0AC\uC6A9\uC790 \uBAA9\uB85D\uC6A9 \uADF8\uB8F9 \uC544\uBC14\uD0C0.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <AvatarsPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="avatars" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Avatars\n  avatars={[\n    { src: "/user1.jpg", alt: "User 1" },\n    { src: "/user2.jpg", alt: "User 2" },\n    { src: "/user3.jpg", alt: "User 3" }\n  ]}\n/>\n\n<Avatars\n  avatars={teamMembers}\n  size="lg"\n  max={3}\n  layout="spread"\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "avatars", default: "\u2014", type: "AvatarItem[]", description: "\uC544\uBC14\uD0C0 \uD56D\uBAA9 \uBC30\uC5F4(\uD544\uC218). \uAC01 \uD56D\uBAA9\uC740 `src?`, `alt` \uC18D\uC131\uC744 \uAC00\uC9D1\uB2C8\uB2E4." },\n    { prop: "size", default: "\\"md\\"", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\"", description: "\uC544\uBC14\uD0C0 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "max", default: "\u2014", type: "number", description: "\uAC1C\uC218 \uD45C\uC2DC \uC804\uC5D0 \uBCF4\uC5EC\uC904 \uCD5C\uB300 \uC544\uBC14\uD0C0 \uC218." },\n    { prop: "layout", default: "\\"stack\\"", type: "\\"stack\\" | \\"spread\\"", description: "\uB808\uC774\uC544\uC6C3 \uC2A4\uD0C0\uC77C: \uC2A4\uD0DD \uB610\uB294 \uD3BC\uCE68." }\n    ]}\n  />\n</div>',
+      searchText: 'avatar group \uD300/\uC0AC\uC6A9\uC790 \uBAA9\uB85D\uC6A9 \uADF8\uB8F9 \uC544\uBC14\uD0C0. <div class="not-content my-6">\n  <avatarspreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="avatars" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<avatars\n  avatars={[\n    { src: "/user1.jpg", alt: "user 1" },\n    { src: "/user2.jpg", alt: "user 2" },\n    { src: "/user3.jpg", alt: "user 3" }\n  ]}\n/>\n\n<avatars\n  avatars={teammembers}\n  size="lg"\n  max={3}\n  layout="spread"\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "avatars", default: "\u2014", type: "avataritem[]", description: "\uC544\uBC14\uD0C0 \uD56D\uBAA9 \uBC30\uC5F4(\uD544\uC218). \uAC01 \uD56D\uBAA9\uC740 `src?`, `alt` \uC18D\uC131\uC744 \uAC00\uC9D1\uB2C8\uB2E4." },\n    { prop: "size", default: "\\"md\\"", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\"", description: "\uC544\uBC14\uD0C0 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "max", default: "\u2014", type: "number", description: "\uAC1C\uC218 \uD45C\uC2DC \uC804\uC5D0 \uBCF4\uC5EC\uC904 \uCD5C\uB300 \uC544\uBC14\uD0C0 \uC218." },\n    { prop: "layout", default: "\\"stack\\"", type: "\\"stack\\" | \\"spread\\"", description: "\uB808\uC774\uC544\uC6C3 \uC2A4\uD0C0\uC77C: \uC2A4\uD0DD \uB610\uB294 \uD3BC\uCE68." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/badge",
+      href: "/ko/components/badge/",
+      title: "Badge",
+      description: "\uC0C1\uD0DC \uBC30\uC9C0 \uB610\uB294 \uC22B\uC790 \uCE74\uC6B4\uD130 \uD0DC\uADF8.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <BadgePreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="badge" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="badge" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Badge>New</Badge>\n\n<Badge variant="success">5</Badge>\n\n<Badge variant="warning" layout="number">12</Badge>\n\n<Badge variant="danger">Error</Badge>\n\n<Badge variant="outline">Draft</Badge>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"neutral\\" | \\"outline\\" | \\"success\\" | \\"warning\\" | \\"danger\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "layout", default: "\\"label\\"", type: "\\"label\\" | \\"number\\"", description: "\uB808\uC774\uBE14 vs \uC22B\uC790 \uD45C\uC2DC\uC6A9 \uB808\uC774\uC544\uC6C3 \uD0C0\uC785." }\n    ]}\n  />\n</div>',
+      searchText: 'badge \uC0C1\uD0DC \uBC30\uC9C0 \uB610\uB294 \uC22B\uC790 \uCE74\uC6B4\uD130 \uD0DC\uADF8. <div class="not-content my-6">\n  <badgepreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="badge" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="badge" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<badge>new</badge>\n\n<badge variant="success">5</badge>\n\n<badge variant="warning" layout="number">12</badge>\n\n<badge variant="danger">error</badge>\n\n<badge variant="outline">draft</badge>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"neutral\\" | \\"outline\\" | \\"success\\" | \\"warning\\" | \\"danger\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "layout", default: "\\"label\\"", type: "\\"label\\" | \\"number\\"", description: "\uB808\uC774\uBE14 vs \uC22B\uC790 \uD45C\uC2DC\uC6A9 \uB808\uC774\uC544\uC6C3 \uD0C0\uC785." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/box",
+      href: "/ko/components/box/",
+      title: "Box",
+      description: "\uD328\uB529, \uC2DC\uB9E8\uD2F1 \uCC44\uC6B0\uAE30, radius, border \u2014 \uAE30\uBCF8 \uB808\uC774\uC544\uC6C3 \uD45C\uBA74.",
+      category: "guides",
+      content: '`Box`\uB294 Foundation spacing, color, radius, stroke \uD1A0\uD070\uC744 \uD558\uB098\uC758 \uD45C\uBA74\uC5D0 \uC801\uC6A9\uD569\uB2C8\uB2E4. CSS\uB97C \uC9C1\uC811 \uB9CC\uB4E4\uC9C0 \uC54A\uACE0 \uD1A0\uD070 \uAE30\uBC18 \uB798\uD37C\uAC00 \uD544\uC694\uD560 \uB54C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n  <BoxPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="box" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">\n  Content\n</Box>\n\n<Box\n  as="section"\n  paddingX="sizeLarge"\n  paddingY="sizeSmall"\n  border="strokeWidthThin"\n  borderColor="borderDefault"\n  background="backgroundPrimary"\n>\n  Outlined section\n</Box>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "padding", default: "\u2014", type: "Spacing token", description: "\uBAA8\uB4E0 \uBA74 \uD328\uB529." },\n    { prop: "paddingX", default: "\u2014", type: "Spacing token", description: "\uAC00\uB85C \uD328\uB529." },\n    { prop: "paddingY", default: "\u2014", type: "Spacing token", description: "\uC138\uB85C \uD328\uB529." },\n    { prop: "background", default: "\u2014", type: "Background / surface alias", description: "\uCC44\uC6B0\uAE30 \uC0C9." },\n    { prop: "radius", default: "\u2014", type: "Radius token", description: "\uBAA8\uC11C\uB9AC radius." },\n    { prop: "border", default: "\u2014", type: "Stroke token", description: "\uD14C\uB450\uB9AC \uB450\uAED8." },\n    { prop: "borderColor", default: "\u2014", type: "Border color alias", description: "\uD14C\uB450\uB9AC \uC0C9(`border`\uC640 \uD568\uAED8 \uAE30\uBCF8 \uC801\uC6A9)." }\n    ]}\n  />\n</div>',
+      searchText: 'box \uD328\uB529, \uC2DC\uB9E8\uD2F1 \uCC44\uC6B0\uAE30, radius, border \u2014 \uAE30\uBCF8 \uB808\uC774\uC544\uC6C3 \uD45C\uBA74. `box`\uB294 foundation spacing, color, radius, stroke \uD1A0\uD070\uC744 \uD558\uB098\uC758 \uD45C\uBA74\uC5D0 \uC801\uC6A9\uD569\uB2C8\uB2E4. css\uB97C \uC9C1\uC811 \uB9CC\uB4E4\uC9C0 \uC54A\uACE0 \uD1A0\uD070 \uAE30\uBC18 \uB798\uD37C\uAC00 \uD544\uC694\uD560 \uB54C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n  <boxpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="box" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<box padding="sizelarge" background="backgroundsurface" radius="roundedlarge">\n  content\n</box>\n\n<box\n  as="section"\n  paddingx="sizelarge"\n  paddingy="sizesmall"\n  border="strokewidththin"\n  bordercolor="borderdefault"\n  background="backgroundprimary"\n>\n  outlined section\n</box>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "padding", default: "\u2014", type: "spacing token", description: "\uBAA8\uB4E0 \uBA74 \uD328\uB529." },\n    { prop: "paddingx", default: "\u2014", type: "spacing token", description: "\uAC00\uB85C \uD328\uB529." },\n    { prop: "paddingy", default: "\u2014", type: "spacing token", description: "\uC138\uB85C \uD328\uB529." },\n    { prop: "background", default: "\u2014", type: "background / surface alias", description: "\uCC44\uC6B0\uAE30 \uC0C9." },\n    { prop: "radius", default: "\u2014", type: "radius token", description: "\uBAA8\uC11C\uB9AC radius." },\n    { prop: "border", default: "\u2014", type: "stroke token", description: "\uD14C\uB450\uB9AC \uB450\uAED8." },\n    { prop: "bordercolor", default: "\u2014", type: "border color alias", description: "\uD14C\uB450\uB9AC \uC0C9(`border`\uC640 \uD568\uAED8 \uAE30\uBCF8 \uC801\uC6A9)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/breadcrumb",
+      href: "/ko/components/breadcrumb/",
+      title: "Breadcrumb",
+      description: "\uD398\uC774\uC9C0 \uC704\uCE58\uB97C \uBCF4\uC5EC\uC8FC\uB294 \uACC4\uCE35\uD615 \uACBD\uB85C.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <BreadcrumbPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Components</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n\n<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem>\n      <BreadcrumbLink href="/">Home</BreadcrumbLink>\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbEllipsis />\n    </BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem>\n      <BreadcrumbPage>Current</BreadcrumbPage>\n    </BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### BreadcrumbList\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### BreadcrumbItem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### BreadcrumbLink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### BreadcrumbPage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### BreadcrumbSeparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### BreadcrumbEllipsis\n\n\uC811\uD78C \uD56D\uBAA9 \uD45C\uC2DC\uAE30.',
+      searchText: 'breadcrumb \uD398\uC774\uC9C0 \uC704\uCE58\uB97C \uBCF4\uC5EC\uC8FC\uB294 \uACC4\uCE35\uD615 \uACBD\uB85C. <div class="not-content my-6">\n  <breadcrumbpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="breadcrumb" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumblink href="/docs">docs</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>components</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n\n<breadcrumb>\n  <breadcrumblist>\n    <breadcrumbitem>\n      <breadcrumblink href="/">home</breadcrumblink>\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbellipsis />\n    </breadcrumbitem>\n    <breadcrumbseparator />\n    <breadcrumbitem>\n      <breadcrumbpage>current</breadcrumbpage>\n    </breadcrumbitem>\n  </breadcrumblist>\n</breadcrumb>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### breadcrumb\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### breadcrumblist\n\n\uBE0C\uB808\uB4DC\uD06C\uB7FC \uD56D\uBAA9\uC758 \uC21C\uC11C \uBAA9\uB85D.\n\n### breadcrumbitem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### breadcrumblink\n\n\uD398\uC774\uC9C0 \uB9C1\uD06C.\n\n### breadcrumbpage\n\n\uD604\uC7AC \uD398\uC774\uC9C0(\uD074\uB9AD \uBD88\uAC00).\n\n### breadcrumbseparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### breadcrumbellipsis\n\n\uC811\uD78C \uD56D\uBAA9 \uD45C\uC2DC\uAE30.\n\n'
+    },
+    {
+      slug: "ko/components/bubble",
+      href: "/ko/components/bubble/",
+      title: "Bubble",
+      description: "\uB300\uD654\uD615 UI\uC6A9 \uCC44\uD305 \uC2A4\uD0C0\uC77C \uBA54\uC2DC\uC9C0 \uBC84\uBE14.",
+      category: "guides",
+      content: '`Bubble`\uC740 \uCC44\uD305\xB7\uB300\uD654 \uB808\uC774\uC544\uC6C3\uC6A9 \uBA54\uC2DC\uC9C0 \uD45C\uBA74\uC744 \uB80C\uB354\uB9C1\uD569\uB2C8\uB2E4. `BubbleContent`, \uC120\uD0DD\uC801 `BubbleReactions`, \uC2A4\uD0DD \uBA54\uC2DC\uC9C0\uC6A9 `BubbleGroup`\uACFC \uD568\uAED8 \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n  <BubbleDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="bubble" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Bubble variant="muted" align="start">\n  <BubbleContent>Want to catch up later?</BubbleContent>\n</Bubble>\n\n<Bubble variant="default" align="end">\n  <BubbleContent>Sounds good.</BubbleContent>\n</Bubble>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Bubble\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\u2014", type: "\\"default\\" | \\"secondary\\" | \\"muted\\" | \\"tinted\\" | \\"outline\\" | \\"ghost\\" | \\"destructive\\"", description: "\uC2DC\uAC01 \uC2A4\uD0C0\uC77C." },\n    { prop: "align", default: "\u2014", type: "\\"start\\" | \\"end\\"", description: "\uBA54\uC2DC\uC9C0 \uC815\uB82C." }\n    ]}\n  />\n</div>\n### BubbleContent / BubbleReactions / BubbleGroup\n\n\uBCF8\uBB38 \uD14D\uC2A4\uD2B8, \uB9AC\uC561\uC158, \uC2A4\uD0DD \uADF8\uB8F9\uC6A9 \uC870\uD569 \uC2AC\uB86F\uC785\uB2C8\uB2E4. \uAD6C\uC870\uB294 \uD504\uB9AC\uBDF0\uB97C \uCC38\uACE0\uD558\uC138\uC694.',
+      searchText: 'bubble \uB300\uD654\uD615 ui\uC6A9 \uCC44\uD305 \uC2A4\uD0C0\uC77C \uBA54\uC2DC\uC9C0 \uBC84\uBE14. `bubble`\uC740 \uCC44\uD305\xB7\uB300\uD654 \uB808\uC774\uC544\uC6C3\uC6A9 \uBA54\uC2DC\uC9C0 \uD45C\uBA74\uC744 \uB80C\uB354\uB9C1\uD569\uB2C8\uB2E4. `bubblecontent`, \uC120\uD0DD\uC801 `bubblereactions`, \uC2A4\uD0DD \uBA54\uC2DC\uC9C0\uC6A9 `bubblegroup`\uACFC \uD568\uAED8 \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n  <bubbledemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="bubble" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<bubble variant="muted" align="start">\n  <bubblecontent>want to catch up later?</bubblecontent>\n</bubble>\n\n<bubble variant="default" align="end">\n  <bubblecontent>sounds good.</bubblecontent>\n</bubble>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### bubble\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\u2014", type: "\\"default\\" | \\"secondary\\" | \\"muted\\" | \\"tinted\\" | \\"outline\\" | \\"ghost\\" | \\"destructive\\"", description: "\uC2DC\uAC01 \uC2A4\uD0C0\uC77C." },\n    { prop: "align", default: "\u2014", type: "\\"start\\" | \\"end\\"", description: "\uBA54\uC2DC\uC9C0 \uC815\uB82C." }\n    ]}\n  />\n</div>\n### bubblecontent / bubblereactions / bubblegroup\n\n\uBCF8\uBB38 \uD14D\uC2A4\uD2B8, \uB9AC\uC561\uC158, \uC2A4\uD0DD \uADF8\uB8F9\uC6A9 \uC870\uD569 \uC2AC\uB86F\uC785\uB2C8\uB2E4. \uAD6C\uC870\uB294 \uD504\uB9AC\uBDF0\uB97C \uCC38\uACE0\uD558\uC138\uC694.\n'
+    },
+    {
+      slug: "ko/components/button-group",
+      href: "/ko/components/button-group/",
+      title: "Button Group",
+      description: "Button Group\uC740 \uC544\uC9C1 @refineui/react\uC5D0 \uC81C\uACF5\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.",
+      category: "guides",
+      content: 'Button Group \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uD604\uC7AC `@refineui/react`\uC5D0 \uD3EC\uD568\uB418\uC5B4 \uC788\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n\uBC84\uD2BC\uC744 \uBB36\uC744 \uB54C\uB294 `Stack` \uAC19\uC740 \uB808\uC774\uC544\uC6C3 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC0AC\uC6A9\uD558\uC138\uC694:\n\n```tsx\n<Stack direction="row" gap="sizeXSmall">\n  <Button variant="outline">Cancel</Button>\n  <Button variant="primary">Save</Button>\n</Stack>\n```',
+      searchText: 'button group button group\uC740 \uC544\uC9C1 @refineui/react\uC5D0 \uC81C\uACF5\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \nbutton group \uCEF4\uD3EC\uB10C\uD2B8\uB294 \uD604\uC7AC `@refineui/react`\uC5D0 \uD3EC\uD568\uB418\uC5B4 \uC788\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.\n\n\uBC84\uD2BC\uC744 \uBB36\uC744 \uB54C\uB294 `stack` \uAC19\uC740 \uB808\uC774\uC544\uC6C3 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC0AC\uC6A9\uD558\uC138\uC694:\n\n```tsx\n<stack direction="row" gap="sizexsmall">\n  <button variant="outline">cancel</button>\n  <button variant="primary">save</button>\n</stack>\n```\n\n'
+    },
+    {
+      slug: "ko/components/button",
+      href: "/ko/components/button/",
+      title: "Button",
+      description: "\uC800\uC7A5, \uACC4\uC18D, \uD328\uB110 \uC5F4\uAE30, \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB2EB\uAE30 \uB4F1 \uC561\uC158\uC744 \uC2DC\uC791\uD569\uB2C8\uB2E4.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ComponentPreview client:load component="button" variant="primary" />\n</div>\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="button" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="button" variant="primary" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n\uBDF0\uB2F9 \uAE30\uBCF8(primary) \uC561\uC158\uC740 \uD558\uB098\uB9CC \uC0AC\uC6A9\uD558\uC138\uC694. \uBC00\uC9D1\uB41C \uD234\uBC14\uC758 \uBCF4\uC870 \uC561\uC158\uC5D0\uB294 ghost \uB610\uB294 outline\uC744 \uAD8C\uC7A5\uD569\uB2C8\uB2E4.\n\n```tsx\n<Button variant="primary" size="md">\n  Continue\n</Button>\n\n<Button variant="outline" disabled>\n  Unavailable\n</Button>\n\n<Button variant="ghost" layout="icon" aria-label="Add">\n  <WebIcon name="add" size={iconSizes.medium} color="currentColor" />\n</Button>\n```\n\n\uACC4\uC57D \uC18C\uC2A4: `packages/react/spec/components/button.json` \u2014 \uC704\uC758 SpecRenderer\uB85C \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.',
+      searchText: 'button \uC800\uC7A5, \uACC4\uC18D, \uD328\uB110 \uC5F4\uAE30, \uB2E4\uC774\uC5BC\uB85C\uADF8 \uB2EB\uAE30 \uB4F1 \uC561\uC158\uC744 \uC2DC\uC791\uD569\uB2C8\uB2E4. \n<div class="not-content my-6">\n  <componentpreview client:load component="button" variant="primary" />\n</div>\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="button" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="button" variant="primary" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n\uBDF0\uB2F9 \uAE30\uBCF8(primary) \uC561\uC158\uC740 \uD558\uB098\uB9CC \uC0AC\uC6A9\uD558\uC138\uC694. \uBC00\uC9D1\uB41C \uD234\uBC14\uC758 \uBCF4\uC870 \uC561\uC158\uC5D0\uB294 ghost \uB610\uB294 outline\uC744 \uAD8C\uC7A5\uD569\uB2C8\uB2E4.\n\n```tsx\n<button variant="primary" size="md">\n  continue\n</button>\n\n<button variant="outline" disabled>\n  unavailable\n</button>\n\n<button variant="ghost" layout="icon" aria-label="add">\n  <webicon name="add" size={iconsizes.medium} color="currentcolor" />\n</button>\n```\n\n\uACC4\uC57D \uC18C\uC2A4: `packages/react/spec/components/button.json` \u2014 \uC704\uC758 specrenderer\uB85C \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.\n'
+    },
+    {
+      slug: "ko/components/calendar",
+      href: "/ko/components/calendar/",
+      title: "Calendar",
+      description: "\uB0A0\uC9DC \uC120\uD0DD \uCE98\uB9B0\uB354 \uADF8\uB9AC\uB4DC \uCEF4\uD3EC\uB10C\uD2B8.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <CalendarPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="calendar" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Calendar value={selectedDate} onChange={setSelectedDate} />\n\n<Calendar\n  mode="range"\n  rangeStart={startDate}\n  rangeEnd={endDate}\n  onRangeChange={(start, end) => {\n    setStartDate(start);\n    setEndDate(end);\n  }}\n/>\n\n<Calendar weekStartsOn={1} defaultMonth={new Date(2024, 0)} />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "mode", default: "\\"single\\"", type: "\\"single\\" | \\"range\\"", description: "\uC120\uD0DD \uBAA8\uB4DC." },\n    { prop: "value", default: "\u2014", type: "Date", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uB0A0\uC9DC(single \uBAA8\uB4DC)." },\n    { prop: "onChange", default: "\u2014", type: "(date: Date) => void", description: "\uB0A0\uC9DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC(single \uBAA8\uB4DC)." },\n    { prop: "rangeStart", default: "\u2014", type: "Date", description: "\uC81C\uC5B4\uD615 \uBC94\uC704 \uC2DC\uC791 \uB0A0\uC9DC(range \uBAA8\uB4DC)." },\n    { prop: "rangeEnd", default: "\u2014", type: "Date", description: "\uC81C\uC5B4\uD615 \uBC94\uC704 \uC885\uB8CC \uB0A0\uC9DC(range \uBAA8\uB4DC)." },\n    { prop: "onRangeChange", default: "\u2014", type: "(start?: Date, end?: Date) => void", description: "\uBC94\uC704 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC(range \uBAA8\uB4DC)." },\n    { prop: "weekStartsOn", default: "0", type: "0 | 1", description: "\uC8FC\uC758 \uCCAB \uC694\uC77C: 0(\uC77C\uC694\uC77C) \uB610\uB294 1(\uC6D4\uC694\uC77C)." },\n    { prop: "defaultMonth", default: "\u2014", type: "Date", description: "\uCC98\uC74C\uC5D0 \uD45C\uC2DC\uD560 \uC6D4." }\n    ]}\n  />\n</div>',
+      searchText: 'calendar \uB0A0\uC9DC \uC120\uD0DD \uCE98\uB9B0\uB354 \uADF8\uB9AC\uB4DC \uCEF4\uD3EC\uB10C\uD2B8. <div class="not-content my-6">\n  <calendarpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="calendar" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<calendar value={selecteddate} onchange={setselecteddate} />\n\n<calendar\n  mode="range"\n  rangestart={startdate}\n  rangeend={enddate}\n  onrangechange={(start, end) => {\n    setstartdate(start);\n    setenddate(end);\n  }}\n/>\n\n<calendar weekstartson={1} defaultmonth={new date(2024, 0)} />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "mode", default: "\\"single\\"", type: "\\"single\\" | \\"range\\"", description: "\uC120\uD0DD \uBAA8\uB4DC." },\n    { prop: "value", default: "\u2014", type: "date", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uB0A0\uC9DC(single \uBAA8\uB4DC)." },\n    { prop: "onchange", default: "\u2014", type: "(date: date) => void", description: "\uB0A0\uC9DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC(single \uBAA8\uB4DC)." },\n    { prop: "rangestart", default: "\u2014", type: "date", description: "\uC81C\uC5B4\uD615 \uBC94\uC704 \uC2DC\uC791 \uB0A0\uC9DC(range \uBAA8\uB4DC)." },\n    { prop: "rangeend", default: "\u2014", type: "date", description: "\uC81C\uC5B4\uD615 \uBC94\uC704 \uC885\uB8CC \uB0A0\uC9DC(range \uBAA8\uB4DC)." },\n    { prop: "onrangechange", default: "\u2014", type: "(start?: date, end?: date) => void", description: "\uBC94\uC704 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC(range \uBAA8\uB4DC)." },\n    { prop: "weekstartson", default: "0", type: "0 | 1", description: "\uC8FC\uC758 \uCCAB \uC694\uC77C: 0(\uC77C\uC694\uC77C) \uB610\uB294 1(\uC6D4\uC694\uC77C)." },\n    { prop: "defaultmonth", default: "\u2014", type: "date", description: "\uCC98\uC74C\uC5D0 \uD45C\uC2DC\uD560 \uC6D4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/card",
+      href: "/ko/components/card/",
+      title: "Card",
+      description: "\uAD00\uB828 \uC815\uBCF4\uB97C \uBB36\uB294 \uCEE8\uD14C\uC774\uB108.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <CardPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="card" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Card>\n  <CardHeader>\n    <CardTitle>Card Title</CardTitle>\n    <CardDescription>Card description goes here.</CardDescription>\n  </CardHeader>\n  <CardContent>\n    <p>Card body content</p>\n  </CardContent>\n  <CardFooter>\n    <Button>Action</Button>\n  </CardFooter>\n</Card>\n\n<Card variant="outlined" interactive state="hover">\n  <CardContent>\n    Interactive card with outlined variant\n  </CardContent>\n</Card>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Card\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"elevated\\"", type: "\\"elevated\\" | \\"outlined\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "interactive", default: "false", type: "boolean", description: "\uD638\uBC84/\uD504\uB808\uC2A4 \uC778\uD130\uB799\uC158\uC744 \uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### CardHeader\n\n\uD5E4\uB354 \uB808\uC774\uC544\uC6C3 \uC139\uC158.\n\n### CardHeaderMain\n\n\uBA54\uC778 \uD5E4\uB354 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### CardTitle\n\n\uC81C\uBAA9 \uD5E4\uB529 \uC694\uC18C.\n\n### CardDescription\n\n\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8.\n\n### CardContent\n\n\uCE74\uB4DC \uBCF8\uBB38 \uCF58\uD150\uCE20.\n\n### CardFooter\n\n\uD478\uD130 \uC139\uC158(\uBCF4\uD1B5 \uC561\uC158\uC6A9).\n\n### CardAction\n\n\uD5E4\uB354\uC758 \uC561\uC158 \uBC84\uD2BC.',
+      searchText: 'card \uAD00\uB828 \uC815\uBCF4\uB97C \uBB36\uB294 \uCEE8\uD14C\uC774\uB108. <div class="not-content my-6">\n  <cardpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="card" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<card>\n  <cardheader>\n    <cardtitle>card title</cardtitle>\n    <carddescription>card description goes here.</carddescription>\n  </cardheader>\n  <cardcontent>\n    <p>card body content</p>\n  </cardcontent>\n  <cardfooter>\n    <button>action</button>\n  </cardfooter>\n</card>\n\n<card variant="outlined" interactive state="hover">\n  <cardcontent>\n    interactive card with outlined variant\n  </cardcontent>\n</card>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### card\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"elevated\\"", type: "\\"elevated\\" | \\"outlined\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "interactive", default: "false", type: "boolean", description: "\uD638\uBC84/\uD504\uB808\uC2A4 \uC778\uD130\uB799\uC158\uC744 \uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### cardheader\n\n\uD5E4\uB354 \uB808\uC774\uC544\uC6C3 \uC139\uC158.\n\n### cardheadermain\n\n\uBA54\uC778 \uD5E4\uB354 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### cardtitle\n\n\uC81C\uBAA9 \uD5E4\uB529 \uC694\uC18C.\n\n### carddescription\n\n\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8.\n\n### cardcontent\n\n\uCE74\uB4DC \uBCF8\uBB38 \uCF58\uD150\uCE20.\n\n### cardfooter\n\n\uD478\uD130 \uC139\uC158(\uBCF4\uD1B5 \uC561\uC158\uC6A9).\n\n### cardaction\n\n\uD5E4\uB354\uC758 \uC561\uC158 \uBC84\uD2BC.\n\n'
+    },
+    {
+      slug: "ko/components/carousel",
+      href: "/ko/components/carousel/",
+      title: "Carousel",
+      description: "\uC774\uBBF8\uC9C0 \uB610\uB294 \uCE74\uB4DC \uC2AC\uB77C\uC774\uB354 \uCE90\uB7EC\uC140.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <CarouselDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="carousel" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Carousel>\n  <CarouselContent>\n    <CarouselItem>\n      <img src="/slide1.jpg" alt="Slide 1" />\n    </CarouselItem>\n    <CarouselItem>\n      <img src="/slide2.jpg" alt="Slide 2" />\n    </CarouselItem>\n    <CarouselItem>\n      <img src="/slide3.jpg" alt="Slide 3" />\n    </CarouselItem>\n  </CarouselContent>\n  <CarouselControls>\n    <CarouselPrevious />\n    <CarouselNext />\n  </CarouselControls>\n  <CarouselIndicators />\n</Carousel>\n\n<Carousel\n  index={currentIndex}\n  onIndexChange={setCurrentIndex}\n  loop\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Carousel\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uC2AC\uB77C\uC774\uB4DC \uC778\uB371\uC2A4(0\uBD80\uD130)." },\n    { prop: "defaultIndex", default: "0", type: "number", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC778\uB371\uC2A4." },\n    { prop: "onIndexChange", default: "\u2014", type: "(index: number) => void", description: "\uC2AC\uB77C\uC774\uB4DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "loop", default: "false", type: "boolean", description: "\uB9C8\uC9C0\uB9C9\u2194\uCC98\uC74C\uC73C\uB85C \uC21C\uD658\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### CarouselContent\n\n\uC2AC\uB77C\uC774\uB4DC \uCEE8\uD14C\uC774\uB108.\n\n### CarouselItem\n\n\uAC1C\uBCC4 \uC2AC\uB77C\uC774\uB4DC.\n\n### CarouselControls\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uBC84\uD2BC \uCEE8\uD14C\uC774\uB108.\n\n### CarouselPrevious\n\n\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC \uBC84\uD2BC.\n\n### CarouselNext\n\n\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC \uBC84\uD2BC.\n\n### CarouselIndicators\n\n\uC2AC\uB77C\uC774\uB4DC \uC810 \uC778\uB514\uCF00\uC774\uD130.',
+      searchText: 'carousel \uC774\uBBF8\uC9C0 \uB610\uB294 \uCE74\uB4DC \uC2AC\uB77C\uC774\uB354 \uCE90\uB7EC\uC140. <div class="not-content my-6">\n  <carouseldemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="carousel" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<carousel>\n  <carouselcontent>\n    <carouselitem>\n      <img src="/slide1.jpg" alt="slide 1" />\n    </carouselitem>\n    <carouselitem>\n      <img src="/slide2.jpg" alt="slide 2" />\n    </carouselitem>\n    <carouselitem>\n      <img src="/slide3.jpg" alt="slide 3" />\n    </carouselitem>\n  </carouselcontent>\n  <carouselcontrols>\n    <carouselprevious />\n    <carouselnext />\n  </carouselcontrols>\n  <carouselindicators />\n</carousel>\n\n<carousel\n  index={currentindex}\n  onindexchange={setcurrentindex}\n  loop\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### carousel\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uC2AC\uB77C\uC774\uB4DC \uC778\uB371\uC2A4(0\uBD80\uD130)." },\n    { prop: "defaultindex", default: "0", type: "number", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC778\uB371\uC2A4." },\n    { prop: "onindexchange", default: "\u2014", type: "(index: number) => void", description: "\uC2AC\uB77C\uC774\uB4DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "loop", default: "false", type: "boolean", description: "\uB9C8\uC9C0\uB9C9\u2194\uCC98\uC74C\uC73C\uB85C \uC21C\uD658\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### carouselcontent\n\n\uC2AC\uB77C\uC774\uB4DC \uCEE8\uD14C\uC774\uB108.\n\n### carouselitem\n\n\uAC1C\uBCC4 \uC2AC\uB77C\uC774\uB4DC.\n\n### carouselcontrols\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uBC84\uD2BC \uCEE8\uD14C\uC774\uB108.\n\n### carouselprevious\n\n\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC \uBC84\uD2BC.\n\n### carouselnext\n\n\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC \uBC84\uD2BC.\n\n### carouselindicators\n\n\uC2AC\uB77C\uC774\uB4DC \uC810 \uC778\uB514\uCF00\uC774\uD130.\n\n'
+    },
+    {
+      slug: "ko/components/chart",
+      href: "/ko/components/chart/",
+      title: "Chart",
+      description: "\uB370\uC774\uD130 \uC2DC\uAC01\uD654 \uCC28\uD2B8 \uD504\uB9AC\uBBF8\uD2F0\uBE0C.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ChartPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartYAxisLabels values={data} />\n      <ChartPlot aria-label="Weekly sales chart">\n        <ChartGrid values={data} />\n        <ChartBars values={data} seriesColor="blue" />\n      </ChartPlot>\n      <ChartAxisLabels labels={labels} />\n    </ChartContent>\n  </ChartBody>\n  <ChartLegend>\n    <ChartLegendItem seriesColor="blue">Sales</ChartLegendItem>\n  </ChartLegend>\n</Chart>\n\n<Chart>\n  <ChartBody>\n    <ChartContent>\n      <ChartPlot>\n        <ChartGrid values={data} lines={5} />\n        <ChartLine values={data} seriesColor="green" showArea showPoints />\n      </ChartPlot>\n    </ChartContent>\n  </ChartBody>\n</Chart>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartBody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### ChartContent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### ChartPlot\n\nSVG \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### ChartGrid\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n    ]}\n  />\n</div>\n### ChartBars\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showTrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### ChartLine\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "Y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showArea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n    { prop: "showPoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n    ]}\n  />\n</div>\n### ChartYAxisLabels\n\nY\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n    { prop: "formatTick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n    ]}\n  />\n</div>\n### ChartAxisLabels\n\nX\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n    ]}\n  />\n</div>\n### ChartLegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### ChartLegendItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "seriesColor", default: "\u2014", type: "ChartSeriesColor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n    ]}\n  />\n</div>',
+      searchText: 'chart \uB370\uC774\uD130 \uC2DC\uAC01\uD654 \uCC28\uD2B8 \uD504\uB9AC\uBBF8\uD2F0\uBE0C. <div class="not-content my-6">\n  <chartpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="chart" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\nconst data = [45, 52, 38, 65, 42, 80, 55];\nconst labels = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartyaxislabels values={data} />\n      <chartplot aria-label="weekly sales chart">\n        <chartgrid values={data} />\n        <chartbars values={data} seriescolor="blue" />\n      </chartplot>\n      <chartaxislabels labels={labels} />\n    </chartcontent>\n  </chartbody>\n  <chartlegend>\n    <chartlegenditem seriescolor="blue">sales</chartlegenditem>\n  </chartlegend>\n</chart>\n\n<chart>\n  <chartbody>\n    <chartcontent>\n      <chartplot>\n        <chartgrid values={data} lines={5} />\n        <chartline values={data} seriescolor="green" showarea showpoints />\n      </chartplot>\n    </chartcontent>\n  </chartbody>\n</chart>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### chart\n\n\uB8E8\uD2B8 \uCC28\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartbody\n\n\uBA54\uC778 \uCC28\uD2B8 \uBCF8\uBB38 \uC139\uC158.\n\n### chartcontent\n\n\uCC28\uD2B8 \uCF58\uD150\uCE20 \uB798\uD37C.\n\n### chartplot\n\nsvg \uD50C\uB86F \uC601\uC5ED.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCC28\uD2B8\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### chartgrid\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "lines", default: "5", type: "number", description: "\uAC00\uB85C \uADF8\uB9AC\uB4DC \uC120 \uAC1C\uC218(\uAE30\uC900\uC120 \uD3EC\uD568)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12(\uC0DD\uB7B5 \uC2DC values\uC5D0\uC11C \uC790\uB3D9 \uC0B0\uCD9C)." },\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C \uC0B0\uCD9C\uC6A9 \uC18C\uC2A4 \uAC12." }\n    ]}\n  />\n</div>\n### chartbars\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uB9C9\uB300 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showtrack", default: "false", type: "boolean", description: "\uAC01 \uB9C9\uB300 \uB4A4\uC5D0 \uC804\uCCB4 \uB192\uC774 \uD2B8\uB799\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### chartline\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC120 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "\u2014", type: "number", description: "y \uC2A4\uCF00\uC77C \uCD5C\uB313\uAC12." },\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4." },\n    { prop: "showarea", default: "false", type: "boolean", description: "\uC120 \uC544\uB798 \uC601\uC5ED \uCC44\uC6B0\uAE30." },\n    { prop: "showpoints", default: "false", type: "boolean", description: "\uAC01 \uAC12\uC758 \uD3EC\uC778\uD2B8 \uB9C8\uCEE4." }\n    ]}\n  />\n</div>\n### chartyaxislabels\n\ny\uCD95 \uB208\uAE08 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "values", default: "\u2014", type: "number[]", description: "\uC2A4\uCF00\uC77C\uC6A9 \uC18C\uC2A4 \uAC12." },\n    { prop: "formattick", default: "\u2014", type: "(value: number) => string", description: "\uCEE4\uC2A4\uD140 \uD3EC\uB9E4\uD130." }\n    ]}\n  />\n</div>\n### chartaxislabels\n\nx\uCD95 \uB808\uC774\uBE14.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "labels", default: "\u2014", type: "string[]", description: "\uB808\uC774\uBE14 \uBB38\uC790\uC5F4(\uD544\uC218)." },\n    { prop: "align", default: "\\"bar\\"", type: "\\"bar\\" | \\"line\\"", description: "\uC815\uB82C \uC2A4\uD0C0\uC77C." }\n    ]}\n  />\n</div>\n### chartlegend\n\n\uBC94\uB840 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### chartlegenditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "seriescolor", default: "\u2014", type: "chartseriescolor", description: "\uC2DC\uB9AC\uC988 \uC0C9\uC0C1 \uD0A4(\uD544\uC218)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/checkbox",
+      href: "/ko/components/checkbox/",
+      title: "Checkbox",
+      description: "\uD3FC\uC6A9 \uC774\uC9C4 \uC120\uD0DD \uCEE8\uD2B8\uB864.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <CheckboxPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Checkbox label="Accept terms and conditions" />\n\n<Checkbox\n  label="Enable notifications"\n  description="Receive updates about your account"\n  checked={notificationsEnabled}\n  onChange={(e) => setNotificationsEnabled(e.target.checked)}\n/>\n\n<Checkbox variant="circular" label="Circular variant" />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n    { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'checkbox \uD3FC\uC6A9 \uC774\uC9C4 \uC120\uD0DD \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n  <checkboxpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="checkbox" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="checkbox" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<checkbox label="accept terms and conditions" />\n\n<checkbox\n  label="enable notifications"\n  description="receive updates about your account"\n  checked={notificationsenabled}\n  onchange={(e) => setnotificationsenabled(e.target.checked)}\n/>\n\n<checkbox variant="circular" label="circular variant" />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "\uCCB4\uD06C\uBC15\uC2A4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n    { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"circular\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/command",
+      href: "/ko/components/command/",
+      title: "Command",
+      description: "\uAC80\uC0C9\uC774 \uC788\uB294 \uCEE4\uB9E8\uB4DC \uD314\uB808\uD2B8 \uC778\uD130\uD398\uC774\uC2A4.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <CommandPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="command" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Command>\n  <CommandInput placeholder="Search commands..." />\n  <CommandList>\n    <CommandEmpty>No results found.</CommandEmpty>\n    <CommandGroup>\n      <CommandGroupHeading>File</CommandGroupHeading>\n      <CommandItem value="new" onSelect={() => handleNew()}>\n        New File\n      </CommandItem>\n      <CommandItem value="open">Open</CommandItem>\n    </CommandGroup>\n    <CommandSeparator />\n    <CommandGroup>\n      <CommandGroupHeading>Edit</CommandGroupHeading>\n      <CommandItem value="copy">Copy</CommandItem>\n      <CommandItem value="paste">Paste</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</Command>\n\n<CommandDialog open={isOpen} onOpenChange={setIsOpen}>\n  <Command>\n    {/* Command content */}\n  </Command>\n</CommandDialog>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Command\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uAC80\uC0C9 \uCFFC\uB9AC." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC80\uC0C9 \uCFFC\uB9AC." },\n    { prop: "onValueChange", default: "\u2014", type: "(search: string) => void", description: "\uAC80\uC0C9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "shouldFilter", default: "true", type: "boolean", description: "true\uC774\uBA74 \uAC80\uC0C9 \uD14D\uC2A4\uD2B8\uB85C \uD56D\uBAA9\uC744 \uD544\uD130\uB9C1\uD569\uB2C8\uB2E4." },\n    { prop: "filter", default: "\u2014", type: "CommandFilter", description: "\uCEE4\uC2A4\uD140 \uC810\uC218 \uD568\uC218(0\uC744 \uBC18\uD658\uD558\uBA74 \uC228\uAE40)." },\n    { prop: "selectedValue", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uD558\uC774\uB77C\uC774\uD2B8 \uD56D\uBAA9 \uAC12." },\n    { prop: "defaultSelectedValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uD558\uC774\uB77C\uC774\uD2B8 \uD56D\uBAA9." },\n    { prop: "onSelectedValueChange", default: "\u2014", type: "(value: string) => void", description: "\uD558\uC774\uB77C\uC774\uD2B8 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "label", default: "\u2014", type: "string", description: "\uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984(`aria-label`)." }\n    ]}\n  />\n</div>\n### CommandDialog\n\nDialog \uC624\uBC84\uB808\uC774 \uC548\uC758 Command.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "commandProps", default: "\u2014", type: "CommandProps", description: "\uB0B4\uBD80 Command\uB85C \uC804\uB2EC\uB418\uB294 props." }\n    ]}\n  />\n</div>\n### CommandInput\n\n\uC120\uD0DD\uC801 `startIcon`\uC774 \uC788\uB294 \uAC80\uC0C9 \uC785\uB825.\n\n### CommandList\n\n\uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108(\uB0B4\uBD80\uC801\uC73C\uB85C `ScrollArea` \uC0AC\uC6A9).\n\n### CommandEmpty\n\n\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC744 \uB54C \uD45C\uC2DC.\n\n### CommandGroup\n\n\uAD00\uB828 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### CommandGroupHeading\n\n\uADF8\uB8F9 \uC81C\uBAA9.\n\n### CommandSeparator\n\n\uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### CommandItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uD544\uD130\uB9C1\xB7\uC120\uD0DD\uC6A9 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n    { prop: "keywords", default: "\u2014", type: "string[]", description: "\uAE30\uBCF8 \uD544\uD130\uC6A9 \uCD94\uAC00 \uBB38\uC790\uC5F4." },\n    { prop: "onSelect", default: "\u2014", type: "(value: string) => void", description: "\uD65C\uC131\uD654 \uC2DC \uD638\uCD9C(\uD074\uB9AD/Enter)." },\n    { prop: "forceMount", default: "false", type: "boolean", description: "\uD544\uD130\uB85C \uC81C\uC678\uB418\uC5B4\uB3C4 \uB9C8\uC6B4\uD2B8 \uC720\uC9C0." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n    { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." }\n    ]}\n  />\n</div>',
+      searchText: 'command \uAC80\uC0C9\uC774 \uC788\uB294 \uCEE4\uB9E8\uB4DC \uD314\uB808\uD2B8 \uC778\uD130\uD398\uC774\uC2A4. <div class="not-content my-6">\n  <commandpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="command" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<command>\n  <commandinput placeholder="search commands..." />\n  <commandlist>\n    <commandempty>no results found.</commandempty>\n    <commandgroup>\n      <commandgroupheading>file</commandgroupheading>\n      <commanditem value="new" onselect={() => handlenew()}>\n        new file\n      </commanditem>\n      <commanditem value="open">open</commanditem>\n    </commandgroup>\n    <commandseparator />\n    <commandgroup>\n      <commandgroupheading>edit</commandgroupheading>\n      <commanditem value="copy">copy</commanditem>\n      <commanditem value="paste">paste</commanditem>\n    </commandgroup>\n  </commandlist>\n</command>\n\n<commanddialog open={isopen} onopenchange={setisopen}>\n  <command>\n    {/* command content */}\n  </command>\n</commanddialog>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### command\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uAC80\uC0C9 \uCFFC\uB9AC." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC80\uC0C9 \uCFFC\uB9AC." },\n    { prop: "onvaluechange", default: "\u2014", type: "(search: string) => void", description: "\uAC80\uC0C9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "shouldfilter", default: "true", type: "boolean", description: "true\uC774\uBA74 \uAC80\uC0C9 \uD14D\uC2A4\uD2B8\uB85C \uD56D\uBAA9\uC744 \uD544\uD130\uB9C1\uD569\uB2C8\uB2E4." },\n    { prop: "filter", default: "\u2014", type: "commandfilter", description: "\uCEE4\uC2A4\uD140 \uC810\uC218 \uD568\uC218(0\uC744 \uBC18\uD658\uD558\uBA74 \uC228\uAE40)." },\n    { prop: "selectedvalue", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uD558\uC774\uB77C\uC774\uD2B8 \uD56D\uBAA9 \uAC12." },\n    { prop: "defaultselectedvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uD558\uC774\uB77C\uC774\uD2B8 \uD56D\uBAA9." },\n    { prop: "onselectedvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uD558\uC774\uB77C\uC774\uD2B8 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "label", default: "\u2014", type: "string", description: "\uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984(`aria-label`)." }\n    ]}\n  />\n</div>\n### commanddialog\n\ndialog \uC624\uBC84\uB808\uC774 \uC548\uC758 command.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "commandprops", default: "\u2014", type: "commandprops", description: "\uB0B4\uBD80 command\uB85C \uC804\uB2EC\uB418\uB294 props." }\n    ]}\n  />\n</div>\n### commandinput\n\n\uC120\uD0DD\uC801 `starticon`\uC774 \uC788\uB294 \uAC80\uC0C9 \uC785\uB825.\n\n### commandlist\n\n\uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108(\uB0B4\uBD80\uC801\uC73C\uB85C `scrollarea` \uC0AC\uC6A9).\n\n### commandempty\n\n\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC744 \uB54C \uD45C\uC2DC.\n\n### commandgroup\n\n\uAD00\uB828 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### commandgroupheading\n\n\uADF8\uB8F9 \uC81C\uBAA9.\n\n### commandseparator\n\n\uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### commanditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uD544\uD130\uB9C1\xB7\uC120\uD0DD\uC6A9 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n    { prop: "keywords", default: "\u2014", type: "string[]", description: "\uAE30\uBCF8 \uD544\uD130\uC6A9 \uCD94\uAC00 \uBB38\uC790\uC5F4." },\n    { prop: "onselect", default: "\u2014", type: "(value: string) => void", description: "\uD65C\uC131\uD654 \uC2DC \uD638\uCD9C(\uD074\uB9AD/enter)." },\n    { prop: "forcemount", default: "false", type: "boolean", description: "\uD544\uD130\uB85C \uC81C\uC678\uB418\uC5B4\uB3C4 \uB9C8\uC6B4\uD2B8 \uC720\uC9C0." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "endicon", default: "\u2014", type: "reactnode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n    { prop: "shortcut", default: "\u2014", type: "reactnode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/container",
+      href: "/ko/components/container/",
+      title: "Container",
+      description: "\uD1A0\uD070 \uD328\uB529\uACFC \uC804\uCCB4 max width\uB97C \uAC00\uC9C4 \uAC00\uC6B4\uB370 \uC815\uB82C \uD398\uC774\uC9C0 \uC178.",
+      category: "guides",
+      content: '`Container`\uB294 \uC120\uD0DD\uC801 spacing \uD1A0\uD070 \uD328\uB529\uC73C\uB85C \uCF58\uD150\uCE20\uB97C \uAC00\uB85C \uAC00\uC6B4\uB370 \uC815\uB82C\uD569\uB2C8\uB2E4. \uD398\uC774\uC9C0 \uB610\uB294 \uC139\uC158 \uC178\uB85C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n  <ContainerPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="container" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Container padding="sizeXXLarge">\n  <Stack gap="sizeLarge">\n    <Text variant="headingMd" as="h1">Page title</Text>\n    <Text variant="bodyMd">Body</Text>\n  </Stack>\n</Container>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "padding", default: "\u2014", type: "Spacing token", description: "\uBAA8\uB4E0 \uBA74 \uD328\uB529." }\n    ]}\n  />\n</div>',
+      searchText: 'container \uD1A0\uD070 \uD328\uB529\uACFC \uC804\uCCB4 max width\uB97C \uAC00\uC9C4 \uAC00\uC6B4\uB370 \uC815\uB82C \uD398\uC774\uC9C0 \uC178. `container`\uB294 \uC120\uD0DD\uC801 spacing \uD1A0\uD070 \uD328\uB529\uC73C\uB85C \uCF58\uD150\uCE20\uB97C \uAC00\uB85C \uAC00\uC6B4\uB370 \uC815\uB82C\uD569\uB2C8\uB2E4. \uD398\uC774\uC9C0 \uB610\uB294 \uC139\uC158 \uC178\uB85C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content my-6">\n  <containerpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="container" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<container padding="sizexxlarge">\n  <stack gap="sizelarge">\n    <text variant="headingmd" as="h1">page title</text>\n    <text variant="bodymd">body</text>\n  </stack>\n</container>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "padding", default: "\u2014", type: "spacing token", description: "\uBAA8\uB4E0 \uBA74 \uD328\uB529." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/dialog",
+      href: "/ko/components/dialog/",
+      title: "Dialog",
+      description: "\uC911\uC694\uD55C \uC791\uC5C5\uC744 \uC704\uD55C \uBAA8\uB2EC \uB2E4\uC774\uC5BC\uB85C\uADF8 \uC624\uBC84\uB808\uC774.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ComponentPreview client:load component="dialog" variant="lg" />\n</div>\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="dialog" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="dialog" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Dialog>\n  <DialogTrigger asChild>\n    <Button>Open Dialog</Button>\n  </DialogTrigger>\n  <DialogContent>\n    <DialogHeader>\n      <DialogTitle>Confirm Action</DialogTitle>\n      <DialogDescription>\n        Are you sure you want to continue?\n      </DialogDescription>\n    </DialogHeader>\n    <DialogClose asChild>\n      <Button>Cancel</Button>\n    </DialogClose>\n  </DialogContent>\n</Dialog>\n\n<Dialog size="sm" open={isOpen} onOpenChange={setIsOpen}>\n  <DialogContent scrollable={false}>\n    {/* Content with custom scroll handling */}\n  </DialogContent>\n</Dialog>\n```\n\n\uACC4\uC57D \uC18C\uC2A4: `packages/react/spec/components/dialog.json` \u2014 \uC704\uC758 SpecRenderer\uB85C \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.',
+      searchText: 'dialog \uC911\uC694\uD55C \uC791\uC5C5\uC744 \uC704\uD55C \uBAA8\uB2EC \uB2E4\uC774\uC5BC\uB85C\uADF8 \uC624\uBC84\uB808\uC774. \n<div class="not-content my-6">\n  <componentpreview client:load component="dialog" variant="lg" />\n</div>\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="dialog" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="dialog" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<dialog>\n  <dialogtrigger aschild>\n    <button>open dialog</button>\n  </dialogtrigger>\n  <dialogcontent>\n    <dialogheader>\n      <dialogtitle>confirm action</dialogtitle>\n      <dialogdescription>\n        are you sure you want to continue?\n      </dialogdescription>\n    </dialogheader>\n    <dialogclose aschild>\n      <button>cancel</button>\n    </dialogclose>\n  </dialogcontent>\n</dialog>\n\n<dialog size="sm" open={isopen} onopenchange={setisopen}>\n  <dialogcontent scrollable={false}>\n    {/* content with custom scroll handling */}\n  </dialogcontent>\n</dialog>\n```\n\n\uACC4\uC57D \uC18C\uC2A4: `packages/react/spec/components/dialog.json` \u2014 \uC704\uC758 specrenderer\uB85C \uB80C\uB354\uB9C1\uB429\uB2C8\uB2E4.\n'
+    },
+    {
+      slug: "ko/components/divider",
+      href: "/ko/components/divider/",
+      title: "Divider",
+      description: "\uD56D\uBAA9 \uC0AC\uC774\uC758 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <DividerPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="divider" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Divider />\n\n<Divider layout="content" align="center">\n  Or continue with\n</Divider>\n\n<Divider layout="icon" align="left" />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "layout", default: "\\"default\\"", type: "\\"default\\" | \\"content\\" | \\"icon\\"", description: "Divider \uB808\uC774\uC544\uC6C3 \uC2A4\uD0C0\uC77C." },\n    { prop: "align", default: "\\"center\\"", type: "\\"center\\" | \\"left\\" | \\"right\\"", description: "\uCF58\uD150\uCE20/\uC544\uC774\uCF58 \uC815\uB82C(layout\uC774 default\uAC00 \uC544\uB2D0 \uB54C)." },\n    { prop: "children", default: "\u2014", type: "ReactNode", description: "\uD45C\uC2DC\uD560 \uCF58\uD150\uCE20(layout\uC774 \\"content\\"\uC77C \uB54C \uD544\uC218)." }\n    ]}\n  />\n</div>',
+      searchText: 'divider \uD56D\uBAA9 \uC0AC\uC774\uC758 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120. <div class="not-content my-6">\n  <dividerpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="divider" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<divider />\n\n<divider layout="content" align="center">\n  or continue with\n</divider>\n\n<divider layout="icon" align="left" />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "layout", default: "\\"default\\"", type: "\\"default\\" | \\"content\\" | \\"icon\\"", description: "divider \uB808\uC774\uC544\uC6C3 \uC2A4\uD0C0\uC77C." },\n    { prop: "align", default: "\\"center\\"", type: "\\"center\\" | \\"left\\" | \\"right\\"", description: "\uCF58\uD150\uCE20/\uC544\uC774\uCF58 \uC815\uB82C(layout\uC774 default\uAC00 \uC544\uB2D0 \uB54C)." },\n    { prop: "children", default: "\u2014", type: "reactnode", description: "\uD45C\uC2DC\uD560 \uCF58\uD150\uCE20(layout\uC774 \\"content\\"\uC77C \uB54C \uD544\uC218)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/drawer",
+      href: "/ko/components/drawer/",
+      title: "Drawer",
+      description: "\uD654\uBA74 \uAC00\uC7A5\uC790\uB9AC\uC5D0\uC11C \uBBF8\uB044\uB7EC\uC838 \uB098\uC624\uB294 \uD328\uB110 \uC624\uBC84\uB808\uC774.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <DrawerDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="drawer" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Drawer>\n  <DrawerTrigger asChild>\n    <Button>Open Drawer</Button>\n  </DrawerTrigger>\n  <DrawerContent>\n    <DrawerHeader>\n      <DrawerTitle>Settings</DrawerTitle>\n      <DrawerDescription>Adjust your preferences</DrawerDescription>\n    </DrawerHeader>\n    <DrawerBody>\n      {/* Drawer content */}\n    </DrawerBody>\n    <DrawerFooter>\n      <DrawerClose>Close</DrawerClose>\n    </DrawerFooter>\n  </DrawerContent>\n</Drawer>\n\n<Drawer type="inline" placement="left" size="md" showFooter>\n  {/* Drawer content */}\n</Drawer>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Drawer\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "defaultOpen", default: "\u2014", type: "boolean", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "type", default: "\\"overlay\\"", type: "\\"overlay\\" | \\"inline\\"", description: "Drawer \uD45C\uC2DC \uD0C0\uC785." },\n    { prop: "placement", default: "\\"right\\"", type: "\\"left\\" | \\"right\\"", description: "\uD654\uBA74 \uCABD." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Drawer \uB108\uBE44." },\n    { prop: "showFooter", default: "false", type: "boolean", description: "\uD478\uD130 \uC139\uC158\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### DrawerTrigger\n\n\uD2B8\uB9AC\uAC70 \uC694\uC18C(\uBCF4\uD1B5 Button).\n\n### DrawerContent\n\nDrawer \uD328\uB110 \uCEE8\uD14C\uC774\uB108.\n\n### DrawerHeader\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "showClose", default: "true", type: "boolean", description: "\uB2EB\uAE30 \uBC84\uD2BC\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "actions", default: "\u2014", type: "ReactNode", description: "\uCD94\uAC00 \uD5E4\uB354 \uC561\uC158." }\n    ]}\n  />\n</div>\n### DrawerTitle\n\nDrawer \uC81C\uBAA9 \uC694\uC18C.\n\n### DrawerDescription\n\nDrawer \uC124\uBA85 \uD14D\uC2A4\uD2B8.\n\n### DrawerBody\n\n\uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uCF58\uD150\uCE20 \uC601\uC5ED.\n\n### DrawerFooter\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "state", default: "\u2014", type: "\\"icons\\" | \\"single\\" | \\"split\\"", description: "\uD478\uD130 \uBC84\uD2BC \uB808\uC774\uC544\uC6C3." }\n    ]}\n  />\n</div>\n### DrawerClose\n\n\uB2EB\uAE30 \uBC84\uD2BC.',
+      searchText: 'drawer \uD654\uBA74 \uAC00\uC7A5\uC790\uB9AC\uC5D0\uC11C \uBBF8\uB044\uB7EC\uC838 \uB098\uC624\uB294 \uD328\uB110 \uC624\uBC84\uB808\uC774. <div class="not-content my-6">\n  <drawerdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="drawer" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<drawer>\n  <drawertrigger aschild>\n    <button>open drawer</button>\n  </drawertrigger>\n  <drawercontent>\n    <drawerheader>\n      <drawertitle>settings</drawertitle>\n      <drawerdescription>adjust your preferences</drawerdescription>\n    </drawerheader>\n    <drawerbody>\n      {/* drawer content */}\n    </drawerbody>\n    <drawerfooter>\n      <drawerclose>close</drawerclose>\n    </drawerfooter>\n  </drawercontent>\n</drawer>\n\n<drawer type="inline" placement="left" size="md" showfooter>\n  {/* drawer content */}\n</drawer>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### drawer\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "defaultopen", default: "\u2014", type: "boolean", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "type", default: "\\"overlay\\"", type: "\\"overlay\\" | \\"inline\\"", description: "drawer \uD45C\uC2DC \uD0C0\uC785." },\n    { prop: "placement", default: "\\"right\\"", type: "\\"left\\" | \\"right\\"", description: "\uD654\uBA74 \uCABD." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "drawer \uB108\uBE44." },\n    { prop: "showfooter", default: "false", type: "boolean", description: "\uD478\uD130 \uC139\uC158\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### drawertrigger\n\n\uD2B8\uB9AC\uAC70 \uC694\uC18C(\uBCF4\uD1B5 button).\n\n### drawercontent\n\ndrawer \uD328\uB110 \uCEE8\uD14C\uC774\uB108.\n\n### drawerheader\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "showclose", default: "true", type: "boolean", description: "\uB2EB\uAE30 \uBC84\uD2BC\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "actions", default: "\u2014", type: "reactnode", description: "\uCD94\uAC00 \uD5E4\uB354 \uC561\uC158." }\n    ]}\n  />\n</div>\n### drawertitle\n\ndrawer \uC81C\uBAA9 \uC694\uC18C.\n\n### drawerdescription\n\ndrawer \uC124\uBA85 \uD14D\uC2A4\uD2B8.\n\n### drawerbody\n\n\uC2A4\uD06C\uB864 \uAC00\uB2A5\uD55C \uCF58\uD150\uCE20 \uC601\uC5ED.\n\n### drawerfooter\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "state", default: "\u2014", type: "\\"icons\\" | \\"single\\" | \\"split\\"", description: "\uD478\uD130 \uBC84\uD2BC \uB808\uC774\uC544\uC6C3." }\n    ]}\n  />\n</div>\n### drawerclose\n\n\uB2EB\uAE30 \uBC84\uD2BC.\n\n'
+    },
+    {
+      slug: "ko/components/dropdown",
+      href: "/ko/components/dropdown/",
+      title: "Dropdown",
+      description: "\uC0C1\uD669\uBCC4 \uC561\uC158 \uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <DropdownDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="dropdown" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Dropdown>\n  <DropdownTrigger>\n    <Button>Options</Button>\n  </DropdownTrigger>\n  <DropdownContent>\n    <DropdownItem onSelect={() => handleEdit()}>Edit</DropdownItem>\n    <DropdownItem onSelect={() => handleDelete()}>Delete</DropdownItem>\n    <DropdownItem disabled>Disabled</DropdownItem>\n  </DropdownContent>\n</Dropdown>\n\n<Dropdown>\n  <DropdownTrigger>\n    <Button>More</Button>\n  </DropdownTrigger>\n  <DropdownContent align="end" side="bottom">\n    <DropdownItem selected>Active Item</DropdownItem>\n    <DropdownSubTrigger>Submenu</DropdownSubTrigger>\n    <DropdownSubContent>\n      <DropdownItem>Submenu Item</DropdownItem>\n    </DropdownSubContent>\n  </DropdownContent>\n</Dropdown>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Dropdown\n\n\uB8E8\uD2B8 \uCEF4\uD3EC\uB10C\uD2B8(\uC5F4\uB9BC \uC0C1\uD0DC \uAD00\uB9AC).\n\n### DropdownTrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4\uC744 \uC5EC\uB294 \uD2B8\uB9AC\uAC70 \uC694\uC18C.\n\n### DropdownContent\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "align", default: "\\"start\\"", type: "\\"start\\" | \\"end\\" | \\"center\\"", description: "\uD2B8\uB9AC\uAC70 \uAE30\uC900 \uC815\uB82C." },\n    { prop: "side", default: "\\"auto\\"", type: "\\"auto\\" | \\"top\\" | \\"bottom\\"", description: "\uC120\uD638\uD558\uB294 \uCABD." },\n    { prop: "sideOffset", default: "4", type: "number", description: "\uD2B8\uB9AC\uAC70\uC640 \uD328\uB110 \uC0AC\uC774 \uAC04\uACA9(\uD53D\uC140)." }\n    ]}\n  />\n</div>\n### DropdownItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "selected", default: "false", type: "boolean", description: "\uC120\uD0DD \uC0C1\uD0DC\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uD56D\uBAA9\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### DropdownSubTrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n### DropdownSubContent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.',
+      searchText: 'dropdown \uC0C1\uD669\uBCC4 \uC561\uC158 \uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110. <div class="not-content my-6">\n  <dropdowndemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="dropdown" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<dropdown>\n  <dropdowntrigger>\n    <button>options</button>\n  </dropdowntrigger>\n  <dropdowncontent>\n    <dropdownitem onselect={() => handleedit()}>edit</dropdownitem>\n    <dropdownitem onselect={() => handledelete()}>delete</dropdownitem>\n    <dropdownitem disabled>disabled</dropdownitem>\n  </dropdowncontent>\n</dropdown>\n\n<dropdown>\n  <dropdowntrigger>\n    <button>more</button>\n  </dropdowntrigger>\n  <dropdowncontent align="end" side="bottom">\n    <dropdownitem selected>active item</dropdownitem>\n    <dropdownsubtrigger>submenu</dropdownsubtrigger>\n    <dropdownsubcontent>\n      <dropdownitem>submenu item</dropdownitem>\n    </dropdownsubcontent>\n  </dropdowncontent>\n</dropdown>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### dropdown\n\n\uB8E8\uD2B8 \uCEF4\uD3EC\uB10C\uD2B8(\uC5F4\uB9BC \uC0C1\uD0DC \uAD00\uB9AC).\n\n### dropdowntrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4\uC744 \uC5EC\uB294 \uD2B8\uB9AC\uAC70 \uC694\uC18C.\n\n### dropdowncontent\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "align", default: "\\"start\\"", type: "\\"start\\" | \\"end\\" | \\"center\\"", description: "\uD2B8\uB9AC\uAC70 \uAE30\uC900 \uC815\uB82C." },\n    { prop: "side", default: "\\"auto\\"", type: "\\"auto\\" | \\"top\\" | \\"bottom\\"", description: "\uC120\uD638\uD558\uB294 \uCABD." },\n    { prop: "sideoffset", default: "4", type: "number", description: "\uD2B8\uB9AC\uAC70\uC640 \uD328\uB110 \uC0AC\uC774 \uAC04\uACA9(\uD53D\uC140)." }\n    ]}\n  />\n</div>\n### dropdownitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "selected", default: "false", type: "boolean", description: "\uC120\uD0DD \uC0C1\uD0DC\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uD56D\uBAA9\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### dropdownsubtrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n### dropdownsubcontent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.\n\n'
+    },
+    {
+      slug: "ko/components/field",
+      href: "/ko/components/field/",
+      title: "Field",
+      description: "\uB808\uC774\uBE14, \uCEE8\uD2B8\uB864, \uC5D0\uB7EC, \uB3C4\uC6C0\uB9D0\uC744 \uAC10\uC2F8\uB294 \uD3FC \uD544\uB4DC \uCEE8\uD14C\uC774\uB108.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <FieldPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="field" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Field size="md">\n  <FieldLabel>Email address</FieldLabel>\n  <Input type="email" placeholder="you@example.com" />\n  <FieldHint>We\'ll never share your email.</FieldHint>\n</Field>\n\n<Field size="lg">\n  <FieldLabel>Password <FieldRequired /></FieldLabel>\n  <Input type="password" error={hasError} />\n  {hasError && <FieldError>Password is required</FieldError>}\n</Field>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Field\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uD544\uB4DC \uD06C\uAE30 \uD2F0\uC5B4(\uB808\uC774\uBE14\uACFC \uBA54\uC2DC\uC9C0\uC5D0 \uC601\uD5A5)." }\n    ]}\n  />\n</div>\n### FieldLabel\n\n\uD544\uB4DC\uC758 \uB808\uC774\uBE14 \uC694\uC18C. `size` prop\uC744 \uBC1B\uC2B5\uB2C8\uB2E4(Field \uCEE8\uD14D\uC2A4\uD2B8\uC5D0\uC11C \uAE30\uBCF8\uAC12).\n\n### FieldRequired\n\n\uD544\uC218 \uD45C\uC2DC \uC2DC\uAC01 \uC778\uB514\uCF00\uC774\uD130(\uBCC4\uD45C).\n\n### FieldHint\n\n\uC785\uB825 \uC544\uB798 \uB3C4\uC6C0\uB9D0 \uD14D\uC2A4\uD2B8.\n\n### FieldError\n\n\uC785\uB825 \uC544\uB798 \uC5D0\uB7EC \uBA54\uC2DC\uC9C0.',
+      searchText: 'field \uB808\uC774\uBE14, \uCEE8\uD2B8\uB864, \uC5D0\uB7EC, \uB3C4\uC6C0\uB9D0\uC744 \uAC10\uC2F8\uB294 \uD3FC \uD544\uB4DC \uCEE8\uD14C\uC774\uB108. <div class="not-content my-6">\n  <fieldpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="field" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<field size="md">\n  <fieldlabel>email address</fieldlabel>\n  <input type="email" placeholder="you@example.com" />\n  <fieldhint>we\'ll never share your email.</fieldhint>\n</field>\n\n<field size="lg">\n  <fieldlabel>password <fieldrequired /></fieldlabel>\n  <input type="password" error={haserror} />\n  {haserror && <fielderror>password is required</fielderror>}\n</field>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### field\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uD544\uB4DC \uD06C\uAE30 \uD2F0\uC5B4(\uB808\uC774\uBE14\uACFC \uBA54\uC2DC\uC9C0\uC5D0 \uC601\uD5A5)." }\n    ]}\n  />\n</div>\n### fieldlabel\n\n\uD544\uB4DC\uC758 \uB808\uC774\uBE14 \uC694\uC18C. `size` prop\uC744 \uBC1B\uC2B5\uB2C8\uB2E4(field \uCEE8\uD14D\uC2A4\uD2B8\uC5D0\uC11C \uAE30\uBCF8\uAC12).\n\n### fieldrequired\n\n\uD544\uC218 \uD45C\uC2DC \uC2DC\uAC01 \uC778\uB514\uCF00\uC774\uD130(\uBCC4\uD45C).\n\n### fieldhint\n\n\uC785\uB825 \uC544\uB798 \uB3C4\uC6C0\uB9D0 \uD14D\uC2A4\uD2B8.\n\n### fielderror\n\n\uC785\uB825 \uC544\uB798 \uC5D0\uB7EC \uBA54\uC2DC\uC9C0.\n\n'
+    },
+    {
+      slug: "ko/components/footer",
+      href: "/ko/components/footer/",
+      title: "Footer",
+      description: "\uBE0C\uB79C\uB4DC, \uB0B4\uBE44\uAC8C\uC774\uC158 \uADF8\uB8F9, \uB85C\uCF00\uC77C, \uC18C\uC15C \uB9C1\uD06C\uAC00 \uC788\uB294 \uC0AC\uC774\uD2B8 \uD478\uD130.",
+      category: "guides",
+      content: '`Footer`\uB294 \uB9C8\uCF00\uD305\xB7\uC571 \uD478\uD130\uC6A9 \uBCF5\uD569 \uB808\uC774\uC544\uC6C3\uC785\uB2C8\uB2E4 \u2014 \uBE0C\uB79C\uB4DC, \uB9C1\uD06C \uADF8\uB8F9, \uBA54\uD0C0 \uD589, \uB85C\uCF00\uC77C, \uC18C\uC15C \uC544\uC774\uCF58.\n\n<div class="not-content my-6">\n  <FooterPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="footer" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Footer>\n  <FooterBrand>RefineUI</FooterBrand>\n  <FooterNav>\n    <FooterGroup>\n      <FooterGroupLabel>Product</FooterGroupLabel>\n      <FooterLink href="/components/">Components</FooterLink>\n    </FooterGroup>\n  </FooterNav>\n  <FooterMeta>\n    <FooterCopyright>\xA9 Pelagornis</FooterCopyright>\n  </FooterMeta>\n</Footer>\n```\n\n## \uAD6C\uC131 \uC694\uC18C\n\n`FooterBrand`, `FooterNav`, `FooterGroup`, `FooterGroupLabel`, `FooterLink`, `FooterExplore`, `FooterSocial`, `FooterLocale`, `FooterMeta`, `FooterMetaEnd`, `FooterCopyright`.',
+      searchText: 'footer \uBE0C\uB79C\uB4DC, \uB0B4\uBE44\uAC8C\uC774\uC158 \uADF8\uB8F9, \uB85C\uCF00\uC77C, \uC18C\uC15C \uB9C1\uD06C\uAC00 \uC788\uB294 \uC0AC\uC774\uD2B8 \uD478\uD130. `footer`\uB294 \uB9C8\uCF00\uD305\xB7\uC571 \uD478\uD130\uC6A9 \uBCF5\uD569 \uB808\uC774\uC544\uC6C3\uC785\uB2C8\uB2E4 \u2014 \uBE0C\uB79C\uB4DC, \uB9C1\uD06C \uADF8\uB8F9, \uBA54\uD0C0 \uD589, \uB85C\uCF00\uC77C, \uC18C\uC15C \uC544\uC774\uCF58.\n\n<div class="not-content my-6">\n  <footerpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="footer" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<footer>\n  <footerbrand>refineui</footerbrand>\n  <footernav>\n    <footergroup>\n      <footergrouplabel>product</footergrouplabel>\n      <footerlink href="/components/">components</footerlink>\n    </footergroup>\n  </footernav>\n  <footermeta>\n    <footercopyright>\xA9 pelagornis</footercopyright>\n  </footermeta>\n</footer>\n```\n\n## \uAD6C\uC131 \uC694\uC18C\n\n`footerbrand`, `footernav`, `footergroup`, `footergrouplabel`, `footerlink`, `footerexplore`, `footersocial`, `footerlocale`, `footermeta`, `footermetaend`, `footercopyright`.\n'
+    },
+    {
+      slug: "ko/components/grid",
+      href: "/ko/components/grid/",
+      title: "Grid",
+      description: "\uB3D9\uC77C \uC5F4 \uB610\uB294 Foundation min-item \uC790\uB3D9 \uB9DE\uCDA4 CSS \uADF8\uB9AC\uB4DC.",
+      category: "guides",
+      content: '`Grid`\uB294 \uC790\uC2DD\uC744 \uC5F4\uB85C \uBC30\uCE58\uD569\uB2C8\uB2E4. \uACE0\uC815 `columns`\uB97C \uC4F0\uAC70\uB098, Foundation \uD06C\uAE30\uC640 \uD568\uAED8 `minItem`\uC73C\uB85C \uC720\uB3D9 auto-fit \uADF8\uB9AC\uB4DC\uB97C \uB9CC\uB4DC\uC138\uC694.\n\n<div class="not-content my-6">\n  <GridPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="grid" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Grid columns={3} gap="sizeMedium">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</Grid>\n\n<Grid minItem="foundationSize2560" gap="sizeLarge">\n  <GridItem>Card</GridItem>\n  <GridItem>Card</GridItem>\n</Grid>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Grid\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "columns", default: "1", type: "number", description: "\uB3D9\uC77C \uC5F4 \uAC1C\uC218(`minItem` \uC124\uC815 \uC2DC \uBB34\uC2DC)." },\n    { prop: "minItem", default: "\u2014", type: "Foundation size name", description: "auto-fit \uCD5C\uC18C \uD2B8\uB799 \uD06C\uAE30." },\n    { prop: "gap", default: "\\"sizeNone\\"", type: "Spacing token", description: "\uD589\xB7\uC5F4 gap." },\n    { prop: "columnGap", default: "\u2014", type: "Spacing token", description: "\uC5F4 gap \uC7AC\uC815\uC758." },\n    { prop: "rowGap", default: "\u2014", type: "Spacing token", description: "\uD589 gap \uC7AC\uC815\uC758." },\n    { prop: "align", default: "\u2014", type: "Align token", description: "\uC544\uC774\uD15C \uC815\uB82C." },\n    { prop: "justify", default: "\u2014", type: "Justify token", description: "\uCF58\uD150\uCE20 justify." }\n    ]}\n  />\n</div>\n### GridItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "span", default: "1", type: "number", description: "\uC5F4 span." },\n    { prop: "rowSpan", default: "\u2014", type: "number", description: "\uD589 span." }\n    ]}\n  />\n</div>',
+      searchText: 'grid \uB3D9\uC77C \uC5F4 \uB610\uB294 foundation min-item \uC790\uB3D9 \uB9DE\uCDA4 css \uADF8\uB9AC\uB4DC. `grid`\uB294 \uC790\uC2DD\uC744 \uC5F4\uB85C \uBC30\uCE58\uD569\uB2C8\uB2E4. \uACE0\uC815 `columns`\uB97C \uC4F0\uAC70\uB098, foundation \uD06C\uAE30\uC640 \uD568\uAED8 `minitem`\uC73C\uB85C \uC720\uB3D9 auto-fit \uADF8\uB9AC\uB4DC\uB97C \uB9CC\uB4DC\uC138\uC694.\n\n<div class="not-content my-6">\n  <gridpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="grid" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<grid columns={3} gap="sizemedium">\n  <div>1</div>\n  <div>2</div>\n  <div>3</div>\n</grid>\n\n<grid minitem="foundationsize2560" gap="sizelarge">\n  <griditem>card</griditem>\n  <griditem>card</griditem>\n</grid>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### grid\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "columns", default: "1", type: "number", description: "\uB3D9\uC77C \uC5F4 \uAC1C\uC218(`minitem` \uC124\uC815 \uC2DC \uBB34\uC2DC)." },\n    { prop: "minitem", default: "\u2014", type: "foundation size name", description: "auto-fit \uCD5C\uC18C \uD2B8\uB799 \uD06C\uAE30." },\n    { prop: "gap", default: "\\"sizenone\\"", type: "spacing token", description: "\uD589\xB7\uC5F4 gap." },\n    { prop: "columngap", default: "\u2014", type: "spacing token", description: "\uC5F4 gap \uC7AC\uC815\uC758." },\n    { prop: "rowgap", default: "\u2014", type: "spacing token", description: "\uD589 gap \uC7AC\uC815\uC758." },\n    { prop: "align", default: "\u2014", type: "align token", description: "\uC544\uC774\uD15C \uC815\uB82C." },\n    { prop: "justify", default: "\u2014", type: "justify token", description: "\uCF58\uD150\uCE20 justify." }\n    ]}\n  />\n</div>\n### griditem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "span", default: "1", type: "number", description: "\uC5F4 span." },\n    { prop: "rowspan", default: "\u2014", type: "number", description: "\uD589 span." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/index",
+      href: "/ko/components/index/",
+      title: "\uCEF4\uD3EC\uB10C\uD2B8",
+      description: "A\u2013Z \uC21C\uC11C\uB85C \uC815\uB82C\uB41C RefineUI React \uCEF4\uD3EC\uB10C\uD2B8 \uB77C\uC774\uBE0C \uCE74\uD0C8\uB85C\uADF8.",
+      category: "guides",
+      content: '<div class="not-content">\n  <ComponentCatalog client:load locale="ko" />\n</div>',
+      searchText: '\uCEF4\uD3EC\uB10C\uD2B8 a\u2013z \uC21C\uC11C\uB85C \uC815\uB82C\uB41C refineui react \uCEF4\uD3EC\uB10C\uD2B8 \uB77C\uC774\uBE0C \uCE74\uD0C8\uB85C\uADF8. \n<div class="not-content">\n  <componentcatalog client:load locale="ko" />\n</div>\n'
+    },
+    {
+      slug: "ko/components/input-otp",
+      href: "/ko/components/input-otp/",
+      title: "Input OTP",
+      description: "\uC77C\uD68C\uC6A9 \uBE44\uBC00\uBC88\uD638 \uCF54\uB4DC \uC785\uB825 \uD544\uB4DC.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <InputOTPDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<InputOTP maxLength={6} value={code} onValueChange={setCode}>\n  <InputOTPSlot index={0} />\n  <InputOTPSlot index={1} />\n  <InputOTPSlot index={2} />\n  <InputOTPSlot index={3} />\n  <InputOTPSlot index={4} />\n  <InputOTPSlot index={5} />\n</InputOTP>\n\n<InputOTP\n  maxLength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="Enter verification code"\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### InputOTP\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 OTP \uBB38\uC790\uC5F4." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "maxLength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n    { prop: "pattern", default: "/\\\\d/", type: "RegExp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "autoFocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### InputOTPSlot\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n    ]}\n  />\n</div>',
+      searchText: 'input otp \uC77C\uD68C\uC6A9 \uBE44\uBC00\uBC88\uD638 \uCF54\uB4DC \uC785\uB825 \uD544\uB4DC. <div class="not-content my-6">\n  <inputotpdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="input-otp" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<inputotp maxlength={6} value={code} onvaluechange={setcode}>\n  <inputotpslot index={0} />\n  <inputotpslot index={1} />\n  <inputotpslot index={2} />\n  <inputotpslot index={3} />\n  <inputotpslot index={4} />\n  <inputotpslot index={5} />\n</inputotp>\n\n<inputotp\n  maxlength={4}\n  pattern={/\\d/}\n  size="lg"\n  aria-label="enter verification code"\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### inputotp\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 otp \uBB38\uC790\uC5F4." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "maxlength", default: "\u2014", type: "number", description: "\uC2AC\uB86F \uC218(\uD544\uC218)." },\n    { prop: "pattern", default: "/\\\\d/", type: "regexp", description: "\uBB38\uC790\uBCC4 \uD5C8\uC6A9 \uBAA9\uB85D(\uAE30\uBCF8: \uC22B\uC790\uB9CC)." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "autofocus", default: "false", type: "boolean", description: "\uB9C8\uC6B4\uD2B8 \uC2DC \uC790\uB3D9 \uD3EC\uCEE4\uC2A4." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uCEE8\uD2B8\uB864\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### inputotpslot\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "index", default: "\u2014", type: "number", description: "0\uBD80\uD130 \uC2DC\uC791\uD558\uB294 \uC2AC\uB86F \uC778\uB371\uC2A4(\uD544\uC218)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/input",
+      href: "/ko/components/input/",
+      title: "Input",
+      description: "\uD55C \uC904 \uD14D\uC2A4\uD2B8 \uC785\uB825\uC744 \uC704\uD55C \uD14D\uC2A4\uD2B8 \uC785\uB825.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <InputPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="input" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="input" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Input placeholder="Enter your name" />\n\n<Input\n  size="lg"\n  error={hasError}\n  value={email}\n  onChange={(e) => setEmail(e.target.value)}\n/>\n\n<Input fullWidth placeholder="Full width input" />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Input \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "error", default: "false", type: "boolean", description: "\uC5D0\uB7EC \uC0C1\uD0DC \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "success", default: "false", type: "boolean", description: "\uC131\uACF5 \uC0C1\uD0DC \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "fullWidth", default: "false", type: "boolean", description: "\uBD80\uBAA8 \uC804\uCCB4 \uB108\uBE44\uB85C \uB298\uC5B4\uB0A9\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'input \uD55C \uC904 \uD14D\uC2A4\uD2B8 \uC785\uB825\uC744 \uC704\uD55C \uD14D\uC2A4\uD2B8 \uC785\uB825. <div class="not-content my-6">\n  <inputpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="input" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="input" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<input placeholder="enter your name" />\n\n<input\n  size="lg"\n  error={haserror}\n  value={email}\n  onchange={(e) => setemail(e.target.value)}\n/>\n\n<input fullwidth placeholder="full width input" />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "input \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "error", default: "false", type: "boolean", description: "\uC5D0\uB7EC \uC0C1\uD0DC \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "success", default: "false", type: "boolean", description: "\uC131\uACF5 \uC0C1\uD0DC \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "fullwidth", default: "false", type: "boolean", description: "\uBD80\uBAA8 \uC804\uCCB4 \uB108\uBE44\uB85C \uB298\uC5B4\uB0A9\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/label",
+      href: "/ko/components/label/",
+      title: "Label",
+      description: "\uD3FC \uD544\uB4DC\uB97C \uC704\uD55C \uD14D\uC2A4\uD2B8 \uB808\uC774\uBE14 \uCEE8\uD2B8\uB864.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <LabelPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="label" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Label htmlFor="email">Email address</Label>\n\n<Label htmlFor="password" required>\n  Password\n</Label>\n\n<Label size="lg" disabled>\n  Disabled Label\n</Label>\n\n<Label htmlFor="name">\n  Name <LabelRequired />\n</Label>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Label\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "required", default: "false", type: "boolean", description: "LabelRequired\uB97C \uBD99\uC774\uB294 \uD3B8\uC758 prop." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "Label \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uBE44\uD65C\uC131 \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "htmlFor", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14\uC744 \uD3FC \uCEE8\uD2B8\uB864\uACFC \uC5F0\uACB0\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### LabelRequired\n\n\uD544\uC218 \uD45C\uC2DC \uC2DC\uAC01 \uC778\uB514\uCF00\uC774\uD130(\uBCC4\uD45C). \uB808\uC774\uBE14\uC744 \uC9C1\uC811 \uC870\uD569\uD560 \uB54C \uC0AC\uC6A9\uD558\uC138\uC694.',
+      searchText: 'label \uD3FC \uD544\uB4DC\uB97C \uC704\uD55C \uD14D\uC2A4\uD2B8 \uB808\uC774\uBE14 \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n  <labelpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="label" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<label htmlfor="email">email address</label>\n\n<label htmlfor="password" required>\n  password\n</label>\n\n<label size="lg" disabled>\n  disabled label\n</label>\n\n<label htmlfor="name">\n  name <labelrequired />\n</label>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### label\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "required", default: "false", type: "boolean", description: "labelrequired\uB97C \uBD99\uC774\uB294 \uD3B8\uC758 prop." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "label \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uBE44\uD65C\uC131 \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "htmlfor", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14\uC744 \uD3FC \uCEE8\uD2B8\uB864\uACFC \uC5F0\uACB0\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### labelrequired\n\n\uD544\uC218 \uD45C\uC2DC \uC2DC\uAC01 \uC778\uB514\uCF00\uC774\uD130(\uBCC4\uD45C). \uB808\uC774\uBE14\uC744 \uC9C1\uC811 \uC870\uD569\uD560 \uB54C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n'
+    },
+    {
+      slug: "ko/components/link",
+      href: "/ko/components/link/",
+      title: "Link",
+      description: "\uC778\uD130\uB799\uD2F0\uBE0C \uD14D\uC2A4\uD2B8 \uD558\uC774\uD37C\uB9C1\uD06C \uCEE8\uD2B8\uB864.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <LinkPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="link" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="link" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Link href="/docs">Documentation</Link>\n\n<Link href="https://example.com" target="_blank">\n  External Link\n</Link>\n\n<Link href="https://example.com" showExternalIcon={false}>\n  No Icon\n</Link>\n\n<Link href="/disabled" disabled>\n  Disabled Link\n</Link>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "showExternalIcon", default: "\u2014", type: "boolean", description: "true\uC774\uBA74 \uC678\uBD80 \uB9C1\uD06C \uC544\uC774\uCF58\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4. `target=\\"_blank\\"`\uC77C \uB54C \uC790\uB3D9 \uD45C\uC2DC. \uC228\uAE30\uB824\uBA74 false." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uB9C1\uD06C\uB97C \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4(`aria-disabled` \uC124\uC815 \uBC0F \uD3EC\uC778\uD130 \uC774\uBCA4\uD2B8 \uCC28\uB2E8)." },\n    { prop: "href", default: "\u2014", type: "string", description: "\uB9C1\uD06C \uB300\uC0C1 URL." }\n    ]}\n  />\n</div>',
+      searchText: 'link \uC778\uD130\uB799\uD2F0\uBE0C \uD14D\uC2A4\uD2B8 \uD558\uC774\uD37C\uB9C1\uD06C \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n  <linkpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="link" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="link" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<link href="/docs">documentation</link>\n\n<link href="https://example.com" target="_blank">\n  external link\n</link>\n\n<link href="https://example.com" showexternalicon={false}>\n  no icon\n</link>\n\n<link href="/disabled" disabled>\n  disabled link\n</link>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "showexternalicon", default: "\u2014", type: "boolean", description: "true\uC774\uBA74 \uC678\uBD80 \uB9C1\uD06C \uC544\uC774\uCF58\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4. `target=\\"_blank\\"`\uC77C \uB54C \uC790\uB3D9 \uD45C\uC2DC. \uC228\uAE30\uB824\uBA74 false." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uB9C1\uD06C\uB97C \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4(`aria-disabled` \uC124\uC815 \uBC0F \uD3EC\uC778\uD130 \uC774\uBCA4\uD2B8 \uCC28\uB2E8)." },\n    { prop: "href", default: "\u2014", type: "string", description: "\uB9C1\uD06C \uB300\uC0C1 url." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/menu",
+      href: "/ko/components/menu/",
+      title: "Menu",
+      description: "\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9\uC774 \uC788\uB294 \uC561\uC158 \uBA54\uB274 \uB4DC\uB86D\uB2E4\uC6B4.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <MenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuItem onSelect={() => handleNew()}>\n        New File\n      </MenuItem>\n      <MenuItem onSelect={() => handleOpen()}>\n        Open\n      </MenuItem>\n      <MenuDivider />\n      <MenuItem state="disabled">\n        Save (disabled)\n      </MenuItem>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n\n<Menu>\n  <MenuPopover>\n    <MenuList>\n      <MenuSection>\n        <MenuItem\n          startIcon={<Icon />}\n          endIcon={<Badge />}\n          description="Description text"\n          shortcut="\u2318N"\n        >\n          Menu Item\n        </MenuItem>\n        <MenuSubTrigger>Submenu</MenuSubTrigger>\n        <MenuSubContent>\n          <MenuItem>Submenu Item</MenuItem>\n        </MenuSubContent>\n      </MenuSection>\n    </MenuList>\n  </MenuPopover>\n</Menu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Menu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "MenuPositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n    ]}\n  />\n</div>\n### MenuPopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### MenuList\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### MenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "shortcut", default: "\u2014", type: "ReactNode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "endIcon", default: "\u2014", type: "ReactNode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### MenuSection\n\n\uAD00\uB828 \uBA54\uB274 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### MenuDivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### MenuSubTrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "ReactNode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "startIcon", default: "\u2014", type: "ReactNode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### MenuSubContent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.',
+      searchText: 'menu \uB9AC\uC2A4\uD2B8 \uD56D\uBAA9\uC774 \uC788\uB294 \uC561\uC158 \uBA54\uB274 \uB4DC\uB86D\uB2E4\uC6B4. <div class="not-content my-6">\n  <menupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<menu>\n  <menupopover>\n    <menulist>\n      <menuitem onselect={() => handlenew()}>\n        new file\n      </menuitem>\n      <menuitem onselect={() => handleopen()}>\n        open\n      </menuitem>\n      <menudivider />\n      <menuitem state="disabled">\n        save (disabled)\n      </menuitem>\n    </menulist>\n  </menupopover>\n</menu>\n\n<menu>\n  <menupopover>\n    <menulist>\n      <menusection>\n        <menuitem\n          starticon={<icon />}\n          endicon={<badge />}\n          description="description text"\n          shortcut="\u2318n"\n        >\n          menu item\n        </menuitem>\n        <menusubtrigger>submenu</menusubtrigger>\n        <menusubcontent>\n          <menuitem>submenu item</menuitem>\n        </menusubcontent>\n      </menusection>\n    </menulist>\n  </menupopover>\n</menu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### menu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "positioning", default: "\u2014", type: "menupositioning", description: "\uD3EC\uC9C0\uC154\uB2DD \uC124\uC815." }\n    ]}\n  />\n</div>\n### menupopover\n\n\uBA54\uB274\uC6A9 \uD31D\uC624\uBC84 \uCEE8\uD14C\uC774\uB108.\n\n### menulist\n\n\uBA54\uB274 \uD56D\uBAA9 \uB9AC\uC2A4\uD2B8 \uCEE8\uD14C\uC774\uB108.\n\n### menuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "shortcut", default: "\u2014", type: "reactnode", description: "\uD0A4\uBCF4\uB4DC \uB2E8\uCD95\uD0A4 \uD78C\uD2B8." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "endicon", default: "\u2014", type: "reactnode", description: "\uB4A4\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### menusection\n\n\uAD00\uB828 \uBA54\uB274 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### menudivider\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n### menusubtrigger\n\n\uC11C\uBE0C\uBA54\uB274 \uD2B8\uB9AC\uAC70 \uD56D\uBAA9(\uC170\uBE0C\uB860 \uD45C\uC2DC).\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "description", default: "\u2014", type: "reactnode", description: "\uBCF4\uC870 \uC124\uBA85 \uD14D\uC2A4\uD2B8." },\n    { prop: "starticon", default: "\u2014", type: "reactnode", description: "\uC55E\uCABD \uC544\uC774\uCF58." },\n    { prop: "state", default: "\\"default\\"", type: "\\"default\\" | \\"hover\\" | \\"pressed\\" | \\"active\\" | \\"disabled\\"", description: "\uC2DC\uAC01 \uC0C1\uD0DC." }\n    ]}\n  />\n</div>\n### menusubcontent\n\n\uC11C\uBE0C\uBA54\uB274 \uD328\uB110.\n\n'
+    },
+    {
+      slug: "ko/components/navigation-menu",
+      href: "/ko/components/navigation-menu/",
+      title: "Navigation Menu",
+      description: "\uCD5C\uC0C1\uC704 \uBC18\uC751\uD615 \uD5E4\uB354 \uB0B4\uBE44\uAC8C\uC774\uC158 \uBA54\uB274.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <NavigationMenuPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/" active>\n        Home\n      </NavigationMenuLink>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Products</NavigationMenuTrigger>\n      <NavigationMenuContent>\n        <NavigationMenuLink href="/products/web">Web</NavigationMenuLink>\n        <NavigationMenuLink href="/products/mobile">Mobile</NavigationMenuLink>\n      </NavigationMenuContent>\n    </NavigationMenuItem>\n    <NavigationMenuItem>\n      <NavigationMenuLink href="/about">About</NavigationMenuLink>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### NavigationMenu\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "delayDuration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n    { prop: "skipDelayDuration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n    { prop: "aria-label", default: "\\"Main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### NavigationMenuList\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### NavigationMenuItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n    ]}\n  />\n</div>\n### NavigationMenuTrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### NavigationMenuContent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### NavigationMenuLink\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### NavigationMenuIndicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).',
+      searchText: 'navigation menu \uCD5C\uC0C1\uC704 \uBC18\uC751\uD615 \uD5E4\uB354 \uB0B4\uBE44\uAC8C\uC774\uC158 \uBA54\uB274. <div class="not-content my-6">\n  <navigationmenupreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="navigation-menu" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<navigationmenu>\n  <navigationmenulist>\n    <navigationmenuitem>\n      <navigationmenulink href="/" active>\n        home\n      </navigationmenulink>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenutrigger>products</navigationmenutrigger>\n      <navigationmenucontent>\n        <navigationmenulink href="/products/web">web</navigationmenulink>\n        <navigationmenulink href="/products/mobile">mobile</navigationmenulink>\n      </navigationmenucontent>\n    </navigationmenuitem>\n    <navigationmenuitem>\n      <navigationmenulink href="/about">about</navigationmenulink>\n    </navigationmenuitem>\n  </navigationmenulist>\n</navigationmenu>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### navigationmenu\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9B0 \uD56D\uBAA9 \uAC12(\uBE48 \uBB38\uC790\uC5F4 = \uB2EB\uD798)." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9B0 \uD56D\uBAA9." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC5F4\uB9B0 \uD56D\uBAA9 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "delayduration", default: "\u2014", type: "number", description: "\uD3EC\uC778\uD130 enter \uC2DC \uC5F4\uB9AC\uAE30 \uC804 \uC9C0\uC5F0(ms)." },\n    { prop: "skipdelayduration", default: "\u2014", type: "number", description: "\uC5F4\uB9B0 \uC0C1\uD0DC\uC5D0\uC11C \uD56D\uBAA9 \uAC04 \uC774\uB3D9 \uC2DC \uC9C0\uC5F0." },\n    { prop: "aria-label", default: "\\"main\\"", type: "string", description: "\uB0B4\uBE44\uAC8C\uC774\uC158 landmark\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### navigationmenulist\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### navigationmenuitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC5F4\uB9BC \uC0C1\uD0DC\uC6A9 \uC548\uC815\uC801 id(\uC0DD\uB7B5 \uC2DC \uC790\uB3D9 \uC0DD\uC131)." }\n    ]}\n  />\n</div>\n### navigationmenutrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uCF58\uD150\uCE20\uC6A9 \uD2B8\uB9AC\uAC70 \uBC84\uD2BC.\n\n### navigationmenucontent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCF58\uD150\uCE20.\n\n### navigationmenulink\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### navigationmenuindicator\n\n\uD65C\uC131 \uD56D\uBAA9 \uC778\uB514\uCF00\uC774\uD130(\uC2DC\uAC01\uC801 \uBC11\uC904).\n\n'
+    },
+    {
+      slug: "ko/components/pagination",
+      href: "/ko/components/pagination/",
+      title: "Pagination",
+      description: "\uC5EC\uB7EC \uD398\uC774\uC9C0 \uB370\uC774\uD130\uC14B \uAC04 \uD0D0\uC0C9.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <PaginationDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="pagination" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Pagination>\n  <PaginationContent>\n    <PaginationItem>\n      <PaginationPrevious href="#" />\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href="#" isActive>1</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href="#">2</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href="#">3</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationEllipsis />\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationLink href="#">10</PaginationLink>\n    </PaginationItem>\n    <PaginationItem>\n      <PaginationNext href="#" />\n    </PaginationItem>\n  </PaginationContent>\n</Pagination>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Pagination\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### PaginationContent\n\n\uD398\uC774\uC9C0\uB124\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### PaginationItem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### PaginationLink\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "isActive", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### PaginationPrevious\n\n\uC774\uC804 \uD398\uC774\uC9C0 \uBC84\uD2BC.\n\n### PaginationNext\n\n\uB2E4\uC74C \uD398\uC774\uC9C0 \uBC84\uD2BC.\n\n### PaginationEllipsis\n\n\uAC74\uB108\uB6F4 \uD398\uC774\uC9C0 \uD45C\uC2DC\uAE30.',
+      searchText: 'pagination \uC5EC\uB7EC \uD398\uC774\uC9C0 \uB370\uC774\uD130\uC14B \uAC04 \uD0D0\uC0C9. <div class="not-content my-6">\n  <paginationdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="pagination" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<pagination>\n  <paginationcontent>\n    <paginationitem>\n      <paginationprevious href="#" />\n    </paginationitem>\n    <paginationitem>\n      <paginationlink href="#" isactive>1</paginationlink>\n    </paginationitem>\n    <paginationitem>\n      <paginationlink href="#">2</paginationlink>\n    </paginationitem>\n    <paginationitem>\n      <paginationlink href="#">3</paginationlink>\n    </paginationitem>\n    <paginationitem>\n      <paginationellipsis />\n    </paginationitem>\n    <paginationitem>\n      <paginationlink href="#">10</paginationlink>\n    </paginationitem>\n    <paginationitem>\n      <paginationnext href="#" />\n    </paginationitem>\n  </paginationcontent>\n</pagination>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### pagination\n\n\uB8E8\uD2B8 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### paginationcontent\n\n\uD398\uC774\uC9C0\uB124\uC774\uC158 \uD56D\uBAA9 \uBAA9\uB85D.\n\n### paginationitem\n\n\uB9AC\uC2A4\uD2B8 \uD56D\uBAA9 \uB798\uD37C.\n\n### paginationlink\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "isactive", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### paginationprevious\n\n\uC774\uC804 \uD398\uC774\uC9C0 \uBC84\uD2BC.\n\n### paginationnext\n\n\uB2E4\uC74C \uD398\uC774\uC9C0 \uBC84\uD2BC.\n\n### paginationellipsis\n\n\uAC74\uB108\uB6F4 \uD398\uC774\uC9C0 \uD45C\uC2DC\uAE30.\n\n'
+    },
+    {
+      slug: "ko/components/popover",
+      href: "/ko/components/popover/",
+      title: "Popover",
+      description: "\uD2B8\uB9AC\uAC70 \uAE30\uC900\uC758 \uB5A0 \uC788\uB294 \uCF58\uD150\uCE20 \uD328\uB110.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <PopOverDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="popover" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Popover>\n  <PopoverTrigger>\n    <Button>Show Info</Button>\n  </PopoverTrigger>\n  <PopoverContent>\n    <p>Additional information here</p>\n  </PopoverContent>\n</Popover>\n\n<Popover open={isOpen} onOpenChange={setIsOpen}>\n  <PopoverTrigger>\n    <Button>Toggle</Button>\n  </PopoverTrigger>\n  <PopoverContent placement="top" align="center">\n    <p>Popover content</p>\n  </PopoverContent>\n</Popover>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Popover\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "defaultOpen", default: "\u2014", type: "boolean", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### PopoverTrigger\n\n\uD31D\uC624\uBC84\uB97C \uC5EC\uB294 \uD2B8\uB9AC\uAC70 \uC694\uC18C.\n\n### PopoverContent\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "placement", default: "\\"bottom\\"", type: "\\"top\\" | \\"bottom\\" | \\"left\\" | \\"right\\"", description: "\uD2B8\uB9AC\uAC70 \uAE30\uC900 \uC704\uCE58." },\n    { prop: "align", default: "\\"center\\"", type: "\\"start\\" | \\"center\\" | \\"end\\"", description: "\uAC00\uC7A5\uC790\uB9AC \uAE30\uC900 \uC815\uB82C." }\n    ]}\n  />\n</div>',
+      searchText: 'popover \uD2B8\uB9AC\uAC70 \uAE30\uC900\uC758 \uB5A0 \uC788\uB294 \uCF58\uD150\uCE20 \uD328\uB110. <div class="not-content my-6">\n  <popoverdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="popover" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<popover>\n  <popovertrigger>\n    <button>show info</button>\n  </popovertrigger>\n  <popovercontent>\n    <p>additional information here</p>\n  </popovercontent>\n</popover>\n\n<popover open={isopen} onopenchange={setisopen}>\n  <popovertrigger>\n    <button>toggle</button>\n  </popovertrigger>\n  <popovercontent placement="top" align="center">\n    <p>popover content</p>\n  </popovercontent>\n</popover>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### popover\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "defaultopen", default: "\u2014", type: "boolean", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### popovertrigger\n\n\uD31D\uC624\uBC84\uB97C \uC5EC\uB294 \uD2B8\uB9AC\uAC70 \uC694\uC18C.\n\n### popovercontent\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "placement", default: "\\"bottom\\"", type: "\\"top\\" | \\"bottom\\" | \\"left\\" | \\"right\\"", description: "\uD2B8\uB9AC\uAC70 \uAE30\uC900 \uC704\uCE58." },\n    { prop: "align", default: "\\"center\\"", type: "\\"start\\" | \\"center\\" | \\"end\\"", description: "\uAC00\uC7A5\uC790\uB9AC \uAE30\uC900 \uC815\uB82C." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/progress-stepper",
+      href: "/ko/components/progress-stepper/",
+      title: "Progress Stepper",
+      description: "\uB2E4\uB2E8\uACC4 \uD504\uB85C\uC138\uC2A4 \uC644\uB8CC \uD45C\uC2DC\uAE30.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ProgressStepperPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="progress-stepper" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<ProgressStepper value={currentStep} onValueChange={setCurrentStep}>\n  <ProgressStepperList>\n    <ProgressStepperItem value={1}>\n      <ProgressStepperMarker />\n      <ProgressStepperLabel>Account</ProgressStepperLabel>\n    </ProgressStepperItem>\n    <ProgressStepperItem value={2}>\n      <ProgressStepperMarker />\n      <ProgressStepperLabel>Profile</ProgressStepperLabel>\n    </ProgressStepperItem>\n    <ProgressStepperItem value={3}>\n      <ProgressStepperMarker />\n      <ProgressStepperLabel>Complete</ProgressStepperLabel>\n    </ProgressStepperItem>\n  </ProgressStepperList>\n</ProgressStepper>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### ProgressStepper\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uD65C\uC131 \uB2E8\uACC4 \uAC12." },\n    { prop: "defaultValue", default: "\u2014", type: "number", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uB2E8\uACC4." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: number) => void", description: "\uB2E8\uACC4 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### ProgressStepperItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uB2E8\uACC4 \uC2DD\uBCC4\uC790(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uB2E8\uACC4\uB97C \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### ProgressStepperMarker\n\n\uB2E8\uACC4 \uC778\uB514\uCF00\uC774\uD130(\uC6D0/\uCCB4\uD06C\uB9C8\uD06C).\n\n### ProgressStepperLabel\n\n\uB2E8\uACC4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8.',
+      searchText: 'progress stepper \uB2E4\uB2E8\uACC4 \uD504\uB85C\uC138\uC2A4 \uC644\uB8CC \uD45C\uC2DC\uAE30. <div class="not-content my-6">\n  <progressstepperpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="progress-stepper" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<progressstepper value={currentstep} onvaluechange={setcurrentstep}>\n  <progressstepperlist>\n    <progressstepperitem value={1}>\n      <progresssteppermarker />\n      <progressstepperlabel>account</progressstepperlabel>\n    </progressstepperitem>\n    <progressstepperitem value={2}>\n      <progresssteppermarker />\n      <progressstepperlabel>profile</progressstepperlabel>\n    </progressstepperitem>\n    <progressstepperitem value={3}>\n      <progresssteppermarker />\n      <progressstepperlabel>complete</progressstepperlabel>\n    </progressstepperitem>\n  </progressstepperlist>\n</progressstepper>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### progressstepper\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uD65C\uC131 \uB2E8\uACC4 \uAC12." },\n    { prop: "defaultvalue", default: "\u2014", type: "number", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uB2E8\uACC4." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: number) => void", description: "\uB2E8\uACC4 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### progressstepperitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uB2E8\uACC4 \uC2DD\uBCC4\uC790(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uB2E8\uACC4\uB97C \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### progresssteppermarker\n\n\uB2E8\uACC4 \uC778\uB514\uCF00\uC774\uD130(\uC6D0/\uCCB4\uD06C\uB9C8\uD06C).\n\n### progressstepperlabel\n\n\uB2E8\uACC4 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8.\n\n'
+    },
+    {
+      slug: "ko/components/progress",
+      href: "/ko/components/progress/",
+      title: "Progress",
+      description: "\uC644\uB8CC \uBE44\uC728\uC744 \uB098\uD0C0\uB0B4\uB294 \uC2DC\uAC01\uC801 \uBC14.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ProgressPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="progress" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Progress value={60} max={100} size="lg" />\n\n<Progress value={uploadedBytes} max={totalBytes} />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uD604\uC7AC \uC9C4\uD589 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "100", type: "number", description: "\uCD5C\uB313\uAC12." },\n    { prop: "size", default: "\u2014", type: "\\"sm\\" | \\"lg\\"", description: "\uBC14 \uB450\uAED8: Small(2px) \uB610\uB294 Large(4px)." }\n    ]}\n  />\n</div>',
+      searchText: 'progress \uC644\uB8CC \uBE44\uC728\uC744 \uB098\uD0C0\uB0B4\uB294 \uC2DC\uAC01\uC801 \uBC14. <div class="not-content my-6">\n  <progresspreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="progress" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<progress value={60} max={100} size="lg" />\n\n<progress value={uploadedbytes} max={totalbytes} />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uD604\uC7AC \uC9C4\uD589 \uAC12(\uD544\uC218)." },\n    { prop: "max", default: "100", type: "number", description: "\uCD5C\uB313\uAC12." },\n    { prop: "size", default: "\u2014", type: "\\"sm\\" | \\"lg\\"", description: "\uBC14 \uB450\uAED8: small(2px) \uB610\uB294 large(4px)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/radio",
+      href: "/ko/components/radio/",
+      title: "Radio",
+      description: "\uC635\uC158 \uADF8\uB8F9\uC5D0\uC11C \uB2E8\uC77C \uC120\uD0DD.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <RadioPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="radio" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="radio" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Radio name="plan" value="basic" label="Basic Plan" />\n\n<Radio\n  name="plan"\n  value="pro"\n  label="Pro Plan"\n  description="Includes advanced features"\n  checked={selectedPlan === "pro"}\n  onChange={(e) => setSelectedPlan(e.target.value)}\n/>\n\n<Radio\n  name="plan"\n  value="enterprise"\n  label="Enterprise"\n  allowUncheck\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "\uB77C\uB514\uC624 \uBC84\uD2BC \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n    { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n    { prop: "allowUncheck", default: "false", type: "boolean", description: "\uC120\uD0DD\uB41C \uB77C\uB514\uC624 \uCCB4\uD06C \uD574\uC81C\uB97C \uD5C8\uC6A9\uD569\uB2C8\uB2E4." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "value", default: "\u2014", type: "string", description: "\uD3FC \uC81C\uCD9C\uC6A9 \uAC12." },\n    { prop: "name", default: "\u2014", type: "string", description: "\uB77C\uB514\uC624 \uBC84\uD2BC \uADF8\uB8F9\uC6A9 name." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'radio \uC635\uC158 \uADF8\uB8F9\uC5D0\uC11C \uB2E8\uC77C \uC120\uD0DD. <div class="not-content my-6">\n  <radiopreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="radio" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="radio" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<radio name="plan" value="basic" label="basic plan" />\n\n<radio\n  name="plan"\n  value="pro"\n  label="pro plan"\n  description="includes advanced features"\n  checked={selectedplan === "pro"}\n  onchange={(e) => setselectedplan(e.target.value)}\n/>\n\n<radio\n  name="plan"\n  value="enterprise"\n  label="enterprise"\n  allowuncheck\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "label", default: "\u2014", type: "string", description: "\uB77C\uB514\uC624 \uBC84\uD2BC \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8." },\n    { prop: "description", default: "\u2014", type: "string", description: "\uB808\uC774\uBE14 \uC544\uB798 \uC120\uD0DD\uC801 \uC124\uBA85." },\n    { prop: "allowuncheck", default: "false", type: "boolean", description: "\uC120\uD0DD\uB41C \uB77C\uB514\uC624 \uCCB4\uD06C \uD574\uC81C\uB97C \uD5C8\uC6A9\uD569\uB2C8\uB2E4." },\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "value", default: "\u2014", type: "string", description: "\uD3FC \uC81C\uCD9C\uC6A9 \uAC12." },\n    { prop: "name", default: "\u2014", type: "string", description: "\uB77C\uB514\uC624 \uBC84\uD2BC \uADF8\uB8F9\uC6A9 name." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/resizable",
+      href: "/ko/components/resizable/",
+      title: "Resizable",
+      description: "\uB4DC\uB798\uADF8 \uD578\uB4E4\uC774 \uC788\uB294 \uBD84\uD560 \uD328\uB110 \uB808\uC774\uC544\uC6C3.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ResizableDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="resizable" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<ResizablePanelGroup orientation="horizontal">\n  <ResizablePanel defaultSize={50} minSize={30}>\n    Left panel\n  </ResizablePanel>\n  <ResizableHandle />\n  <ResizablePanel defaultSize={50} minSize={30}>\n    Right panel\n  </ResizablePanel>\n</ResizablePanelGroup>\n\n<ResizablePanelGroup orientation="vertical" onLayout={(sizes) => console.log(sizes)}>\n  <ResizablePanel size={topPanelSize} onResize={setTopPanelSize}>\n    Top\n  </ResizablePanel>\n  <ResizableHandle withHandle />\n  <ResizablePanel>\n    Bottom\n  </ResizablePanel>\n</ResizablePanelGroup>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### ResizablePanelGroup\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "orientation", default: "\\"horizontal\\"", type: "\\"horizontal\\" | \\"vertical\\"", description: "\uBD84\uD560 \uBC29\uD5A5." },\n    { prop: "onLayout", default: "\u2014", type: "(sizes: number[]) => void", description: "\uB9AC\uC0AC\uC774\uC988 \uD6C4 \uD328\uB110 \uD06C\uAE30(\uD569\uC774 \uC57D 100%\uC778 \uBC31\uBD84\uC728)\uB85C \uD638\uCD9C\uB429\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### ResizablePanel\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "defaultSize", default: "50", type: "number", description: "\uCD08\uAE30 \uD06C\uAE30(\uBC31\uBD84\uC728)." },\n    { prop: "minSize", default: "10", type: "number", description: "\uCD5C\uC18C \uD06C\uAE30 \uBC31\uBD84\uC728." },\n    { prop: "maxSize", default: "100", type: "number", description: "\uCD5C\uB300 \uD06C\uAE30 \uBC31\uBD84\uC728." },\n    { prop: "size", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uD06C\uAE30 \uBC31\uBD84\uC728." },\n    { prop: "onResize", default: "\u2014", type: "(size: number) => void", description: "\uD328\uB110 \uB9AC\uC0AC\uC774\uC988 \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### ResizableHandle\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "withHandle", default: "false", type: "boolean", description: "\uAD6C\uBD84\uC120\uC5D0 grip affordance\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uB9AC\uC0AC\uC774\uC988\uB97C \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'resizable \uB4DC\uB798\uADF8 \uD578\uB4E4\uC774 \uC788\uB294 \uBD84\uD560 \uD328\uB110 \uB808\uC774\uC544\uC6C3. <div class="not-content my-6">\n  <resizabledemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="resizable" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<resizablepanelgroup orientation="horizontal">\n  <resizablepanel defaultsize={50} minsize={30}>\n    left panel\n  </resizablepanel>\n  <resizablehandle />\n  <resizablepanel defaultsize={50} minsize={30}>\n    right panel\n  </resizablepanel>\n</resizablepanelgroup>\n\n<resizablepanelgroup orientation="vertical" onlayout={(sizes) => console.log(sizes)}>\n  <resizablepanel size={toppanelsize} onresize={settoppanelsize}>\n    top\n  </resizablepanel>\n  <resizablehandle withhandle />\n  <resizablepanel>\n    bottom\n  </resizablepanel>\n</resizablepanelgroup>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### resizablepanelgroup\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "orientation", default: "\\"horizontal\\"", type: "\\"horizontal\\" | \\"vertical\\"", description: "\uBD84\uD560 \uBC29\uD5A5." },\n    { prop: "onlayout", default: "\u2014", type: "(sizes: number[]) => void", description: "\uB9AC\uC0AC\uC774\uC988 \uD6C4 \uD328\uB110 \uD06C\uAE30(\uD569\uC774 \uC57D 100%\uC778 \uBC31\uBD84\uC728)\uB85C \uD638\uCD9C\uB429\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### resizablepanel\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "defaultsize", default: "50", type: "number", description: "\uCD08\uAE30 \uD06C\uAE30(\uBC31\uBD84\uC728)." },\n    { prop: "minsize", default: "10", type: "number", description: "\uCD5C\uC18C \uD06C\uAE30 \uBC31\uBD84\uC728." },\n    { prop: "maxsize", default: "100", type: "number", description: "\uCD5C\uB300 \uD06C\uAE30 \uBC31\uBD84\uC728." },\n    { prop: "size", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uD06C\uAE30 \uBC31\uBD84\uC728." },\n    { prop: "onresize", default: "\u2014", type: "(size: number) => void", description: "\uD328\uB110 \uB9AC\uC0AC\uC774\uC988 \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### resizablehandle\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "withhandle", default: "false", type: "boolean", description: "\uAD6C\uBD84\uC120\uC5D0 grip affordance\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uB9AC\uC0AC\uC774\uC988\uB97C \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/scroll-area",
+      href: "/ko/components/scroll-area/",
+      title: "Scroll Area",
+      description: "\uCEE4\uC2A4\uD140 \uC2A4\uD0C0\uC77C \uC2A4\uD06C\uB864\uBC14 \uCEE8\uD14C\uC774\uB108.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ScrollAreaDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="scroll-area" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<ScrollArea className="h-80">\n  <ScrollAreaViewport>\n    {/* Long content */}\n  </ScrollAreaViewport>\n  <ScrollAreaScrollbar orientation="vertical">\n    <ScrollAreaThumb />\n  </ScrollAreaScrollbar>\n</ScrollArea>\n\n<ScrollArea type="always">\n  <ScrollAreaViewport>\n    {/* Custom viewport */}\n  </ScrollAreaViewport>\n  <ScrollAreaScrollbar orientation="vertical">\n    <ScrollAreaThumb />\n  </ScrollAreaScrollbar>\n  <ScrollAreaScrollbar orientation="horizontal">\n    <ScrollAreaThumb />\n  </ScrollAreaScrollbar>\n</ScrollArea>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### ScrollArea\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "type", default: "\\"hover\\"", type: "\\"hover\\" | \\"always\\"", description: "\uCEE4\uC2A4\uD140 \uC2A4\uD06C\uB864\uBC14\uAC00 \uBCF4\uC774\uB294 \uC2DC\uC810." }\n    ]}\n  />\n</div>\n### ScrollAreaViewport\n\n\uBDF0\uD3EC\uD2B8 \uCEE8\uD14C\uC774\uB108(\uC2A4\uD06C\uB864 \uC601\uC5ED).\n\n\uAC01 \uCD95\uC740 \uD574\uB2F9 `ScrollAreaScrollbar`\uB97C \uC120\uC5B8\uD588\uC744 \uB54C\uB9CC \uC2A4\uD06C\uB864\uB429\uB2C8\uB2E4. \uB530\uB77C\uC11C \uAC00\uB85C \uC804\uC6A9 \uC601\uC5ED\uC5D0\uC11C\uB294 \uC138\uB85C \uD720 \uC81C\uC2A4\uCC98\uAC00 \uC601\uC5ED\uC5D0 \uAC07\uD788\uC9C0 \uC54A\uACE0 \uD398\uC774\uC9C0 \uC2A4\uD06C\uB864\uB85C \uC804\uB2EC\uB429\uB2C8\uB2E4. \uBDF0\uD3EC\uD2B8\uB294 \uB0B4\uC6A9\uC774 \uC2E4\uC81C\uB85C \uB118\uCE60 \uB54C\uB9CC \uD0ED \uC2A4\uD1B1\uC774 \uB429\uB2C8\uB2E4.\n\n### ScrollAreaScrollbar\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "orientation", default: "\\"vertical\\"", type: "\\"vertical\\" | \\"horizontal\\"", description: "\uC2A4\uD06C\uB864\uBC14 \uBC29\uD5A5." }\n    ]}\n  />\n</div>\n### ScrollAreaThumb\n\n\uC2A4\uD06C\uB864\uBC14 \uC378(\uB4DC\uB798\uADF8 \uD578\uB4E4).',
+      searchText: 'scroll area \uCEE4\uC2A4\uD140 \uC2A4\uD0C0\uC77C \uC2A4\uD06C\uB864\uBC14 \uCEE8\uD14C\uC774\uB108. <div class="not-content my-6">\n  <scrollareademo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="scroll-area" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<scrollarea classname="h-80">\n  <scrollareaviewport>\n    {/* long content */}\n  </scrollareaviewport>\n  <scrollareascrollbar orientation="vertical">\n    <scrollareathumb />\n  </scrollareascrollbar>\n</scrollarea>\n\n<scrollarea type="always">\n  <scrollareaviewport>\n    {/* custom viewport */}\n  </scrollareaviewport>\n  <scrollareascrollbar orientation="vertical">\n    <scrollareathumb />\n  </scrollareascrollbar>\n  <scrollareascrollbar orientation="horizontal">\n    <scrollareathumb />\n  </scrollareascrollbar>\n</scrollarea>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### scrollarea\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "type", default: "\\"hover\\"", type: "\\"hover\\" | \\"always\\"", description: "\uCEE4\uC2A4\uD140 \uC2A4\uD06C\uB864\uBC14\uAC00 \uBCF4\uC774\uB294 \uC2DC\uC810." }\n    ]}\n  />\n</div>\n### scrollareaviewport\n\n\uBDF0\uD3EC\uD2B8 \uCEE8\uD14C\uC774\uB108(\uC2A4\uD06C\uB864 \uC601\uC5ED).\n\n\uAC01 \uCD95\uC740 \uD574\uB2F9 `scrollareascrollbar`\uB97C \uC120\uC5B8\uD588\uC744 \uB54C\uB9CC \uC2A4\uD06C\uB864\uB429\uB2C8\uB2E4. \uB530\uB77C\uC11C \uAC00\uB85C \uC804\uC6A9 \uC601\uC5ED\uC5D0\uC11C\uB294 \uC138\uB85C \uD720 \uC81C\uC2A4\uCC98\uAC00 \uC601\uC5ED\uC5D0 \uAC07\uD788\uC9C0 \uC54A\uACE0 \uD398\uC774\uC9C0 \uC2A4\uD06C\uB864\uB85C \uC804\uB2EC\uB429\uB2C8\uB2E4. \uBDF0\uD3EC\uD2B8\uB294 \uB0B4\uC6A9\uC774 \uC2E4\uC81C\uB85C \uB118\uCE60 \uB54C\uB9CC \uD0ED \uC2A4\uD1B1\uC774 \uB429\uB2C8\uB2E4.\n\n### scrollareascrollbar\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "orientation", default: "\\"vertical\\"", type: "\\"vertical\\" | \\"horizontal\\"", description: "\uC2A4\uD06C\uB864\uBC14 \uBC29\uD5A5." }\n    ]}\n  />\n</div>\n### scrollareathumb\n\n\uC2A4\uD06C\uB864\uBC14 \uC378(\uB4DC\uB798\uADF8 \uD578\uB4E4).\n\n'
+    },
+    {
+      slug: "ko/components/search-field",
+      href: "/ko/components/search-field/",
+      title: "Search Field",
+      description: "\uC9C0\uC6B0\uAE30 \uC561\uC158\uC774 \uC788\uB294 \uAC80\uC0C9 \uC785\uB825\uC5D0 \uB9DE\uCD98 \uCEE8\uD2B8\uB864.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SearchFieldPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="search-field" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<SearchField value={query} onValueChange={setQuery} />\n\n<SearchField\n  value={searchTerm}\n  onValueChange={setSearchTerm}\n  appearance="filled"\n  aria-label="Search products"\n/>\n\n<SearchField appearance="plain" defaultValue="initial query" />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### SearchField\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uCFFC\uB9AC \uBB38\uC790\uC5F4." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uCFFC\uB9AC." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uCFFC\uB9AC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "appearance", default: "\\"filled\\"", type: "\\"filled\\" | \\"plain\\"", description: "\uC2DC\uAC01 \uC2A4\uD0C0\uC77C: filled(\uB2E8\uB3C5) \uB610\uB294 plain(\uC870\uD569 \uD45C\uBA74\uC6A9)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uAC80\uC0C9 \uC785\uB825\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### SearchFieldIcon\n\n\uAC80\uC0C9 \uC544\uC774\uCF58 \uC2AC\uB86F(\uAE30\uBCF8: \uAC80\uC0C9 \uAE00\uB9AC\uD504).\n\n### SearchFieldInput\n\n\uC785\uB825 \uC694\uC18C.\n\n### SearchFieldClear\n\n\uC9C0\uC6B0\uAE30 \uBC84\uD2BC(\uAE30\uBCF8: dismiss \uAE00\uB9AC\uD504).',
+      searchText: 'search field \uC9C0\uC6B0\uAE30 \uC561\uC158\uC774 \uC788\uB294 \uAC80\uC0C9 \uC785\uB825\uC5D0 \uB9DE\uCD98 \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n  <searchfieldpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="search-field" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<searchfield value={query} onvaluechange={setquery} />\n\n<searchfield\n  value={searchterm}\n  onvaluechange={setsearchterm}\n  appearance="filled"\n  aria-label="search products"\n/>\n\n<searchfield appearance="plain" defaultvalue="initial query" />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### searchfield\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uCFFC\uB9AC \uBB38\uC790\uC5F4." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uCFFC\uB9AC." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uCFFC\uB9AC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "appearance", default: "\\"filled\\"", type: "\\"filled\\" | \\"plain\\"", description: "\uC2DC\uAC01 \uC2A4\uD0C0\uC77C: filled(\uB2E8\uB3C5) \uB610\uB294 plain(\uC870\uD569 \uD45C\uBA74\uC6A9)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." },\n    { prop: "aria-label", default: "\u2014", type: "string", description: "\uAC80\uC0C9 \uC785\uB825\uC758 \uC811\uADFC \uAC00\uB2A5\uD55C \uC774\uB984." }\n    ]}\n  />\n</div>\n### searchfieldicon\n\n\uAC80\uC0C9 \uC544\uC774\uCF58 \uC2AC\uB86F(\uAE30\uBCF8: \uAC80\uC0C9 \uAE00\uB9AC\uD504).\n\n### searchfieldinput\n\n\uC785\uB825 \uC694\uC18C.\n\n### searchfieldclear\n\n\uC9C0\uC6B0\uAE30 \uBC84\uD2BC(\uAE30\uBCF8: dismiss \uAE00\uB9AC\uD504).\n\n'
+    },
+    {
+      slug: "ko/components/segmented-control",
+      href: "/ko/components/segmented-control/",
+      title: "Segmented Control",
+      description: "\uC0C1\uD638 \uBC30\uD0C0\uC801 \uC635\uC158\uC758 \uC120\uD615 \uC9D1\uD569.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SegmentedControlPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<SegmentedControl value={view} onValueChange={setView}>\n  <SegmentedControlItem value="grid">Grid</SegmentedControlItem>\n  <SegmentedControlItem value="list">List</SegmentedControlItem>\n</SegmentedControl>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### SegmentedControl\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### SegmentedControlItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'segmented control \uC0C1\uD638 \uBC30\uD0C0\uC801 \uC635\uC158\uC758 \uC120\uD615 \uC9D1\uD569. <div class="not-content my-6">\n  <segmentedcontrolpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="segmented-control" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="segmented-control" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<segmentedcontrol value={view} onvaluechange={setview}>\n  <segmentedcontrolitem value="grid">grid</segmentedcontrolitem>\n  <segmentedcontrolitem value="list">list</segmentedcontrolitem>\n</segmentedcontrol>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### segmentedcontrol\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### segmentedcontrolitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC774 \uC635\uC158\uC758 \uACE0\uC720 \uAC12(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uC635\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/select",
+      href: "/ko/components/select/",
+      title: "Select",
+      description: "\uBAA9\uB85D\uC5D0\uC11C \uACE0\uB974\uB294 \uB4DC\uB86D\uB2E4\uC6B4 \uC120\uD0DD \uCEE8\uD2B8\uB864.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SelectPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="select" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="select" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Select value={country} onValueChange={setCountry}>\n  <SelectTrigger>\n    <SelectValue placeholder="Select a country" />\n  </SelectTrigger>\n  <SelectContent>\n    <SelectItem value="us">United States</SelectItem>\n    <SelectItem value="ca">Canada</SelectItem>\n    <SelectItem value="uk">United Kingdom</SelectItem>\n  </SelectContent>\n</Select>\n\n<Select size="lg" fullWidth>\n  <SelectTrigger>\n    <SelectValue placeholder="Choose an option" />\n  </SelectTrigger>\n  <SelectContent>\n    <SelectGroup>\n      <SelectLabel>Fruits</SelectLabel>\n      <SelectItem value="apple">Apple</SelectItem>\n      <SelectItem value="banana">Banana</SelectItem>\n    </SelectGroup>\n    <SelectSeparator />\n    <SelectItem value="other">Other</SelectItem>\n  </SelectContent>\n</Select>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Select\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "placeholder", default: "\u2014", type: "string", description: "\uD50C\uB808\uC774\uC2A4\uD640\uB354 \uD14D\uC2A4\uD2B8." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uB192\uC774 \uD2F0\uC5B4." },\n    { prop: "fullWidth", default: "false", type: "boolean", description: "\uBD80\uBAA8 \uC804\uCCB4 \uB108\uBE44\uB85C \uB298\uC5B4\uB0A9\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### SelectTrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4\uC744 \uC5EC\uB294 \uBC84\uD2BC.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "appearance", default: "\\"filled\\"", type: "\\"filled\\" | \\"plain\\"", description: "\uC870\uD569 \uD45C\uBA74\uC6A9 \uD544\uB4DC \uD06C\uB86C vs flush \uD2B8\uB9AC\uAC70(Footer \uB85C\uCF00\uC77C, Calendar \uCEA1\uC158)." }\n    ]}\n  />\n</div>\n\n### SelectValue\n\n\uC120\uD0DD\uB41C \uAC12 \uB610\uB294 \uD50C\uB808\uC774\uC2A4\uD640\uB354\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4.\n\n### SelectContent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCEE8\uD14C\uC774\uB108.\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "position", default: "\\"item-aligned\\"", type: "\\"item-aligned\\" | \\"popper\\"", description: "\uD3EC\uC9C0\uC154\uB2DD \uC804\uB7B5." }\n    ]}\n  />\n</div>\n### SelectItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uD56D\uBAA9 \uAC12(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uD56D\uBAA9\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### SelectGroup\n\n\uAD00\uB828 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### SelectLabel\n\n\uADF8\uB8F9 \uB808\uC774\uBE14.\n\n### SelectSeparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.',
+      searchText: 'select \uBAA9\uB85D\uC5D0\uC11C \uACE0\uB974\uB294 \uB4DC\uB86D\uB2E4\uC6B4 \uC120\uD0DD \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n  <selectpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="select" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="select" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<select value={country} onvaluechange={setcountry}>\n  <selecttrigger>\n    <selectvalue placeholder="select a country" />\n  </selecttrigger>\n  <selectcontent>\n    <selectitem value="us">united states</selectitem>\n    <selectitem value="ca">canada</selectitem>\n    <selectitem value="uk">united kingdom</selectitem>\n  </selectcontent>\n</select>\n\n<select size="lg" fullwidth>\n  <selecttrigger>\n    <selectvalue placeholder="choose an option" />\n  </selecttrigger>\n  <selectcontent>\n    <selectgroup>\n      <selectlabel>fruits</selectlabel>\n      <selectitem value="apple">apple</selectitem>\n      <selectitem value="banana">banana</selectitem>\n    </selectgroup>\n    <selectseparator />\n    <selectitem value="other">other</selectitem>\n  </selectcontent>\n</select>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### select\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uAC12." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uAC12." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uC120\uD0DD \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "placeholder", default: "\u2014", type: "string", description: "\uD50C\uB808\uC774\uC2A4\uD640\uB354 \uD14D\uC2A4\uD2B8." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uB192\uC774 \uD2F0\uC5B4." },\n    { prop: "fullwidth", default: "false", type: "boolean", description: "\uBD80\uBAA8 \uC804\uCCB4 \uB108\uBE44\uB85C \uB298\uC5B4\uB0A9\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### selecttrigger\n\n\uB4DC\uB86D\uB2E4\uC6B4\uC744 \uC5EC\uB294 \uBC84\uD2BC.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "appearance", default: "\\"filled\\"", type: "\\"filled\\" | \\"plain\\"", description: "\uC870\uD569 \uD45C\uBA74\uC6A9 \uD544\uB4DC \uD06C\uB86C vs flush \uD2B8\uB9AC\uAC70(footer \uB85C\uCF00\uC77C, calendar \uCEA1\uC158)." }\n    ]}\n  />\n</div>\n\n### selectvalue\n\n\uC120\uD0DD\uB41C \uAC12 \uB610\uB294 \uD50C\uB808\uC774\uC2A4\uD640\uB354\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4.\n\n### selectcontent\n\n\uB4DC\uB86D\uB2E4\uC6B4 \uD328\uB110 \uCEE8\uD14C\uC774\uB108.\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "position", default: "\\"item-aligned\\"", type: "\\"item-aligned\\" | \\"popper\\"", description: "\uD3EC\uC9C0\uC154\uB2DD \uC804\uB7B5." }\n    ]}\n  />\n</div>\n### selectitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uD56D\uBAA9 \uAC12(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uD56D\uBAA9\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### selectgroup\n\n\uAD00\uB828 \uD56D\uBAA9\uC744 \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### selectlabel\n\n\uADF8\uB8F9 \uB808\uC774\uBE14.\n\n### selectseparator\n\n\uD56D\uBAA9 \uC0AC\uC774 \uC2DC\uAC01\uC801 \uAD6C\uBD84\uC120.\n\n'
+    },
+    {
+      slug: "ko/components/sidebar",
+      href: "/ko/components/sidebar/",
+      title: "Sidebar",
+      description: "\uC811\uC744 \uC218 \uC788\uB294 \uC138\uB85C \uB0B4\uBE44\uAC8C\uC774\uC158 \uB4DC\uB85C\uC5B4/\uC0AC\uC774\uB4DC\uBC14.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SidebarPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="sidebar" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Sidebar>\n  <SidebarHeader>\n    <SidebarBrand>\n      <Logo />\n      My App\n    </SidebarBrand>\n  </SidebarHeader>\n  <SidebarContent>\n    <SidebarNav>\n      <SidebarGroup>\n        <SidebarGroupLabel>Main</SidebarGroupLabel>\n        <SidebarLink href="/" active>Dashboard</SidebarLink>\n        <SidebarLink href="/projects">Projects</SidebarLink>\n        <SidebarLink href="/tasks">Tasks</SidebarLink>\n      </SidebarGroup>\n      <SidebarGroup>\n        <SidebarGroupLabel>Settings</SidebarGroupLabel>\n        <SidebarLink href="/settings">Preferences</SidebarLink>\n        <SidebarLink href="/profile">Profile</SidebarLink>\n      </SidebarGroup>\n    </SidebarNav>\n  </SidebarContent>\n  <SidebarFooter>\n    <p>\xA9 2024</p>\n  </SidebarFooter>\n</Sidebar>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Sidebar\n\n\uB8E8\uD2B8 \uC0AC\uC774\uB4DC\uBC14 \uCEE8\uD14C\uC774\uB108(`<aside>` \uC694\uC18C).\n\n### SidebarHeader\n\n\uD5E4\uB354 \uC139\uC158.\n\n### SidebarBrand\n\n\uBE0C\uB79C\uB4DC/\uB85C\uACE0 \uC601\uC5ED.\n\n### SidebarContent\n\n\uBA54\uC778 \uCF58\uD150\uCE20 \uC601\uC5ED.\n\n### SidebarNav\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### SidebarGroup\n\n\uAD00\uB828 \uB9C1\uD06C\uB97C \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### SidebarGroupLabel\n\n\uADF8\uB8F9 \uB808\uC774\uBE14.\n\n### SidebarLink\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### SidebarFooter\n\n\uD478\uD130 \uC139\uC158.\n\n### Sidebar peek (\uC811\uD78C \uC0C1\uD0DC \uD638\uBC84)\n\n\uB3C4\uD0B9\uB41C \uC0AC\uC774\uB4DC\uBC14\uAC00 \uC811\uD600 \uC788\uC744 \uB54C\uC758 \uC870\uD569\uD615 \uD50C\uB77C\uC774\uC544\uC6C3 \u2014 \uAC00\uC7A5\uC790\uB9AC \uD638\uBC84 \uC2DC \uBA54\uC778 \uC601\uC5ED \uC704\uC5D0 \uB5A0 \uC788\uB294 \uD328\uB110\uC774 \uB098\uD0C0\uB0A9\uB2C8\uB2E4(\uCF58\uD150\uCE20\uB294 \uB9AC\uD50C\uB85C\uC6B0\uB418\uC9C0 \uC54A\uC74C).\n\n```tsx\n<SidebarPeek enabled={collapsed} widthPercent={28} mode="contained" onPin={expand}>\n  <SidebarPeekEdge />\n  <SidebarPeekPanel>\n    <SidebarPeekPin>{/* pin control */}</SidebarPeekPin>\n    <Sidebar>...</Sidebar>\n  </SidebarPeekPanel>\n  <SidebarPeekInset>{/* main + toggle */}</SidebarPeekInset>\n</SidebarPeek>\n```\n\npeek \uB808\uC774\uC5B4\uB97C \uACE0\uC815 \uC571 \uD5E4\uB354 \uC544\uB798\uC5D0 \uB9DE\uCD9C \uB54C\uB294 `mode="viewport"`\uC640 `--refineui-sidebar-peek-viewport-offset`\uC744 \uC0AC\uC6A9\uD558\uC138\uC694.',
+      searchText: 'sidebar \uC811\uC744 \uC218 \uC788\uB294 \uC138\uB85C \uB0B4\uBE44\uAC8C\uC774\uC158 \uB4DC\uB85C\uC5B4/\uC0AC\uC774\uB4DC\uBC14. <div class="not-content my-6">\n  <sidebarpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="sidebar" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<sidebar>\n  <sidebarheader>\n    <sidebarbrand>\n      <logo />\n      my app\n    </sidebarbrand>\n  </sidebarheader>\n  <sidebarcontent>\n    <sidebarnav>\n      <sidebargroup>\n        <sidebargrouplabel>main</sidebargrouplabel>\n        <sidebarlink href="/" active>dashboard</sidebarlink>\n        <sidebarlink href="/projects">projects</sidebarlink>\n        <sidebarlink href="/tasks">tasks</sidebarlink>\n      </sidebargroup>\n      <sidebargroup>\n        <sidebargrouplabel>settings</sidebargrouplabel>\n        <sidebarlink href="/settings">preferences</sidebarlink>\n        <sidebarlink href="/profile">profile</sidebarlink>\n      </sidebargroup>\n    </sidebarnav>\n  </sidebarcontent>\n  <sidebarfooter>\n    <p>\xA9 2024</p>\n  </sidebarfooter>\n</sidebar>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### sidebar\n\n\uB8E8\uD2B8 \uC0AC\uC774\uB4DC\uBC14 \uCEE8\uD14C\uC774\uB108(`<aside>` \uC694\uC18C).\n\n### sidebarheader\n\n\uD5E4\uB354 \uC139\uC158.\n\n### sidebarbrand\n\n\uBE0C\uB79C\uB4DC/\uB85C\uACE0 \uC601\uC5ED.\n\n### sidebarcontent\n\n\uBA54\uC778 \uCF58\uD150\uCE20 \uC601\uC5ED.\n\n### sidebarnav\n\n\uB0B4\uBE44\uAC8C\uC774\uC158 \uCEE8\uD14C\uC774\uB108(`<nav>` \uC694\uC18C).\n\n### sidebargroup\n\n\uAD00\uB828 \uB9C1\uD06C\uB97C \uADF8\uB8F9\uD654\uD569\uB2C8\uB2E4.\n\n### sidebargrouplabel\n\n\uADF8\uB8F9 \uB808\uC774\uBE14.\n\n### sidebarlink\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "active", default: "false", type: "boolean", description: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD569\uB2C8\uB2E4(`aria-current=\\"page\\"`)." }\n    ]}\n  />\n</div>\n### sidebarfooter\n\n\uD478\uD130 \uC139\uC158.\n\n### sidebar peek (\uC811\uD78C \uC0C1\uD0DC \uD638\uBC84)\n\n\uB3C4\uD0B9\uB41C \uC0AC\uC774\uB4DC\uBC14\uAC00 \uC811\uD600 \uC788\uC744 \uB54C\uC758 \uC870\uD569\uD615 \uD50C\uB77C\uC774\uC544\uC6C3 \u2014 \uAC00\uC7A5\uC790\uB9AC \uD638\uBC84 \uC2DC \uBA54\uC778 \uC601\uC5ED \uC704\uC5D0 \uB5A0 \uC788\uB294 \uD328\uB110\uC774 \uB098\uD0C0\uB0A9\uB2C8\uB2E4(\uCF58\uD150\uCE20\uB294 \uB9AC\uD50C\uB85C\uC6B0\uB418\uC9C0 \uC54A\uC74C).\n\n```tsx\n<sidebarpeek enabled={collapsed} widthpercent={28} mode="contained" onpin={expand}>\n  <sidebarpeekedge />\n  <sidebarpeekpanel>\n    <sidebarpeekpin>{/* pin control */}</sidebarpeekpin>\n    <sidebar>...</sidebar>\n  </sidebarpeekpanel>\n  <sidebarpeekinset>{/* main + toggle */}</sidebarpeekinset>\n</sidebarpeek>\n```\n\npeek \uB808\uC774\uC5B4\uB97C \uACE0\uC815 \uC571 \uD5E4\uB354 \uC544\uB798\uC5D0 \uB9DE\uCD9C \uB54C\uB294 `mode="viewport"`\uC640 `--refineui-sidebar-peek-viewport-offset`\uC744 \uC0AC\uC6A9\uD558\uC138\uC694.\n\n'
+    },
+    {
+      slug: "ko/components/skeleton",
+      href: "/ko/components/skeleton/",
+      title: "Skeleton",
+      description: "\uB370\uC774\uD130 \uB85C\uB529 \uC911 \uD50C\uB808\uC774\uC2A4\uD640\uB354 \uC560\uB2C8\uBA54\uC774\uC158.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SkeletonPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="skeleton" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Skeleton width={200} height={20} />\n\n<Skeleton width="100%" height={100} shape="circle" />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "width", default: "\u2014", type: "number | string", description: "\uC2A4\uCF08\uB808\uD1A4 \uB108\uBE44(\uD53D\uC140 \uB610\uB294 CSS \uAC12)." },\n    { prop: "height", default: "\u2014", type: "number | string", description: "\uC2A4\uCF08\uB808\uD1A4 \uB192\uC774(\uD53D\uC140 \uB610\uB294 CSS \uAC12)." },\n    { prop: "shape", default: "\\"rectangle\\"", type: "\\"rectangle\\" | \\"circle\\"", description: "\uC2A4\uCF08\uB808\uD1A4 \uBAA8\uC591." }\n    ]}\n  />\n</div>',
+      searchText: 'skeleton \uB370\uC774\uD130 \uB85C\uB529 \uC911 \uD50C\uB808\uC774\uC2A4\uD640\uB354 \uC560\uB2C8\uBA54\uC774\uC158. <div class="not-content my-6">\n  <skeletonpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="skeleton" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<skeleton width={200} height={20} />\n\n<skeleton width="100%" height={100} shape="circle" />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "width", default: "\u2014", type: "number | string", description: "\uC2A4\uCF08\uB808\uD1A4 \uB108\uBE44(\uD53D\uC140 \uB610\uB294 css \uAC12)." },\n    { prop: "height", default: "\u2014", type: "number | string", description: "\uC2A4\uCF08\uB808\uD1A4 \uB192\uC774(\uD53D\uC140 \uB610\uB294 css \uAC12)." },\n    { prop: "shape", default: "\\"rectangle\\"", type: "\\"rectangle\\" | \\"circle\\"", description: "\uC2A4\uCF08\uB808\uD1A4 \uBAA8\uC591." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/slider",
+      href: "/ko/components/slider/",
+      title: "Slider",
+      description: "\uC22B\uC790 \uC2A4\uCF00\uC77C\uC5D0\uC11C \uBC94\uC704\uB97C \uACE0\uB974\uB294 \uCEE8\uD2B8\uB864.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SliderDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="slider" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Slider min={0} max={100} value={volume} onChange={setVolume} />\n\n<Slider\n  min={0}\n  max={10}\n  step={1}\n  value={rating}\n  onChange={setRating}\n  size="md"\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uAC12." },\n    { prop: "onChange", default: "\u2014", type: "(value: number) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "min", default: "0", type: "number", description: "\uCD5C\uC19F\uAC12." },\n    { prop: "max", default: "100", type: "number", description: "\uCD5C\uB313\uAC12." },\n    { prop: "step", default: "1", type: "number", description: "\uB2E8\uACC4 \uC99D\uBD84." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\"", description: "\uB808\uC77C \uB450\uAED8: sm(2px) \uB610\uB294 md(4px)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'slider \uC22B\uC790 \uC2A4\uCF00\uC77C\uC5D0\uC11C \uBC94\uC704\uB97C \uACE0\uB974\uB294 \uCEE8\uD2B8\uB864. <div class="not-content my-6">\n  <sliderdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="slider" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<slider min={0} max={100} value={volume} onchange={setvolume} />\n\n<slider\n  min={0}\n  max={10}\n  step={1}\n  value={rating}\n  onchange={setrating}\n  size="md"\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uAC12." },\n    { prop: "onchange", default: "\u2014", type: "(value: number) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "min", default: "0", type: "number", description: "\uCD5C\uC19F\uAC12." },\n    { prop: "max", default: "100", type: "number", description: "\uCD5C\uB313\uAC12." },\n    { prop: "step", default: "1", type: "number", description: "\uB2E8\uACC4 \uC99D\uBD84." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\"", description: "\uB808\uC77C \uB450\uAED8: sm(2px) \uB610\uB294 md(4px)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/spin-button",
+      href: "/ko/components/spin-button/",
+      title: "Spin Button",
+      description: "\uC99D\uBD84 \uBCC0\uACBD\uC6A9 \uC22B\uC790 \uC2A4\uD14C\uD37C \uC785\uB825.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SpinButtonDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="spin-button" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<SpinButton value={quantity} onChange={setQuantity} />\n\n<SpinButton\n  value={amount}\n  onChange={setAmount}\n  min={0}\n  max={100}\n  step={5}\n  placeholder="Enter amount"\n  size="lg"\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uAC12(\uD544\uC218)." },\n    { prop: "onChange", default: "\u2014", type: "(value: number) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC(\uD544\uC218)." },\n    { prop: "min", default: "\u2014", type: "number", description: "\uD5C8\uC6A9 \uCD5C\uC19F\uAC12." },\n    { prop: "max", default: "\u2014", type: "number", description: "\uD5C8\uC6A9 \uCD5C\uB313\uAC12." },\n    { prop: "step", default: "1", type: "number", description: "\uB2E8\uACC4 \uC99D\uBD84." },\n    { prop: "placeholder", default: "\u2014", type: "string", description: "\uD50C\uB808\uC774\uC2A4\uD640\uB354 \uD14D\uC2A4\uD2B8." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uB192\uC774 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'spin button \uC99D\uBD84 \uBCC0\uACBD\uC6A9 \uC22B\uC790 \uC2A4\uD14C\uD37C \uC785\uB825. <div class="not-content my-6">\n  <spinbuttondemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="spin-button" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<spinbutton value={quantity} onchange={setquantity} />\n\n<spinbutton\n  value={amount}\n  onchange={setamount}\n  min={0}\n  max={100}\n  step={5}\n  placeholder="enter amount"\n  size="lg"\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "number", description: "\uC81C\uC5B4\uD615 \uAC12(\uD544\uC218)." },\n    { prop: "onchange", default: "\u2014", type: "(value: number) => void", description: "\uAC12 \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC(\uD544\uC218)." },\n    { prop: "min", default: "\u2014", type: "number", description: "\uD5C8\uC6A9 \uCD5C\uC19F\uAC12." },\n    { prop: "max", default: "\u2014", type: "number", description: "\uD5C8\uC6A9 \uCD5C\uB313\uAC12." },\n    { prop: "step", default: "1", type: "number", description: "\uB2E8\uACC4 \uC99D\uBD84." },\n    { prop: "placeholder", default: "\u2014", type: "string", description: "\uD50C\uB808\uC774\uC2A4\uD640\uB354 \uD14D\uC2A4\uD2B8." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCEE8\uD2B8\uB864 \uB192\uC774 \uD2F0\uC5B4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/spinner",
+      href: "/ko/components/spinner/",
+      title: "Spinner",
+      description: "\uBE44\uB3D9\uAE30 \uC561\uC158\uC6A9 \uB85C\uB529 \uC778\uB514\uCF00\uC774\uD130 \uC2A4\uD53C\uB108.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SpinnerPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="spinner" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="spinner" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Spinner size="md" />\n\n<Spinner size="lg" label="Loading..." labelPosition="right" />\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "size", default: "\u2014", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\" | \\"xxl\\"", description: "\uC2A4\uD53C\uB108 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "label", default: "\u2014", type: "ReactNode", description: "\uC120\uD0DD\uC801 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8 \uB610\uB294 \uC694\uC18C." },\n    { prop: "labelPosition", default: "\u2014", type: "\\"left\\" | \\"right\\" | \\"top\\" | \\"bottom\\"", description: "\uC2A4\uD53C\uB108 \uAE30\uC900 \uB808\uC774\uBE14 \uC704\uCE58." }\n    ]}\n  />\n</div>',
+      searchText: 'spinner \uBE44\uB3D9\uAE30 \uC561\uC158\uC6A9 \uB85C\uB529 \uC778\uB514\uCF00\uC774\uD130 \uC2A4\uD53C\uB108. <div class="not-content my-6">\n  <spinnerpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="spinner" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="spinner" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<spinner size="md" />\n\n<spinner size="lg" label="loading..." labelposition="right" />\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "size", default: "\u2014", type: "\\"xs\\" | \\"sm\\" | \\"md\\" | \\"lg\\" | \\"xl\\" | \\"xxl\\"", description: "\uC2A4\uD53C\uB108 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "label", default: "\u2014", type: "reactnode", description: "\uC120\uD0DD\uC801 \uB808\uC774\uBE14 \uD14D\uC2A4\uD2B8 \uB610\uB294 \uC694\uC18C." },\n    { prop: "labelposition", default: "\u2014", type: "\\"left\\" | \\"right\\" | \\"top\\" | \\"bottom\\"", description: "\uC2A4\uD53C\uB108 \uAE30\uC900 \uB808\uC774\uBE14 \uC704\uCE58." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/stack",
+      href: "/ko/components/stack/",
+      title: "Stack",
+      description: "Foundation gap \uD1A0\uD070\uC744 \uC4F0\uB294 \uB2E8\uC77C \uCD95 flex \uB808\uC774\uC544\uC6C3.",
+      category: "guides",
+      content: '`Stack`\uC740 spacing \uD1A0\uD070 `gap`\uC73C\uB85C \uC790\uC2DD\uC744 \uD589 \uB610\uB294 \uC5F4\uB85C \uBC30\uCE58\uD569\uB2C8\uB2E4. \uAE30\uBCF8 \uBC29\uD5A5\uC740 `column`\uC785\uB2C8\uB2E4.\n\n<div class="not-content my-6">\n  <StackPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="stack" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Stack gap="sizeMedium">\n  <div>Item 1</div>\n  <div>Item 2</div>\n</Stack>\n\n<Stack direction="row" gap="sizeSmall" align="center" justify="between">\n  <Button type="button" variant="outline">Cancel</Button>\n  <Button type="button" variant="primary">Save</Button>\n</Stack>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "ElementType", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "direction", default: "\\"column\\"", type: "\\"row\\" | \\"column\\" | \\"row-reverse\\" | \\"column-reverse\\"", description: "Flex \uBC29\uD5A5." },\n    { prop: "gap", default: "\\"sizeNone\\"", type: "Spacing token", description: "\uC790\uC2DD \uC0AC\uC774 gap." },\n    { prop: "align", default: "\u2014", type: "\\"start\\" | \\"center\\" | \\"end\\" | \\"stretch\\" | \\"baseline\\"", description: "\uAD50\uCC28\uCD95 \uC815\uB82C." },\n    { prop: "justify", default: "\u2014", type: "\\"start\\" | \\"center\\" | \\"end\\" | \\"between\\" | \\"around\\" | \\"evenly\\"", description: "\uC8FC\uCD95 justify." },\n    { prop: "wrap", default: "\u2014", type: "boolean | wrap token", description: "\uC904\uBC14\uAFC8 \uB3D9\uC791." },\n    { prop: "inline", default: "false", type: "boolean", description: "`inline-flex`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'stack foundation gap \uD1A0\uD070\uC744 \uC4F0\uB294 \uB2E8\uC77C \uCD95 flex \uB808\uC774\uC544\uC6C3. `stack`\uC740 spacing \uD1A0\uD070 `gap`\uC73C\uB85C \uC790\uC2DD\uC744 \uD589 \uB610\uB294 \uC5F4\uB85C \uBC30\uCE58\uD569\uB2C8\uB2E4. \uAE30\uBCF8 \uBC29\uD5A5\uC740 `column`\uC785\uB2C8\uB2E4.\n\n<div class="not-content my-6">\n  <stackpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="stack" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<stack gap="sizemedium">\n  <div>item 1</div>\n  <div>item 2</div>\n</stack>\n\n<stack direction="row" gap="sizesmall" align="center" justify="between">\n  <button type="button" variant="outline">cancel</button>\n  <button type="button" variant="primary">save</button>\n</stack>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "as", default: "\\"div\\"", type: "elementtype", description: "\uB8E8\uD2B8 \uC694\uC18C." },\n    { prop: "direction", default: "\\"column\\"", type: "\\"row\\" | \\"column\\" | \\"row-reverse\\" | \\"column-reverse\\"", description: "flex \uBC29\uD5A5." },\n    { prop: "gap", default: "\\"sizenone\\"", type: "spacing token", description: "\uC790\uC2DD \uC0AC\uC774 gap." },\n    { prop: "align", default: "\u2014", type: "\\"start\\" | \\"center\\" | \\"end\\" | \\"stretch\\" | \\"baseline\\"", description: "\uAD50\uCC28\uCD95 \uC815\uB82C." },\n    { prop: "justify", default: "\u2014", type: "\\"start\\" | \\"center\\" | \\"end\\" | \\"between\\" | \\"around\\" | \\"evenly\\"", description: "\uC8FC\uCD95 justify." },\n    { prop: "wrap", default: "\u2014", type: "boolean | wrap token", description: "\uC904\uBC14\uAFC8 \uB3D9\uC791." },\n    { prop: "inline", default: "false", type: "boolean", description: "`inline-flex`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/stepper",
+      href: "/ko/components/stepper/",
+      title: "Stepper",
+      description: "\uC778\uB514\uCF00\uC774\uD130\uC640 \uC81C\uBAA9\uC774 \uC788\uB294 \uB2E4\uB2E8\uACC4 \uD50C\uB85C\uC6B0\uC6A9 \uB2E8\uACC4 \uBAA9\uB85D.",
+      category: "guides",
+      content: '`Stepper`\uB294 \uC21C\uC11C \uC788\uB294 \uB2E8\uACC4\uC758 \uC9C4\uD589\uC744 \uCD94\uC801\uD569\uB2C8\uB2E4. \uC704\uC800\uB4DC\xB7\uC628\uBCF4\uB529\uC5D0 \uC0AC\uC6A9\uD558\uC138\uC694. \uC120\uD615 \uC9C4\uD589\uB9CC \uD544\uC694\uD558\uBA74 [Progress](/ko/components/progress/) \uB610\uB294 [ProgressStepper](/ko/components/progress-stepper/)\uB97C \uAD8C\uC7A5\uD569\uB2C8\uB2E4.\n\n<div class="not-content my-6">\n  <StepperDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="stepper" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Stepper value={step} onValueChange={setStep}>\n  <StepperList>\n    <StepperItem value={0}>\n      <StepperIndicator>1</StepperIndicator>\n      <StepperTitle>Account</StepperTitle>\n      <StepperDescription>Profile & email</StepperDescription>\n    </StepperItem>\n    <StepperSeparator />\n    <StepperItem value={1}>\n      <StepperIndicator>2</StepperIndicator>\n      <StepperTitle>Plan</StepperTitle>\n    </StepperItem>\n  </StepperList>\n</Stepper>\n```\n\n## \uAD00\uB828\n\n- [Progress stepper](/ko/components/progress-stepper/)',
+      searchText: 'stepper \uC778\uB514\uCF00\uC774\uD130\uC640 \uC81C\uBAA9\uC774 \uC788\uB294 \uB2E4\uB2E8\uACC4 \uD50C\uB85C\uC6B0\uC6A9 \uB2E8\uACC4 \uBAA9\uB85D. `stepper`\uB294 \uC21C\uC11C \uC788\uB294 \uB2E8\uACC4\uC758 \uC9C4\uD589\uC744 \uCD94\uC801\uD569\uB2C8\uB2E4. \uC704\uC800\uB4DC\xB7\uC628\uBCF4\uB529\uC5D0 \uC0AC\uC6A9\uD558\uC138\uC694. \uC120\uD615 \uC9C4\uD589\uB9CC \uD544\uC694\uD558\uBA74 [progress](/ko/components/progress/) \uB610\uB294 [progressstepper](/ko/components/progress-stepper/)\uB97C \uAD8C\uC7A5\uD569\uB2C8\uB2E4.\n\n<div class="not-content my-6">\n  <stepperdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="stepper" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<stepper value={step} onvaluechange={setstep}>\n  <stepperlist>\n    <stepperitem value={0}>\n      <stepperindicator>1</stepperindicator>\n      <steppertitle>account</steppertitle>\n      <stepperdescription>profile & email</stepperdescription>\n    </stepperitem>\n    <stepperseparator />\n    <stepperitem value={1}>\n      <stepperindicator>2</stepperindicator>\n      <steppertitle>plan</steppertitle>\n    </stepperitem>\n  </stepperlist>\n</stepper>\n```\n\n## \uAD00\uB828\n\n- [progress stepper](/ko/components/progress-stepper/)\n'
+    },
+    {
+      slug: "ko/components/switch",
+      href: "/ko/components/switch/",
+      title: "Switch",
+      description: "\uC124\uC815\uC6A9 \uC989\uC2DC \uD1A0\uAE00 \uC2A4\uC704\uCE58.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <SwitchDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="switch" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="switch" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Switch checked={isEnabled} onCheckedChange={setIsEnabled} />\n\n<Switch\n  checked={darkMode}\n  onCheckedChange={setDarkMode}\n  aria-label="Toggle dark mode"\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "onCheckedChange", default: "\u2014", type: "(checked: boolean) => void", description: "\uCCB4\uD06C \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'switch \uC124\uC815\uC6A9 \uC989\uC2DC \uD1A0\uAE00 \uC2A4\uC704\uCE58. <div class="not-content my-6">\n  <switchdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="switch" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="switch" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<switch checked={isenabled} oncheckedchange={setisenabled} />\n\n<switch\n  checked={darkmode}\n  oncheckedchange={setdarkmode}\n  aria-label="toggle dark mode"\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "checked", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uCCB4\uD06C \uC0C1\uD0DC." },\n    { prop: "oncheckedchange", default: "\u2014", type: "(checked: boolean) => void", description: "\uCCB4\uD06C \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/table",
+      href: "/ko/components/table/",
+      title: "Table",
+      description: "\uAD6C\uC870\uD654\uB41C \uB808\uCF54\uB4DC\uB97C \uC704\uD55C \uB370\uC774\uD130 \uADF8\uB9AC\uB4DC \uD14C\uC774\uBE14.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <TablePreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="table" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Table>\n  <TableCaption>Product inventory</TableCaption>\n  <TableHeader>\n    <TableRow>\n      <TableHead>Product</TableHead>\n      <TableHead>Price</TableHead>\n      <TableHead>Stock</TableHead>\n    </TableRow>\n  </TableHeader>\n  <TableBody>\n    <TableRow>\n      <TableCell>Widget A</TableCell>\n      <TableCell>$19.99</TableCell>\n      <TableCell>52</TableCell>\n    </TableRow>\n    <TableRow>\n      <TableCell>Widget B</TableCell>\n      <TableCell>$29.99</TableCell>\n      <TableCell>12</TableCell>\n    </TableRow>\n  </TableBody>\n  <TableFooter>\n    <TableRow>\n      <TableCell colSpan={2}>Total Items</TableCell>\n      <TableCell>64</TableCell>\n    </TableRow>\n  </TableFooter>\n</Table>\n```\n\n## \uC2A4\uD06C\uB864\n\nTable\uC740 overflow\uB97C \uC9C1\uC811 \uC18C\uC720\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB108\uBE44\uAC00 \uC81C\uD55C\uB420 \uB54C(\uBB38\uC11C \uC5F4, \uD328\uB110) \uB610\uB294 \uB192\uC774\uAC00 \uC81C\uD55C\uB420 \uB54C(\uB2E4\uC774\uC5BC\uB85C\uADF8, \uACE0\uC815 \uB808\uC774\uC544\uC6C3) `ScrollArea`\uC640 \uC870\uD569\uD558\uC138\uC694. \uC2A4\uD14C\uC774\uC9C0\uC5D0 \uB9DE\uB294 \uD45C\uBCF8 \uD504\uB9AC\uBDF0\uB294 \uBCF4\uD1B5 ScrollArea\uB97C \uC0DD\uB7B5\uD569\uB2C8\uB2E4.\n\n```tsx\n<ScrollArea type="hover" className="w-full min-w-0">\n  <ScrollAreaViewport>\n    <Table>\n      <TableHeader>{/* \u2026 */}</TableHeader>\n      <TableBody>{/* \u2026 */}</TableBody>\n    </Table>\n  </ScrollAreaViewport>\n  <ScrollAreaScrollbar orientation="horizontal">\n    <ScrollAreaThumb />\n  </ScrollAreaScrollbar>\n</ScrollArea>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Table\n\n\uB8E8\uD2B8 \uD14C\uC774\uBE14 \uC694\uC18C.\n\n### TableHeader\n\n\uD14C\uC774\uBE14 \uD5E4\uB354 \uC139\uC158(`<thead>`).\n\n### TableBody\n\n\uD14C\uC774\uBE14 \uBCF8\uBB38 \uC139\uC158(`<tbody>`).\n\n### TableFooter\n\n\uD14C\uC774\uBE14 \uD478\uD130 \uC139\uC158(`<tfoot>`).\n\n### TableRow\n\n\uD14C\uC774\uBE14 \uD589(`<tr>`).\n\n### TableHead\n\n\uD5E4\uB354 \uC140(`<th>`).\n\n### TableCell\n\n\uB370\uC774\uD130 \uC140(`<td>`).\n\n### TableCaption\n\n\uC811\uADFC\uC131\uC6A9 \uD14C\uC774\uBE14 \uCEA1\uC158.',
+      searchText: 'table \uAD6C\uC870\uD654\uB41C \uB808\uCF54\uB4DC\uB97C \uC704\uD55C \uB370\uC774\uD130 \uADF8\uB9AC\uB4DC \uD14C\uC774\uBE14. <div class="not-content my-6">\n  <tablepreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="table" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<table>\n  <tablecaption>product inventory</tablecaption>\n  <tableheader>\n    <tablerow>\n      <tablehead>product</tablehead>\n      <tablehead>price</tablehead>\n      <tablehead>stock</tablehead>\n    </tablerow>\n  </tableheader>\n  <tablebody>\n    <tablerow>\n      <tablecell>widget a</tablecell>\n      <tablecell>$19.99</tablecell>\n      <tablecell>52</tablecell>\n    </tablerow>\n    <tablerow>\n      <tablecell>widget b</tablecell>\n      <tablecell>$29.99</tablecell>\n      <tablecell>12</tablecell>\n    </tablerow>\n  </tablebody>\n  <tablefooter>\n    <tablerow>\n      <tablecell colspan={2}>total items</tablecell>\n      <tablecell>64</tablecell>\n    </tablerow>\n  </tablefooter>\n</table>\n```\n\n## \uC2A4\uD06C\uB864\n\ntable\uC740 overflow\uB97C \uC9C1\uC811 \uC18C\uC720\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uB108\uBE44\uAC00 \uC81C\uD55C\uB420 \uB54C(\uBB38\uC11C \uC5F4, \uD328\uB110) \uB610\uB294 \uB192\uC774\uAC00 \uC81C\uD55C\uB420 \uB54C(\uB2E4\uC774\uC5BC\uB85C\uADF8, \uACE0\uC815 \uB808\uC774\uC544\uC6C3) `scrollarea`\uC640 \uC870\uD569\uD558\uC138\uC694. \uC2A4\uD14C\uC774\uC9C0\uC5D0 \uB9DE\uB294 \uD45C\uBCF8 \uD504\uB9AC\uBDF0\uB294 \uBCF4\uD1B5 scrollarea\uB97C \uC0DD\uB7B5\uD569\uB2C8\uB2E4.\n\n```tsx\n<scrollarea type="hover" classname="w-full min-w-0">\n  <scrollareaviewport>\n    <table>\n      <tableheader>{/* \u2026 */}</tableheader>\n      <tablebody>{/* \u2026 */}</tablebody>\n    </table>\n  </scrollareaviewport>\n  <scrollareascrollbar orientation="horizontal">\n    <scrollareathumb />\n  </scrollareascrollbar>\n</scrollarea>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### table\n\n\uB8E8\uD2B8 \uD14C\uC774\uBE14 \uC694\uC18C.\n\n### tableheader\n\n\uD14C\uC774\uBE14 \uD5E4\uB354 \uC139\uC158(`<thead>`).\n\n### tablebody\n\n\uD14C\uC774\uBE14 \uBCF8\uBB38 \uC139\uC158(`<tbody>`).\n\n### tablefooter\n\n\uD14C\uC774\uBE14 \uD478\uD130 \uC139\uC158(`<tfoot>`).\n\n### tablerow\n\n\uD14C\uC774\uBE14 \uD589(`<tr>`).\n\n### tablehead\n\n\uD5E4\uB354 \uC140(`<th>`).\n\n### tablecell\n\n\uB370\uC774\uD130 \uC140(`<td>`).\n\n### tablecaption\n\n\uC811\uADFC\uC131\uC6A9 \uD14C\uC774\uBE14 \uCEA1\uC158.\n'
+    },
+    {
+      slug: "ko/components/tabs",
+      href: "/ko/components/tabs/",
+      title: "Tabs",
+      description: "\uCF58\uD150\uCE20\uB97C \uBCC4\uB3C4\uC758 \uBDF0 \uD328\uB110\uB85C \uAD6C\uC131\uD569\uB2C8\uB2E4.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <TabsPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="tabs" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="tabs" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Tabs defaultValue="overview">\n  <TabsList>\n    <TabsTrigger value="overview">Overview</TabsTrigger>\n    <TabsTrigger value="analytics">Analytics</TabsTrigger>\n    <TabsTrigger value="settings">Settings</TabsTrigger>\n  </TabsList>\n  <TabsContent value="overview">\n    <p>Overview content</p>\n  </TabsContent>\n  <TabsContent value="analytics">\n    <p>Analytics content</p>\n  </TabsContent>\n  <TabsContent value="settings">\n    <p>Settings content</p>\n  </TabsContent>\n</Tabs>\n\n<Tabs value={activeTab} onValueChange={setActiveTab}>\n  {/* Controlled tabs */}\n</Tabs>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Tabs\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uD65C\uC131 \uD0ED \uAC12." },\n    { prop: "defaultValue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uD65C\uC131 \uD0ED." },\n    { prop: "onValueChange", default: "\u2014", type: "(value: string) => void", description: "\uD65C\uC131 \uD0ED \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### TabsList\n\n\uD0ED \uD2B8\uB9AC\uAC70 \uCEE8\uD14C\uC774\uB108.\n\n### TabsTrigger\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uD0ED \uC2DD\uBCC4\uC790(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uD0ED\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### TabsContent\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC5F0\uACB0\uB41C \uD0ED \uAC12(\uD544\uC218)." }\n    ]}\n  />\n</div>',
+      searchText: 'tabs \uCF58\uD150\uCE20\uB97C \uBCC4\uB3C4\uC758 \uBDF0 \uD328\uB110\uB85C \uAD6C\uC131\uD569\uB2C8\uB2E4. <div class="not-content my-6">\n  <tabspreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="tabs" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="tabs" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<tabs defaultvalue="overview">\n  <tabslist>\n    <tabstrigger value="overview">overview</tabstrigger>\n    <tabstrigger value="analytics">analytics</tabstrigger>\n    <tabstrigger value="settings">settings</tabstrigger>\n  </tabslist>\n  <tabscontent value="overview">\n    <p>overview content</p>\n  </tabscontent>\n  <tabscontent value="analytics">\n    <p>analytics content</p>\n  </tabscontent>\n  <tabscontent value="settings">\n    <p>settings content</p>\n  </tabscontent>\n</tabs>\n\n<tabs value={activetab} onvaluechange={setactivetab}>\n  {/* controlled tabs */}\n</tabs>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### tabs\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC81C\uC5B4\uD615 \uD65C\uC131 \uD0ED \uAC12." },\n    { prop: "defaultvalue", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uD65C\uC131 \uD0ED." },\n    { prop: "onvaluechange", default: "\u2014", type: "(value: string) => void", description: "\uD65C\uC131 \uD0ED \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n### tabslist\n\n\uD0ED \uD2B8\uB9AC\uAC70 \uCEE8\uD14C\uC774\uB108.\n\n### tabstrigger\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uD0ED \uC2DD\uBCC4\uC790(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC774 \uD0ED\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n### tabscontent\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uC5F0\uACB0\uB41C \uD0ED \uAC12(\uD544\uC218)." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/tag",
+      href: "/ko/components/tag/",
+      title: "Tag",
+      description: "\uBD84\uB958 \uD0DC\uADF8 \uB610\uB294 \uD544\uD130 \uCE69.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <TagDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="tag" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="tag" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Chip>Tag Label</Chip>\n\n<Chip variant="filled">Filled</Chip>\n\n<Chip variant="outline" size="sm">Small Tag</Chip>\n\n<Chip onRemove={() => handleRemove()}>\n  Removable\n</Chip>\n\n<Chip avatar={<Avatar src="/user.jpg" />}>\n  With Avatar\n</Chip>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"outline\\" | \\"filled\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCE69 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "avatar", default: "\u2014", type: "ReactNode", description: "\uC120\uD0DD\uC801 \uC55E\uCABD \uC544\uBC14\uD0C0 \uC694\uC18C." },\n    { prop: "onRemove", default: "\u2014", type: "() => void", description: "\uC81C\uACF5\uB418\uBA74 \uC81C\uAC70 \uBC84\uD2BC\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'tag \uBD84\uB958 \uD0DC\uADF8 \uB610\uB294 \uD544\uD130 \uCE69. <div class="not-content my-6">\n  <tagdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="tag" />\n</div>\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="tag" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<chip>tag label</chip>\n\n<chip variant="filled">filled</chip>\n\n<chip variant="outline" size="sm">small tag</chip>\n\n<chip onremove={() => handleremove()}>\n  removable\n</chip>\n\n<chip avatar={<avatar src="/user.jpg" />}>\n  with avatar\n</chip>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"outline\\" | \\"filled\\"", description: "\uC2DC\uAC01\uC801 \uBCC0\uD615 \uC2A4\uD0C0\uC77C." },\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uCE69 \uD06C\uAE30 \uD2F0\uC5B4." },\n    { prop: "avatar", default: "\u2014", type: "reactnode", description: "\uC120\uD0DD\uC801 \uC55E\uCABD \uC544\uBC14\uD0C0 \uC694\uC18C." },\n    { prop: "onremove", default: "\u2014", type: "() => void", description: "\uC81C\uACF5\uB418\uBA74 \uC81C\uAC70 \uBC84\uD2BC\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/textarea",
+      href: "/ko/components/textarea/",
+      title: "Textarea",
+      description: "\uC5EC\uB7EC \uC904 \uD14D\uC2A4\uD2B8 \uC785\uB825 \uD544\uB4DC.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <TextareaPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="textarea" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Textarea placeholder="Enter your comments..." rows={4} />\n\n<Textarea\n  error={hasError}\n  value={message}\n  onChange={(e) => setMessage(e.target.value)}\n  fullWidth\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "error", default: "false", type: "boolean", description: "\uC5D0\uB7EC \uC0C1\uD0DC \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "success", default: "false", type: "boolean", description: "\uC131\uACF5 \uC0C1\uD0DC \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "fullWidth", default: "false", type: "boolean", description: "\uBD80\uBAA8 \uC804\uCCB4 \uB108\uBE44\uB85C \uB298\uC5B4\uB0A9\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>',
+      searchText: 'textarea \uC5EC\uB7EC \uC904 \uD14D\uC2A4\uD2B8 \uC785\uB825 \uD544\uB4DC. <div class="not-content my-6">\n  <textareapreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="textarea" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<textarea placeholder="enter your comments..." rows={4} />\n\n<textarea\n  error={haserror}\n  value={message}\n  onchange={(e) => setmessage(e.target.value)}\n  fullwidth\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "error", default: "false", type: "boolean", description: "\uC5D0\uB7EC \uC0C1\uD0DC \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "success", default: "false", type: "boolean", description: "\uC131\uACF5 \uC0C1\uD0DC \uC2A4\uD0C0\uC77C\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4." },\n    { prop: "fullwidth", default: "false", type: "boolean", description: "\uBD80\uBAA8 \uC804\uCCB4 \uB108\uBE44\uB85C \uB298\uC5B4\uB0A9\uB2C8\uB2E4." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC778\uD130\uB799\uC158\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/toast",
+      href: "/ko/components/toast/",
+      title: "Toast",
+      description: "\uC77C\uC2DC\uC801\uC778 \uC54C\uB9BC \uBA54\uC2DC\uC9C0 \uC624\uBC84\uB808\uC774.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <ToastPreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="toast" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <TokenInspector client:load component="toast" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n// Add Toaster to your app root (one toast at a time by default)\n<Toaster />\n\n// Show a toast \u2014 replaces any currently visible toast\ntoast("Settings saved successfully", {\n  variant: "success",\n  duration: 3000,\n});\n\ntoast("Upload failed", {\n  variant: "error",\n  action: {\n    label: "Retry",\n    onClick: () => retryUpload(),\n  },\n});\n```\n\n\uD1A0\uC2A4\uD2B8\uB97C \uC704\uCABD\uC73C\uB85C \uC2A4\uC640\uC774\uD504\uD558\uAC70\uB098 \uB4DC\uB798\uADF8\uD558\uBA74 \uC77C\uCC0D \uB2EB\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4.\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Toast\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"success\\" | \\"error\\" | \\"warning\\"", description: "Toast \uC2DC\uAC01\uC801 \uBCC0\uD615." },\n    { prop: "message", default: "\u2014", type: "ReactNode", description: "Toast \uBA54\uC2DC\uC9C0." },\n    { prop: "icon", default: "\u2014", type: "ReactNode", description: "\uCEE4\uC2A4\uD140 \uC544\uC774\uCF58 \uC694\uC18C." },\n    { prop: "iconName", default: "\u2014", type: "string", description: "\uC544\uC774\uCF58 \uC774\uB984(icon \uBBF8\uC0AC\uC6A9 \uC2DC)." },\n    { prop: "action", default: "\u2014", type: "ReactNode | ToastAction", description: "\uC561\uC158 \uBC84\uD2BC \uB610\uB294 \uCEE4\uC2A4\uD140 \uC694\uC18C." }\n    ]}\n  />\n</div>\n### Toaster\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "maxToasts", default: "1", type: "number", description: "\uB3D9\uC2DC \uD1A0\uC2A4\uD2B8 \uCD5C\uB300 \uAC1C\uC218. \uAE30\uBCF8\uC740 \uC774\uC804 \uD1A0\uC2A4\uD2B8\uB97C \uB300\uCCB4\uD569\uB2C8\uB2E4." },\n    { prop: "swipeDirections", default: "[\\"top\\"]", type: "(\\"top\\" | \\"right\\" | \\"bottom\\" | \\"left\\")[]", description: "\uC2A4\uC640\uC774\uD504\uB85C \uB2EB\uC744 \uC218 \uC788\uB294 \uBC29\uD5A5." }\n    ]}\n  />\n</div>\n### toast(message, options)\n\n\uD504\uB85C\uADF8\uB798\uBC0D \uBC29\uC2DD\uC73C\uB85C \uD1A0\uC2A4\uD2B8\uB97C \uD45C\uC2DC\uD558\uB294 \uD568\uC218\uC785\uB2C8\uB2E4. \uC0C8 \uD638\uCD9C\uC774 \uC774\uC804 \uD1A0\uC2A4\uD2B8\uB97C \uB300\uCCB4\uD569\uB2C8\uB2E4.\n\n**\uC635\uC158:**\n- `variant?: ToastVariant` \u2014 \uC2DC\uAC01\uC801 \uBCC0\uD615\n- `icon?: ReactNode` \u2014 \uCEE4\uC2A4\uD140 \uC544\uC774\uCF58\n- `action?: ToastAction` \u2014 \uC561\uC158 \uBC84\uD2BC\n- `duration?: number` \u2014 \uC9C0\uC18D \uC2DC\uAC04(\uBC00\uB9AC\uCD08, \uAE30\uBCF8 4200)',
+      searchText: 'toast \uC77C\uC2DC\uC801\uC778 \uC54C\uB9BC \uBA54\uC2DC\uC9C0 \uC624\uBC84\uB808\uC774. <div class="not-content my-6">\n  <toastpreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="toast" />\n</div>\n\n\n## \uD1A0\uD070\n\n<div class="not-content">\n  <tokeninspector client:load component="toast" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n// add toaster to your app root (one toast at a time by default)\n<toaster />\n\n// show a toast \u2014 replaces any currently visible toast\ntoast("settings saved successfully", {\n  variant: "success",\n  duration: 3000,\n});\n\ntoast("upload failed", {\n  variant: "error",\n  action: {\n    label: "retry",\n    onclick: () => retryupload(),\n  },\n});\n```\n\n\uD1A0\uC2A4\uD2B8\uB97C \uC704\uCABD\uC73C\uB85C \uC2A4\uC640\uC774\uD504\uD558\uAC70\uB098 \uB4DC\uB798\uADF8\uD558\uBA74 \uC77C\uCC0D \uB2EB\uC744 \uC218 \uC788\uC2B5\uB2C8\uB2E4.\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### toast\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "variant", default: "\\"default\\"", type: "\\"default\\" | \\"success\\" | \\"error\\" | \\"warning\\"", description: "toast \uC2DC\uAC01\uC801 \uBCC0\uD615." },\n    { prop: "message", default: "\u2014", type: "reactnode", description: "toast \uBA54\uC2DC\uC9C0." },\n    { prop: "icon", default: "\u2014", type: "reactnode", description: "\uCEE4\uC2A4\uD140 \uC544\uC774\uCF58 \uC694\uC18C." },\n    { prop: "iconname", default: "\u2014", type: "string", description: "\uC544\uC774\uCF58 \uC774\uB984(icon \uBBF8\uC0AC\uC6A9 \uC2DC)." },\n    { prop: "action", default: "\u2014", type: "reactnode | toastaction", description: "\uC561\uC158 \uBC84\uD2BC \uB610\uB294 \uCEE4\uC2A4\uD140 \uC694\uC18C." }\n    ]}\n  />\n</div>\n### toaster\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "maxtoasts", default: "1", type: "number", description: "\uB3D9\uC2DC \uD1A0\uC2A4\uD2B8 \uCD5C\uB300 \uAC1C\uC218. \uAE30\uBCF8\uC740 \uC774\uC804 \uD1A0\uC2A4\uD2B8\uB97C \uB300\uCCB4\uD569\uB2C8\uB2E4." },\n    { prop: "swipedirections", default: "[\\"top\\"]", type: "(\\"top\\" | \\"right\\" | \\"bottom\\" | \\"left\\")[]", description: "\uC2A4\uC640\uC774\uD504\uB85C \uB2EB\uC744 \uC218 \uC788\uB294 \uBC29\uD5A5." }\n    ]}\n  />\n</div>\n### toast(message, options)\n\n\uD504\uB85C\uADF8\uB798\uBC0D \uBC29\uC2DD\uC73C\uB85C \uD1A0\uC2A4\uD2B8\uB97C \uD45C\uC2DC\uD558\uB294 \uD568\uC218\uC785\uB2C8\uB2E4. \uC0C8 \uD638\uCD9C\uC774 \uC774\uC804 \uD1A0\uC2A4\uD2B8\uB97C \uB300\uCCB4\uD569\uB2C8\uB2E4.\n\n**\uC635\uC158:**\n- `variant?: toastvariant` \u2014 \uC2DC\uAC01\uC801 \uBCC0\uD615\n- `icon?: reactnode` \u2014 \uCEE4\uC2A4\uD140 \uC544\uC774\uCF58\n- `action?: toastaction` \u2014 \uC561\uC158 \uBC84\uD2BC\n- `duration?: number` \u2014 \uC9C0\uC18D \uC2DC\uAC04(\uBC00\uB9AC\uCD08, \uAE30\uBCF8 4200)\n'
+    },
+    {
+      slug: "ko/components/tooltip",
+      href: "/ko/components/tooltip/",
+      title: "Tooltip",
+      description: "\uD638\uBC84 \uB610\uB294 \uD3EC\uCEE4\uC2A4 \uC2DC \uC0C1\uD669\uBCC4 \uD14D\uC2A4\uD2B8 \uD31D\uC5C5.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <TooltipDemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="tooltip" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Tooltip trigger={<Button>Hover me</Button>} content="Helpful tooltip text" />\n\n<Tooltip\n  trigger={<IconButton icon="info" />}\n  content="Extended information"\n  position="Top"\n  align="Center"\n/>\n```\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "trigger", default: "\u2014", type: "ReactNode", description: "\uD234\uD301\uC744 \uD2B8\uB9AC\uAC70\uD558\uB294 \uC694\uC18C(\uD544\uC218)." },\n    { prop: "content", default: "\u2014", type: "ReactNode", description: "\uD234\uD301 \uCF58\uD150\uCE20(\uD544\uC218)." },\n    { prop: "position", default: "\\"Top\\"", type: "\\"Top\\" | \\"Left\\" | \\"Bottom\\" | \\"Right\\"", description: "\uD2B8\uB9AC\uAC70 \uAE30\uC900 \uC704\uCE58." },\n    { prop: "align", default: "\\"Center\\"", type: "\\"Start\\" | \\"Center\\" | \\"End\\"", description: "\uAC00\uC7A5\uC790\uB9AC \uAE30\uC900 \uC815\uB82C." },\n    { prop: "delayMs", default: "700", type: "number", description: "\uD45C\uC2DC \uC804 \uC9C0\uC5F0(\uBC00\uB9AC\uCD08)." },\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "defaultOpen", default: "\u2014", type: "boolean", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onOpenChange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>',
+      searchText: 'tooltip \uD638\uBC84 \uB610\uB294 \uD3EC\uCEE4\uC2A4 \uC2DC \uC0C1\uD669\uBCC4 \uD14D\uC2A4\uD2B8 \uD31D\uC5C5. <div class="not-content my-6">\n  <tooltipdemo client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="tooltip" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<tooltip trigger={<button>hover me</button>} content="helpful tooltip text" />\n\n<tooltip\n  trigger={<iconbutton icon="info" />}\n  content="extended information"\n  position="top"\n  align="center"\n/>\n```\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "trigger", default: "\u2014", type: "reactnode", description: "\uD234\uD301\uC744 \uD2B8\uB9AC\uAC70\uD558\uB294 \uC694\uC18C(\uD544\uC218)." },\n    { prop: "content", default: "\u2014", type: "reactnode", description: "\uD234\uD301 \uCF58\uD150\uCE20(\uD544\uC218)." },\n    { prop: "position", default: "\\"top\\"", type: "\\"top\\" | \\"left\\" | \\"bottom\\" | \\"right\\"", description: "\uD2B8\uB9AC\uAC70 \uAE30\uC900 \uC704\uCE58." },\n    { prop: "align", default: "\\"center\\"", type: "\\"start\\" | \\"center\\" | \\"end\\"", description: "\uAC00\uC7A5\uC790\uB9AC \uAE30\uC900 \uC815\uB82C." },\n    { prop: "delayms", default: "700", type: "number", description: "\uD45C\uC2DC \uC804 \uC9C0\uC5F0(\uBC00\uB9AC\uCD08)." },\n    { prop: "open", default: "\u2014", type: "boolean", description: "\uC81C\uC5B4\uD615 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "defaultopen", default: "\u2014", type: "boolean", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC5F4\uB9BC \uC0C1\uD0DC." },\n    { prop: "onopenchange", default: "\u2014", type: "(open: boolean) => void", description: "\uC5F4\uB9BC \uC0C1\uD0DC \uBCC0\uACBD \uC2DC \uC774\uBCA4\uD2B8 \uD578\uB4E4\uB7EC." }\n    ]}\n  />\n</div>\n'
+    },
+    {
+      slug: "ko/components/tree",
+      href: "/ko/components/tree/",
+      title: "Tree",
+      description: "\uD30C\uC77C, \uD3F4\uB354, \uC911\uCCA9 \uB0B4\uBE44\uAC8C\uC774\uC158\uC6A9 \uD655\uC7A5 \uAC00\uB2A5\uD55C \uACC4\uCE35 \uBAA9\uB85D.",
+      category: "guides",
+      content: '<div class="not-content my-6">\n  <TreePreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <SpecRenderer client:load component="tree" />\n</div>\n\n## \uC124\uCE58\n\n<PackageInstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Tree defaultExpanded={["src"]} defaultSelected="button">\n  <TreeItem value="src">\n    <TreeItemTrigger>src</TreeItemTrigger>\n    <TreeItemContent>\n      <TreeItem value="button">\n        <TreeItemTrigger>Button.tsx</TreeItemTrigger>\n      </TreeItem>\n    </TreeItemContent>\n  </TreeItem>\n  <TreeItem value="package">\n    <TreeItemTrigger>package.json</TreeItemTrigger>\n  </TreeItem>\n</Tree>\n```\n\nFoundation spacing, radius, color \uBCC4\uCE6D, typography \uD1A0\uD070\uC73C\uB85C \uAD6C\uC131\uB429\uB2C8\uB2E4(Sidebar / Menu\uC640 \uB3D9\uC77C\uD55C \uBC00\uB3C4). \uC170\uBE0C\uB860\uC73C\uB85C \uBD84\uAE30\uB97C \uD3BC\uCE58\uACE0, \uD589 \uD074\uB9AD\uC73C\uB85C \uC120\uD0DD\uD569\uB2C8\uB2E4. \uD654\uC0B4\uD45C \uD0A4\uB294 WAI-ARIA tree \uD328\uD134\uC744 \uB530\uB985\uB2C8\uB2E4.\n\n## API \uB808\uD37C\uB7F0\uC2A4\n\n### Tree\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uD589 typography \uD06C\uAE30." },\n    { prop: "expanded", default: "\u2014", type: "string[]", description: "\uC81C\uC5B4\uD615 \uD3BC\uCE5C \uD56D\uBAA9 \uAC12." },\n    { prop: "defaultExpanded", default: "\u2014", type: "string[]", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uD3BC\uCE68 \uAC12." },\n    { prop: "onExpandedChange", default: "\u2014", type: "(value: string[]) => void", description: "\uD3BC\uCE68\uC774 \uBCC0\uACBD\uB420 \uB54C \uD638\uCD9C\uB429\uB2C8\uB2E4." },\n    { prop: "selected", default: "\u2014", type: "string | null", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uD56D\uBAA9 \uAC12." },\n    { prop: "defaultSelected", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC120\uD0DD." },\n    { prop: "onSelectedChange", default: "\u2014", type: "(value: string | null) => void", description: "\uC120\uD0DD\uC774 \uBCC0\uACBD\uB420 \uB54C \uD638\uCD9C\uB429\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n\n### TreeItem\n\n<div class="not-content">\n  <PropSpec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uACE0\uC720 \uC2DD\uBCC4\uC790(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC120\uD0DD\uACFC \uD3BC\uCE68\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n\n### TreeItemTrigger\n\n\uD3EC\uCEE4\uC2A4 \uAC00\uB2A5\uD55C \uD589 \uB808\uC774\uBE14. \uD56D\uBAA9\uC5D0 `TreeItemContent`\uAC00 \uC788\uC73C\uBA74 \uC170\uBE0C\uB860\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4.\n\n### TreeItemContent\n\n\uC911\uCCA9 `TreeItem` \uADF8\uB8F9. \uBD80\uBAA8\uAC00 \uD3BC\uCCD0\uC9C4 \uB3D9\uC548\uC5D0\uB9CC \uB9C8\uC6B4\uD2B8\uB429\uB2C8\uB2E4.',
+      searchText: 'tree \uD30C\uC77C, \uD3F4\uB354, \uC911\uCCA9 \uB0B4\uBE44\uAC8C\uC774\uC158\uC6A9 \uD655\uC7A5 \uAC00\uB2A5\uD55C \uACC4\uCE35 \uBAA9\uB85D. <div class="not-content my-6">\n  <treepreview client:load />\n</div>\n\n\n## \uACC4\uC57D\n\n<div class="not-content">\n  <specrenderer client:load component="tree" />\n</div>\n\n## \uC124\uCE58\n\n<packageinstall />\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<tree defaultexpanded={["src"]} defaultselected="button">\n  <treeitem value="src">\n    <treeitemtrigger>src</treeitemtrigger>\n    <treeitemcontent>\n      <treeitem value="button">\n        <treeitemtrigger>button.tsx</treeitemtrigger>\n      </treeitem>\n    </treeitemcontent>\n  </treeitem>\n  <treeitem value="package">\n    <treeitemtrigger>package.json</treeitemtrigger>\n  </treeitem>\n</tree>\n```\n\nfoundation spacing, radius, color \uBCC4\uCE6D, typography \uD1A0\uD070\uC73C\uB85C \uAD6C\uC131\uB429\uB2C8\uB2E4(sidebar / menu\uC640 \uB3D9\uC77C\uD55C \uBC00\uB3C4). \uC170\uBE0C\uB860\uC73C\uB85C \uBD84\uAE30\uB97C \uD3BC\uCE58\uACE0, \uD589 \uD074\uB9AD\uC73C\uB85C \uC120\uD0DD\uD569\uB2C8\uB2E4. \uD654\uC0B4\uD45C \uD0A4\uB294 wai-aria tree \uD328\uD134\uC744 \uB530\uB985\uB2C8\uB2E4.\n\n## api \uB808\uD37C\uB7F0\uC2A4\n\n### tree\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "size", default: "\\"md\\"", type: "\\"sm\\" | \\"md\\" | \\"lg\\"", description: "\uD589 typography \uD06C\uAE30." },\n    { prop: "expanded", default: "\u2014", type: "string[]", description: "\uC81C\uC5B4\uD615 \uD3BC\uCE5C \uD56D\uBAA9 \uAC12." },\n    { prop: "defaultexpanded", default: "\u2014", type: "string[]", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uD3BC\uCE68 \uAC12." },\n    { prop: "onexpandedchange", default: "\u2014", type: "(value: string[]) => void", description: "\uD3BC\uCE68\uC774 \uBCC0\uACBD\uB420 \uB54C \uD638\uCD9C\uB429\uB2C8\uB2E4." },\n    { prop: "selected", default: "\u2014", type: "string | null", description: "\uC81C\uC5B4\uD615 \uC120\uD0DD \uD56D\uBAA9 \uAC12." },\n    { prop: "defaultselected", default: "\u2014", type: "string", description: "\uBE44\uC81C\uC5B4\uD615 \uCD08\uAE30 \uC120\uD0DD." },\n    { prop: "onselectedchange", default: "\u2014", type: "(value: string | null) => void", description: "\uC120\uD0DD\uC774 \uBCC0\uACBD\uB420 \uB54C \uD638\uCD9C\uB429\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n\n### treeitem\n\n<div class="not-content">\n  <propspec\n    client:load\n    rows={[\n    { prop: "value", default: "\u2014", type: "string", description: "\uACE0\uC720 \uC2DD\uBCC4\uC790(\uD544\uC218)." },\n    { prop: "disabled", default: "false", type: "boolean", description: "\uC120\uD0DD\uACFC \uD3BC\uCE68\uC744 \uBE44\uD65C\uC131\uD654\uD569\uB2C8\uB2E4." }\n    ]}\n  />\n</div>\n\n### treeitemtrigger\n\n\uD3EC\uCEE4\uC2A4 \uAC00\uB2A5\uD55C \uD589 \uB808\uC774\uBE14. \uD56D\uBAA9\uC5D0 `treeitemcontent`\uAC00 \uC788\uC73C\uBA74 \uC170\uBE0C\uB860\uC744 \uD45C\uC2DC\uD569\uB2C8\uB2E4.\n\n### treeitemcontent\n\n\uC911\uCCA9 `treeitem` \uADF8\uB8F9. \uBD80\uBAA8\uAC00 \uD3BC\uCCD0\uC9C4 \uB3D9\uC548\uC5D0\uB9CC \uB9C8\uC6B4\uD2B8\uB429\uB2C8\uB2E4.\n'
+    },
+    {
+      slug: "ko/development/index",
+      href: "/ko/development/index/",
+      title: "\uAC1C\uBC1C",
+      description: "\uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C RefineUI\uB97C \uC124\uCE58\uD558\uACE0, \uD14C\uB9C8\uB97C \uC801\uC6A9\uD558\uACE0, \uBC30\uD3EC\uD569\uB2C8\uB2E4.",
+      category: "guides",
+      content: "RefineUI \uBB38\uC11C\uB294 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC758 **1\uAE09 \uC18C\uBE44\uC790**\uC785\uB2C8\uB2E4 \u2014 \uC81C\uD488\uACFC \uAC19\uC740 \uD328\uD0A4\uC9C0, \uD1A0\uD070, \uBAA8\uC158 \uC5ED\uD560\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n## \uAC00\uC774\uB4DC\n\n- [\uC2DC\uC791\uD558\uAE30](/ko/getting-started/) \u2014 \uC544\uD0A4\uD14D\uCC98, \uC124\uCE58, \uCCAB \uC608\uC81C\n- [\uC124\uCE58](/ko/development/installation/) \u2014 \uD328\uD0A4\uC9C0 \uCD94\uAC00\uC640 CSS \uB85C\uB4DC\n- [\uD14C\uB9C8](/ko/development/theming/) \u2014 \uB77C\uC774\uD2B8/\uB2E4\uD06C\uC640 \uD1A0\uD070 \uC11C\uD53C\uC2A4\n- [\uBAA8\uC158](/ko/development/motion/) \u2014 CSS \uD2B8\uB79C\uC9C0\uC158 vs \uBAA8\uC158 \uB7F0\uD0C0\uC784\n\n## \uC6D0\uCE59\n\n1. **\uD1A0\uD070\uB9CC** \u2014 \uCEF4\uD3EC\uB10C\uD2B8 \uC2A4\uD0C0\uC77C\uC5D0 \uC784\uC758 px, hex, ms \uAE08\uC9C0\n2. **\uC2E4\uC81C \uCEF4\uD3EC\uB10C\uD2B8** \u2014 \uBB38\uC11C\uB294 `@refineui/react`\uB97C \uB80C\uB354\uD558\uBA70 \uBAA9\uC5C5\uC744 \uC4F0\uC9C0 \uC54A\uC74C\n3. **\uBAA8\uC158 \uC5ED\uD560** \u2014 `fast`, `press`, `panel` via `--refineui-motion-*`\n4. **\uBB38\uC11C = \uC81C\uD488** \u2014 \uC571\uACFC \uC774 \uC0AC\uC774\uD2B8\uC5D0\uC11C \uAC19\uC740 \uD328\uD0A4\uC9C0\xB7\uD1A0\uD070\xB7\uC2A4\uD0C0\uC77C\uC2DC\uD2B8",
+      searchText: "\uAC1C\uBC1C \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C refineui\uB97C \uC124\uCE58\uD558\uACE0, \uD14C\uB9C8\uB97C \uC801\uC6A9\uD558\uACE0, \uBC30\uD3EC\uD569\uB2C8\uB2E4. \nrefineui \uBB38\uC11C\uB294 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC758 **1\uAE09 \uC18C\uBE44\uC790**\uC785\uB2C8\uB2E4 \u2014 \uC81C\uD488\uACFC \uAC19\uC740 \uD328\uD0A4\uC9C0, \uD1A0\uD070, \uBAA8\uC158 \uC5ED\uD560\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n## \uAC00\uC774\uB4DC\n\n- [\uC2DC\uC791\uD558\uAE30](/ko/getting-started/) \u2014 \uC544\uD0A4\uD14D\uCC98, \uC124\uCE58, \uCCAB \uC608\uC81C\n- [\uC124\uCE58](/ko/development/installation/) \u2014 \uD328\uD0A4\uC9C0 \uCD94\uAC00\uC640 css \uB85C\uB4DC\n- [\uD14C\uB9C8](/ko/development/theming/) \u2014 \uB77C\uC774\uD2B8/\uB2E4\uD06C\uC640 \uD1A0\uD070 \uC11C\uD53C\uC2A4\n- [\uBAA8\uC158](/ko/development/motion/) \u2014 css \uD2B8\uB79C\uC9C0\uC158 vs \uBAA8\uC158 \uB7F0\uD0C0\uC784\n\n## \uC6D0\uCE59\n\n1. **\uD1A0\uD070\uB9CC** \u2014 \uCEF4\uD3EC\uB10C\uD2B8 \uC2A4\uD0C0\uC77C\uC5D0 \uC784\uC758 px, hex, ms \uAE08\uC9C0\n2. **\uC2E4\uC81C \uCEF4\uD3EC\uB10C\uD2B8** \u2014 \uBB38\uC11C\uB294 `@refineui/react`\uB97C \uB80C\uB354\uD558\uBA70 \uBAA9\uC5C5\uC744 \uC4F0\uC9C0 \uC54A\uC74C\n3. **\uBAA8\uC158 \uC5ED\uD560** \u2014 `fast`, `press`, `panel` via `--refineui-motion-*`\n4. **\uBB38\uC11C = \uC81C\uD488** \u2014 \uC571\uACFC \uC774 \uC0AC\uC774\uD2B8\uC5D0\uC11C \uAC19\uC740 \uD328\uD0A4\uC9C0\xB7\uD1A0\uD070\xB7\uC2A4\uD0C0\uC77C\uC2DC\uD2B8\n"
+    },
+    {
+      slug: "ko/development/installation",
+      href: "/ko/development/installation/",
+      title: "\uC124\uCE58",
+      description: "RefineUI \uD328\uD0A4\uC9C0\uB97C \uCD94\uAC00\uD558\uACE0 \uD30C\uC6B4\uB370\uC774\uC158 CSS\uB97C \uB85C\uB4DC\uD569\uB2C8\uB2E4.",
+      category: "guides",
+      content: '<PackageInstallFull />\n\n## CSS\n\n\uC571 \uB8E8\uD2B8\uC5D0\uC11C \uD1A0\uD070 CSS\uC640 \uCEF4\uD3EC\uB10C\uD2B8 \uC778\uD130\uB799\uC158 \uC2A4\uD0C0\uC77C\uC744 \uD55C \uBC88 \uB85C\uB4DC\uD558\uC138\uC694.\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\n## \uCCAB \uCEF4\uD3EC\uB10C\uD2B8\n\n```tsx\nexport function App() {\n  return <Button variant="primary">Continue</Button>;\n}\n```\n\n\uBB38\uC11C \uD504\uB9AC\uBDF0\uC5D0\uC11C\uB3C4 \uAC19\uC740 import\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBCD1\uB82C \uBAA9 UI\uB294 \uC5C6\uC2B5\uB2C8\uB2E4.',
+      searchText: '\uC124\uCE58 refineui \uD328\uD0A4\uC9C0\uB97C \uCD94\uAC00\uD558\uACE0 \uD30C\uC6B4\uB370\uC774\uC158 css\uB97C \uB85C\uB4DC\uD569\uB2C8\uB2E4. \n<packageinstallfull />\n\n## css\n\n\uC571 \uB8E8\uD2B8\uC5D0\uC11C \uD1A0\uD070 css\uC640 \uCEF4\uD3EC\uB10C\uD2B8 \uC778\uD130\uB799\uC158 \uC2A4\uD0C0\uC77C\uC744 \uD55C \uBC88 \uB85C\uB4DC\uD558\uC138\uC694.\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\n## \uCCAB \uCEF4\uD3EC\uB10C\uD2B8\n\n```tsx\nexport function app() {\n  return <button variant="primary">continue</button>;\n}\n```\n\n\uBB38\uC11C \uD504\uB9AC\uBDF0\uC5D0\uC11C\uB3C4 \uAC19\uC740 import\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBCD1\uB82C \uBAA9 ui\uB294 \uC5C6\uC2B5\uB2C8\uB2E4.\n'
+    },
+    {
+      slug: "ko/development/motion",
+      href: "/ko/development/motion/",
+      title: "\uCF54\uB4DC\uC5D0\uC11C\uC758 \uBAA8\uC158",
+      description: "\uBAA8\uC158 \uD1A0\uD070\uC758 CSS \uD2B8\uB79C\uC9C0\uC158\uC744 \uC6B0\uC120\uD558\uACE0, \uD544\uC694\uD560 \uB54C\uB9CC \uB7F0\uD0C0\uC784\uC744 \uC0AC\uC6A9\uD558\uC138\uC694.",
+      category: "guides",
+      content: "\uBAA8\uC158\uC740 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC758 \uC77C\uAE09 \uD504\uB9AC\uBBF8\uD2F0\uBE0C\uC785\uB2C8\uB2E4.\n\n## CSS \uD2B8\uB79C\uC9C0\uC158\uC744 \uC6B0\uC120\uD558\uC138\uC694\n\n\uB9C8\uC774\uD06C\uB85C \uC778\uD130\uB799\uC158(\uD638\uBC84, \uD504\uB808\uC2A4, \uD3EC\uCEE4\uC2A4 \uCEEC\uB7EC)\uC740 \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n```css\n.control {\n  transition:\n    transform var(--refineui-motion-duration-fast)\n      var(--refineui-motion-easing-ease-out),\n    background-color var(--refineui-motion-duration-fast)\n      var(--refineui-motion-easing-ease-out);\n}\n\n.control:active {\n  transform: scale(var(--refineui-motion-scale-press));\n}\n```\n\n## \uBAA8\uC158 \uB7F0\uD0C0\uC784\n\n\uB808\uC774\uC544\uC6C3 \uC560\uB2C8\uBA54\uC774\uC158, enter/exit, \uACF5\uC720 \uC694\uC18C, \uC2A4\uD504\uB9C1, \uC2DC\uD000\uC2A4 \uC548\uBB34(Dialog, Drawer, Accordion)\uAC00 \uD544\uC694\uD560 \uB54C\uB9CC \uB7F0\uD0C0\uC784\uC744 \uC0AC\uC6A9\uD558\uC138\uC694. \uC9C0\uC18D \uC2DC\uAC04\uC740 `semanticInteraction` / `motionMsToNumber`\uB85C \uD574\uC11D\uD558\uACE0 \u2014 `150ms`\uB97C \uD558\uB4DC\uCF54\uB529\uD558\uC9C0 \uB9C8\uC138\uC694.\n\n## \uBAA8\uC158 \uC904\uC774\uAE30\n\n`prefers-reduced-motion: reduce`\uB97C \uC874\uC911\uD558\uC138\uC694 \u2014 \uBCC0\uD658\uACFC \uBE44\uD544\uC218 \uC560\uB2C8\uBA54\uC774\uC158\uC744 \uCD95\uC18C\uD569\uB2C8\uB2E4. \uD30C\uC6B4\uB370\uC774\uC158: [\uBAA8\uC158](/ko/foundations/motion/).",
+      searchText: "\uCF54\uB4DC\uC5D0\uC11C\uC758 \uBAA8\uC158 \uBAA8\uC158 \uD1A0\uD070\uC758 css \uD2B8\uB79C\uC9C0\uC158\uC744 \uC6B0\uC120\uD558\uACE0, \uD544\uC694\uD560 \uB54C\uB9CC \uB7F0\uD0C0\uC784\uC744 \uC0AC\uC6A9\uD558\uC138\uC694. \n\uBAA8\uC158\uC740 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC758 \uC77C\uAE09 \uD504\uB9AC\uBBF8\uD2F0\uBE0C\uC785\uB2C8\uB2E4.\n\n## css \uD2B8\uB79C\uC9C0\uC158\uC744 \uC6B0\uC120\uD558\uC138\uC694\n\n\uB9C8\uC774\uD06C\uB85C \uC778\uD130\uB799\uC158(\uD638\uBC84, \uD504\uB808\uC2A4, \uD3EC\uCEE4\uC2A4 \uCEEC\uB7EC)\uC740 \uC2DC\uB9E8\uD2F1 \uC5ED\uD560\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4.\n\n```css\n.control {\n  transition:\n    transform var(--refineui-motion-duration-fast)\n      var(--refineui-motion-easing-ease-out),\n    background-color var(--refineui-motion-duration-fast)\n      var(--refineui-motion-easing-ease-out);\n}\n\n.control:active {\n  transform: scale(var(--refineui-motion-scale-press));\n}\n```\n\n## \uBAA8\uC158 \uB7F0\uD0C0\uC784\n\n\uB808\uC774\uC544\uC6C3 \uC560\uB2C8\uBA54\uC774\uC158, enter/exit, \uACF5\uC720 \uC694\uC18C, \uC2A4\uD504\uB9C1, \uC2DC\uD000\uC2A4 \uC548\uBB34(dialog, drawer, accordion)\uAC00 \uD544\uC694\uD560 \uB54C\uB9CC \uB7F0\uD0C0\uC784\uC744 \uC0AC\uC6A9\uD558\uC138\uC694. \uC9C0\uC18D \uC2DC\uAC04\uC740 `semanticinteraction` / `motionmstonumber`\uB85C \uD574\uC11D\uD558\uACE0 \u2014 `150ms`\uB97C \uD558\uB4DC\uCF54\uB529\uD558\uC9C0 \uB9C8\uC138\uC694.\n\n## \uBAA8\uC158 \uC904\uC774\uAE30\n\n`prefers-reduced-motion: reduce`\uB97C \uC874\uC911\uD558\uC138\uC694 \u2014 \uBCC0\uD658\uACFC \uBE44\uD544\uC218 \uC560\uB2C8\uBA54\uC774\uC158\uC744 \uCD95\uC18C\uD569\uB2C8\uB2E4. \uD30C\uC6B4\uB370\uC774\uC158: [\uBAA8\uC158](/ko/foundations/motion/).\n"
+    },
+    {
+      slug: "ko/development/theming",
+      href: "/ko/development/theming/",
+      title: "\uD14C\uB9C8",
+      description: "\uC2DC\uB9E8\uD2F1 \uCEEC\uB7EC \uBCC4\uCE6D\uC73C\uB85C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uC11C\uD53C\uC2A4\uB97C \uAD6C\uC131\uD569\uB2C8\uB2E4.",
+      category: "guides",
+      content: 'RefineUI \uD14C\uB9C8\uB294 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`--refineui-color-alias-*`)\uC73C\uB85C \uD574\uC11D\uB429\uB2C8\uB2E4. \uBB38\uC11C\uC640 \uB3D9\uC77C\uD558\uAC8C \uBB38\uC11C \uB8E8\uD2B8\uC5D0 `data-theme="dark"`(\uC120\uD0DD\uC801\uC73C\uB85C `.dark`)\uB97C \uC124\uC815\uD574 \uB2E4\uD06C\uB97C \uCF2D\uB2C8\uB2E4.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## \uADDC\uCE59\n\n- UI\uC5D0\uC11C\uB294 \uC6D0\uC2DC \uD314\uB808\uD2B8 \uB2E8\uACC4\uAC00 \uC544\uB2C8\uB77C **\uBCC4\uCE6D**(`background-brand`, `foreground-primary`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694\n- \uCEF4\uD3EC\uB10C\uD2B8 \uD06C\uAE30\uB294 Foundation \uC0AC\uC774\uC988 \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC0C1\uD0DC\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4\n- \uC81C\uD488 CSS\uC5D0 \uD14C\uB9C8 \uC804\uC6A9 hex\uB97C \uC0C8\uB85C \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694\n\n\uBE44\uC8FC\uC5BC \uD1A0\uD070 \uB9F5\uC740 [\uCEEC\uB7EC](/ko/foundations/color/)\uB97C \uCC38\uACE0\uD558\uC138\uC694.',
+      searchText: '\uD14C\uB9C8 \uC2DC\uB9E8\uD2F1 \uCEEC\uB7EC \uBCC4\uCE6D\uC73C\uB85C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uC11C\uD53C\uC2A4\uB97C \uAD6C\uC131\uD569\uB2C8\uB2E4. \nrefineui \uD14C\uB9C8\uB294 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`--refineui-color-alias-*`)\uC73C\uB85C \uD574\uC11D\uB429\uB2C8\uB2E4. \uBB38\uC11C\uC640 \uB3D9\uC77C\uD558\uAC8C \uBB38\uC11C \uB8E8\uD2B8\uC5D0 `data-theme="dark"`(\uC120\uD0DD\uC801\uC73C\uB85C `.dark`)\uB97C \uC124\uC815\uD574 \uB2E4\uD06C\uB97C \uCF2D\uB2C8\uB2E4.\n\n```html\n<html data-theme="light">\n<html data-theme="dark" class="dark">\n```\n\n## \uADDC\uCE59\n\n- ui\uC5D0\uC11C\uB294 \uC6D0\uC2DC \uD314\uB808\uD2B8 \uB2E8\uACC4\uAC00 \uC544\uB2C8\uB77C **\uBCC4\uCE6D**(`background-brand`, `foreground-primary`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694\n- \uCEF4\uD3EC\uB10C\uD2B8 \uD06C\uAE30\uB294 foundation \uC0AC\uC774\uC988 \uC2A4\uD15D\uC5D0 \uC5F0\uACB0\uB41C \uC0C1\uD0DC\uB97C \uC720\uC9C0\uD569\uB2C8\uB2E4\n- \uC81C\uD488 css\uC5D0 \uD14C\uB9C8 \uC804\uC6A9 hex\uB97C \uC0C8\uB85C \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694\n\n\uBE44\uC8FC\uC5BC \uD1A0\uD070 \uB9F5\uC740 [\uCEEC\uB7EC](/ko/foundations/color/)\uB97C \uCC38\uACE0\uD558\uC138\uC694.\n'
+    },
+    {
+      slug: "ko/foundations/border",
+      href: "/ko/foundations/border/",
+      title: "Border",
+      description: "\uC544\uC6C3\uB77C\uC778\uACFC \uB514\uBC14\uC774\uB354\uB97C \uC704\uD55C \uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44.",
+      category: "guides",
+      content: '\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44\uB294 Foundation \uD0A4\uC785\uB2C8\uB2E4. \uAE30\uBCF8 UI \uD06C\uB86C\uC740 `strokeWidthThin`\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4. Border **\uC0C9**\uC740 \uC774 \uC2A4\uCF00\uC77C\uC774 \uC544\uB2C8\uB77C \uCEEC\uB7EC \uBCC4\uCE6D(`borderDefault`, `borderSubtle`, `borderFocus`)\uC5D0\uC11C \uC635\uB2C8\uB2E4.\n\n## \uC2A4\uCF00\uC77C\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44 \uC2A4\uCF00\uC77C"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n    ]}\n    rows={[\n      { token: "strokeWidthNone", value: "0" },\n      { token: "strokeWidthHairline", value: "0.5px" },\n      { token: "strokeWidthThin", value: "1px" },\n      { token: "strokeWidthThick", value: "2px" },\n      { token: "strokeWidthThicker", value: "4px" },\n      { token: "strokeWidthThickest", value: "6px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <StrokePreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Box\n  border="strokeWidthThin"\n  borderColor="borderDefault"\n  radius="roundedLarge"\n  padding="sizeLarge"\n  background="backgroundSurface"\n>\n  Outlined surface\n</Box>\n```',
+      searchText: 'border \uC544\uC6C3\uB77C\uC778\uACFC \uB514\uBC14\uC774\uB354\uB97C \uC704\uD55C \uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44. \n\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44\uB294 foundation \uD0A4\uC785\uB2C8\uB2E4. \uAE30\uBCF8 ui \uD06C\uB86C\uC740 `strokewidththin`\uC744 \uC0AC\uC6A9\uD569\uB2C8\uB2E4. border **\uC0C9**\uC740 \uC774 \uC2A4\uCF00\uC77C\uC774 \uC544\uB2C8\uB77C \uCEEC\uB7EC \uBCC4\uCE6D(`borderdefault`, `bordersubtle`, `borderfocus`)\uC5D0\uC11C \uC635\uB2C8\uB2E4.\n\n## \uC2A4\uCF00\uC77C\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44 \uC2A4\uCF00\uC77C"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n    ]}\n    rows={[\n      { token: "strokewidthnone", value: "0" },\n      { token: "strokewidthhairline", value: "0.5px" },\n      { token: "strokewidththin", value: "1px" },\n      { token: "strokewidththick", value: "2px" },\n      { token: "strokewidththicker", value: "4px" },\n      { token: "strokewidththickest", value: "6px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <strokepreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<box\n  border="strokewidththin"\n  bordercolor="borderdefault"\n  radius="roundedlarge"\n  padding="sizelarge"\n  background="backgroundsurface"\n>\n  outlined surface\n</box>\n```\n'
+    },
+    {
+      slug: "ko/foundations/color",
+      href: "/ko/foundations/color/",
+      title: "\uCEEC\uB7EC",
+      description: "\uD314\uB808\uD2B8 \uC6D0\uC2DC\uAC12\uACFC \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D \u2014 \uBC30\uACBD, \uC804\uACBD, Border, \uC11C\uD53C\uC2A4.",
+      category: "guides",
+      content: 'UI\uB294 **\uBCC4\uCE6D**(`foregroundPrimary`, `backgroundBrand`, `borderDefault`)\uC73C\uB85C \uCE60\uD558\uC138\uC694. \uD314\uB808\uD2B8\uB294 \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C\uC5D0\uC11C \uADF8 \uBCC4\uCE6D\uC774 \uD574\uC11D\uB418\uB294 Foundation \uC18C\uC2A4\uC785\uB2C8\uB2E4. \uC81C\uD488 UI\uC5D0 hex\uB098 \uC6D0\uC2DC \uD314\uB808\uD2B8 \uD0A4\uB97C \uBD99\uC5EC\uB123\uC9C0 \uB9C8\uC138\uC694.\n\n`surfaceOverlay`\uB294 \uBAA8\uB2EC \uC2A4\uD06C\uB9BC\uC785\uB2C8\uB2E4 \u2014 \uD314\uB808\uD2B8 \uD398\uC5B4\uAC00 \uC544\uB2CC Foundation RGBA(`--refineui-color-alias-surface-overlay`).\n\n## \uBCC4\uCE6D\n\n\uB77C\uC774\uBE0C CSS \uBCC0\uC218\uC785\uB2C8\uB2E4. \uCEA1\uC158\uC5D0 `light / dark` \uD314\uB808\uD2B8 \uD0A4\uAC00 \uD45C\uC2DC\uB429\uB2C8\uB2E4.\n\n<div class="not-content">\n  <ColorAliasPreview client:load />\n</div>\n\n## \uD314\uB808\uD2B8\n\n<div class="not-content">\n  <ColorPalettePreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Box\n  padding="sizeLarge"\n  background="backgroundSurface"\n  radius="roundedLarge"\n  border="strokeWidthThin"\n  borderColor="borderDefault"\n>\n  Surface\n</Box>\n```\n\n```tsx\n<div style={{ color: semanticColorCssVar("foregroundPrimary") }} />\n```',
+      searchText: '\uCEEC\uB7EC \uD314\uB808\uD2B8 \uC6D0\uC2DC\uAC12\uACFC \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D \u2014 \uBC30\uACBD, \uC804\uACBD, border, \uC11C\uD53C\uC2A4. \nui\uB294 **\uBCC4\uCE6D**(`foregroundprimary`, `backgroundbrand`, `borderdefault`)\uC73C\uB85C \uCE60\uD558\uC138\uC694. \uD314\uB808\uD2B8\uB294 \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C\uC5D0\uC11C \uADF8 \uBCC4\uCE6D\uC774 \uD574\uC11D\uB418\uB294 foundation \uC18C\uC2A4\uC785\uB2C8\uB2E4. \uC81C\uD488 ui\uC5D0 hex\uB098 \uC6D0\uC2DC \uD314\uB808\uD2B8 \uD0A4\uB97C \uBD99\uC5EC\uB123\uC9C0 \uB9C8\uC138\uC694.\n\n`surfaceoverlay`\uB294 \uBAA8\uB2EC \uC2A4\uD06C\uB9BC\uC785\uB2C8\uB2E4 \u2014 \uD314\uB808\uD2B8 \uD398\uC5B4\uAC00 \uC544\uB2CC foundation rgba(`--refineui-color-alias-surface-overlay`).\n\n## \uBCC4\uCE6D\n\n\uB77C\uC774\uBE0C css \uBCC0\uC218\uC785\uB2C8\uB2E4. \uCEA1\uC158\uC5D0 `light / dark` \uD314\uB808\uD2B8 \uD0A4\uAC00 \uD45C\uC2DC\uB429\uB2C8\uB2E4.\n\n<div class="not-content">\n  <coloraliaspreview client:load />\n</div>\n\n## \uD314\uB808\uD2B8\n\n<div class="not-content">\n  <colorpalettepreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<box\n  padding="sizelarge"\n  background="backgroundsurface"\n  radius="roundedlarge"\n  border="strokewidththin"\n  bordercolor="borderdefault"\n>\n  surface\n</box>\n```\n\n```tsx\n<div style={{ color: semanticcolorcssvar("foregroundprimary") }} />\n```\n'
+    },
+    {
+      slug: "ko/foundations/design-tokens",
+      href: "/ko/foundations/design-tokens/",
+      title: "\uB514\uC790\uC778 \uD1A0\uD070",
+      description: "RefineUI\uB97C \uAD6C\uB3D9\uD558\uB294 \uC2DC\uB9E8\uD2F1 \uBCC0\uC218 \u2014 \uCEEC\uB7EC, \uD0C0\uC785, \uACF5\uAC04, \uBAA8\uC158, \uC2A4\uD0DD\uD0B9.",
+      category: "guides",
+      content: '\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 Foundation \uC2A4\uCF00\uC77C\uC744 CSS \uBCC0\uC218\uC640 Tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 UI\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n    columns={[\n      { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefKey: "href" },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, Border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n      { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingMd, bodyMd, \u2026)" },\n      { category: "Spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n      { category: "Sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n      { category: "Radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n      { category: "Border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n      { category: "Elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n      { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n      { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n      { category: "Z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n    ]}\n  />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 Foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundSurface`, `sizeMedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 Foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.',
+      searchText: '\uB514\uC790\uC778 \uD1A0\uD070 refineui\uB97C \uAD6C\uB3D9\uD558\uB294 \uC2DC\uB9E8\uD2F1 \uBCC0\uC218 \u2014 \uCEEC\uB7EC, \uD0C0\uC785, \uACF5\uAC04, \uBAA8\uC158, \uC2A4\uD0DD\uD0B9. \n\uD1A0\uD070\uC740 \uC2DC\uAC01 \uAC12\uC758 \uB2E8\uC77C \uC18C\uC2A4\uC785\uB2C8\uB2E4. `@refineui/tokens`\uB294 foundation \uC2A4\uCF00\uC77C\uC744 css \uBCC0\uC218\uC640 tailwind \uC720\uD2F8\uB9AC\uD2F0\uB85C \uB9E4\uD551\uD569\uB2C8\uB2E4. \uCEF4\uD3EC\uB10C\uD2B8\uC640 \uC81C\uD488 ui\uB294 \uD314\uB808\uD2B8 hex\uB098 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C **\uC2DC\uB9E8\uD2F1 \uC774\uB984**\uC744 \uCC38\uC870\uD574\uC57C \uD569\uB2C8\uB2E4.\n\n## \uCE74\uD14C\uACE0\uB9AC\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uD1A0\uD070 \uCE74\uD14C\uACE0\uB9AC"\n    columns={[\n      { key: "category", header: "\uCE74\uD14C\uACE0\uB9AC", hrefkey: "href" },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { category: "\uCEEC\uB7EC", href: "/ko/foundations/color/", use: "\uC11C\uD53C\uC2A4, \uD14D\uC2A4\uD2B8, border, \uBE0C\uB79C\uB4DC, \uC0C1\uD0DC" },\n      { category: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C", href: "/ko/foundations/typography/", use: "\uD14D\uC2A4\uD2B8 \uC5ED\uD560 (headingmd, bodymd, \u2026)" },\n      { category: "spacing", href: "/ko/foundations/spacing/", use: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4" },\n      { category: "sizing", href: "/ko/foundations/sizing/", use: "\uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58, \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D" },\n      { category: "radius", href: "/ko/foundations/radius/", use: "\uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30" },\n      { category: "border", href: "/ko/foundations/border/", use: "\uC2A4\uD2B8\uB85C\uD06C \uB108\uBE44" },\n      { category: "elevation", href: "/ko/foundations/elevation/", use: "\uADF8\uB9BC\uC790 / \uAE4A\uC774" },\n      { category: "\uD22C\uBA85\uB3C4", href: "/ko/foundations/opacity/", use: "\uBE44\uD65C\uC131 wash, \uC624\uBC84\uB808\uC774 \uD5EC\uD37C" },\n      { category: "\uBAA8\uC158", href: "/ko/foundations/motion/", use: "\uC9C0\uC18D \uC2DC\uAC04, \uC774\uC9D5, press \uC2A4\uCF00\uC77C" },\n      { category: "z-index", href: "/ko/foundations/z-index/", use: "\uC624\uBC84\uB808\uC774 \uC2A4\uD0DD\uD0B9" },\n    ]}\n  />\n</div>\n\n## \uADDC\uCE59\n\n1. \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uB294 foundation \uC6D0\uC2DC\uAC12\uBCF4\uB2E4 \uC2DC\uB9E8\uD2F1 \uBCC4\uCE6D(`backgroundsurface`, `sizemedium`, `fast`)\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n2. \uAC12\uC774 \uC5C6\uC73C\uBA74 foundation\uC744 \uBA3C\uC800 \uC5C5\uB370\uC774\uD2B8\uD55C \uB4A4 `packages/tokens`\uB97C \uB9DE\uCD94\uC138\uC694 \u2014 \uC77C\uD68C\uC131 \uAC12\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n3. \uCEE8\uD2B8\uB864 hover / focus \uBAA8\uC158\uC774 \uC77C\uAD00\uB418\uB3C4\uB85D `@refineui/react/refineui.css`\uB97C \uD55C \uBC88\uB9CC \uC784\uD3EC\uD2B8\uD558\uC138\uC694.\n'
+    },
+    {
+      slug: "ko/foundations/elevation",
+      href: "/ko/foundations/elevation/",
+      title: "Elevation",
+      description: "\uCE74\uB4DC, \uD31D\uC624\uBC84, \uD50C\uB85C\uD305 \uC11C\uD53C\uC2A4\uB97C \uC704\uD55C \uADF8\uB9BC\uC790 \uB808\uC2DC\uD53C.",
+      category: "guides",
+      content: '\uAC01 Elevation \uC2A4\uD15D(`--refineui-elevation-N`)\uC740 \uD65C\uC131 \uD14C\uB9C8\uC5D0 \uB530\uB77C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uAC12\uC744 \uC790\uB3D9\uC73C\uB85C \uC804\uD658\uD569\uB2C8\uB2E4. bare \uBCC0\uC218\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBA85\uC2DC\uC801 `*light` / `*dark` \uC811\uBBF8\uC0AC\uB294 \uD14C\uB9C8\uC640 \uBB34\uAD00\uD558\uAC8C \uD55C \uBAA8\uB4DC\uB85C \uACE0\uC815\uD574\uC57C \uD560 \uB54C\uB9CC \uD544\uC694\uD569\uB2C8\uB2E4.\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Elevation CSS \uBCC0\uC218"\n    columns={[\n      { key: "use", header: "\uC6A9\uB3C4" },\n      { key: "css", header: "CSS", mono: true },\n    ]}\n    rows={[\n      { use: "\uD14C\uB9C8 \uC778\uC2DD (\uAD8C\uC7A5)", css: "--refineui-elevation-8" },\n      { use: "\uB77C\uC774\uD2B8 \uAC15\uC81C", css: "--refineui-elevation-8light" },\n      { use: "\uB2E4\uD06C \uAC15\uC81C", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <ElevationPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-8);\n}\n```',
+      searchText: 'elevation \uCE74\uB4DC, \uD31D\uC624\uBC84, \uD50C\uB85C\uD305 \uC11C\uD53C\uC2A4\uB97C \uC704\uD55C \uADF8\uB9BC\uC790 \uB808\uC2DC\uD53C. \n\uAC01 elevation \uC2A4\uD15D(`--refineui-elevation-n`)\uC740 \uD65C\uC131 \uD14C\uB9C8\uC5D0 \uB530\uB77C \uB77C\uC774\uD2B8\xB7\uB2E4\uD06C \uAC12\uC744 \uC790\uB3D9\uC73C\uB85C \uC804\uD658\uD569\uB2C8\uB2E4. bare \uBCC0\uC218\uB97C \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 \uBA85\uC2DC\uC801 `*light` / `*dark` \uC811\uBBF8\uC0AC\uB294 \uD14C\uB9C8\uC640 \uBB34\uAD00\uD558\uAC8C \uD55C \uBAA8\uB4DC\uB85C \uACE0\uC815\uD574\uC57C \uD560 \uB54C\uB9CC \uD544\uC694\uD569\uB2C8\uB2E4.\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="elevation css \uBCC0\uC218"\n    columns={[\n      { key: "use", header: "\uC6A9\uB3C4" },\n      { key: "css", header: "css", mono: true },\n    ]}\n    rows={[\n      { use: "\uD14C\uB9C8 \uC778\uC2DD (\uAD8C\uC7A5)", css: "--refineui-elevation-8" },\n      { use: "\uB77C\uC774\uD2B8 \uAC15\uC81C", css: "--refineui-elevation-8light" },\n      { use: "\uB2E4\uD06C \uAC15\uC81C", css: "--refineui-elevation-8dark" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <elevationpreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.panel {\n  box-shadow: var(--refineui-elevation-8);\n}\n```\n'
+    },
+    {
+      slug: "ko/foundations/index",
+      href: "/ko/foundations/index/",
+      title: "\uD30C\uC6B4\uB370\uC774\uC158",
+      description: "\uBAA8\uB4E0 RefineUI \uC11C\uD53C\uC2A4\uAC00 \uAE30\uBC18\uD558\uB294 \uB514\uC790\uC778 \uD1A0\uD070\uACFC \uB808\uC774\uC544\uC6C3 \uC6D0\uCE59.",
+      category: "guides",
+      content: '<div class="not-content">\n  <FoundationCatalog client:load locale="ko" />\n</div>',
+      searchText: '\uD30C\uC6B4\uB370\uC774\uC158 \uBAA8\uB4E0 refineui \uC11C\uD53C\uC2A4\uAC00 \uAE30\uBC18\uD558\uB294 \uB514\uC790\uC778 \uD1A0\uD070\uACFC \uB808\uC774\uC544\uC6C3 \uC6D0\uCE59. \n<div class="not-content">\n  <foundationcatalog client:load locale="ko" />\n</div>\n'
+    },
+    {
+      slug: "ko/foundations/layout",
+      href: "/ko/foundations/layout/",
+      title: "\uB808\uC774\uC544\uC6C3",
+      description: "\uACF5\uAC04 \uB9AC\uB4EC, \uCEE8\uD14C\uC774\uB108, \uADF8\uB9AC\uB4DC, \uC815\uB82C, \uBC18\uC751\uD615 \uADDC\uCE59.",
+      category: "guides",
+      content: '\uB808\uC774\uC544\uC6C3 \uD30C\uC6B4\uB370\uC774\uC158\uC740 \uACF5\uAC04\uC774 \uC5B4\uB5BB\uAC8C \uAD6C\uC131\uB418\uB294\uC9C0 \uC124\uBA85\uD569\uB2C8\uB2E4. \uC774\uB97C \uAD6C\uD604\uD558\uB294 React \uD504\uB9AC\uBBF8\uD2F0\uBE0C\uB294 **[Box, Stack, Grid, Container](/ko/components/stack/)** (\uADF8\uB9AC\uACE0 Resizable, ScrollArea)\uC785\uB2C8\uB2E4.\n\n## \uC6D0\uCE59\n\n1. **\uD1A0\uD070 \uAC2D\uACFC \uD328\uB529** \u2014 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C Spacing \uD0A4(`sizeSmall`, `sizeLarge`)\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.\n2. **\uD504\uB9AC\uBBF8\uD2F0\uBE0C \uC870\uD569** \u2014 \uC81C\uD488 \uD654\uBA74\uC5D0\uC11C \uC77C\uD68C\uC131 flex CSS\uBCF4\uB2E4 `Stack` / `Grid` / `Container`\uB97C \uC6B0\uC120\uD558\uC138\uC694.\n3. **\uD558\uB098\uC758 \uC8FC \uC77D\uAE30 \uB108\uBE44** \u2014 \uAE34 \uD14D\uC2A4\uD2B8\uB294 `Container` \uB610\uB294 Foundation max-width \uD1A0\uD070\uC73C\uB85C \uC81C\uD55C\uD558\uC138\uC694.\n\n## Container\n\n\uCEE8\uD14C\uC774\uB108\uB294 \uCF58\uD150\uCE20\uB97C \uAC00\uC6B4\uB370 \uB450\uACE0 \uB108\uBE44\uB97C \uC81C\uD55C\uD574 \uAE34 \uD398\uC774\uC9C0\uAC00 \uC77D\uAE30 \uC27D\uAC8C \uC720\uC9C0\uB429\uB2C8\uB2E4. React\uC5D0\uC11C\uB294 Spacing \uD1A0\uD070 \uD328\uB529\uACFC \uD568\uAED8 [`Container`](/ko/components/container/) \uD504\uB9AC\uBBF8\uD2F0\uBE0C\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n**\uC5B8\uC81C \uC4F0\uB098**\n\n- \uBB38\uC11C\xB7\uB9C8\uCF00\uD305 \uD398\uC774\uC9C0\n- \uC640\uC774\uB4DC \uD654\uBA74\uC5D0\uC11C \uAC00\uC7A5\uC790\uB9AC\uAE4C\uC9C0 \uB298\uC5B4\uB098\uBA74 \uC548 \uB418\uB294 \uD3FC\xB7\uC124\uC815 \uCEEC\uB7FC\n\n**\uADDC\uCE59**\n\n- \uC0C8 \uBE0C\uB808\uC774\uD06C\uD3EC\uC778\uD2B8 \uB108\uBE44\uB97C \uB9CC\uB4E4\uAE30\uBCF4\uB2E4 Foundation / \uCEF4\uD3EC\uB10C\uD2B8 max-width \uD1A0\uD070\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n- \uC989\uD765 \uB9C8\uC9C4\uBCF4\uB2E4 \uD398\uC774\uC9C0 \uC218\uC900 \uC218\uC9C1 Spacing(`sizeXXLarge` / `sizeXXXLarge`)\uACFC \uD568\uAED8 \uC4F0\uC138\uC694.\n- \uC911\uCCA9 \uCEE8\uD14C\uC774\uB108\uB294 \uBCF4\uD1B5 \uBD88\uD544\uC694\uD569\uB2C8\uB2E4 \u2014 \uD398\uC774\uC9C0 \uC178 \uD558\uB098\uB85C \uCDA9\uBD84\uD569\uB2C8\uB2E4.\n\n## Grid\n\n\uCF58\uD150\uCE20\uAC00 2\uCC28\uC6D0\uC77C \uB54C(\uCE74\uB4DC, \uB300\uC2DC\uBCF4\uB4DC, \uAC24\uB7EC\uB9AC) \uADF8\uB9AC\uB4DC\uB97C \uC0AC\uC6A9\uD558\uC138\uC694. React\uC5D0\uC11C\uB294 `columns` \uB610\uB294 `minItem`(Foundation \uC0AC\uC774\uC988)\uACFC Spacing \uD1A0\uD070 \uAC2D\uC73C\uB85C [`Grid`](/ko/components/grid/)\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n**\uC5B8\uC81C \uC4F0\uB098**\n\n- \uBC18\uBCF5\uB418\uB294 \uCE74\uB4DC\xB7\uD0C0\uC77C\n- \uB370\uC2A4\uD06C\uD1B1\uC5D0\uC11C \uB450 \uCEEC\uB7FC \uD3FC \uD544\uB4DC\n- \uC815\uB82C\uB41C \uCEEC\uB7FC\uC774 \uD544\uC694\uD55C \uBC00\uC9D1 \uB370\uC774\uD130\n\n**\uADDC\uCE59**\n\n- \uAC2D\uC740 Spacing \uD1A0\uD070\uC5D0\uC11C \uC635\uB2C8\uB2E4(`gap="sizeLarge"`).\n- \uC720\uB3D9 \uCE74\uB4DC \uADF8\uB9AC\uB4DC\uC5D0\uB294 `minItem` auto-fit\uC744, \uAC1C\uC218\uAC00 \uC758\uB3C4\uC801\uC77C \uB54C\uB294 \uACE0\uC815 `columns`\uB97C \uC6B0\uC120\uD558\uC138\uC694.\n- \uC791\uC740 \uBDF0\uD3EC\uD2B8\uC5D0\uC11C\uB294 \uD55C \uCEEC\uB7FC\uC73C\uB85C \uC811\uC73C\uC138\uC694 ([\uBC18\uC751\uD615](#responsive) \uCC38\uACE0).\n\n## \uC815\uB82C\n\n\uC815\uB82C\uC740 \uC790\uC2DD\uC774 \uC8FC\uCD95\xB7\uAD50\uCC28\uCD95\uC5D0 \uC5B4\uB5BB\uAC8C \uC549\uB294\uC9C0 \uC81C\uC5B4\uD569\uB2C8\uB2E4. React\uC5D0\uC11C `Stack`\uACFC `Grid`\uB294 `align`\uACFC `justify`(`start`, `center`, `end`, `between`, \u2026)\uB97C \uB178\uCD9C\uD569\uB2C8\uB2E4.\n\n- \uD3FC\uC5D0\uC11C\uB294 \uB77C\uBCA8\uACFC \uCEE8\uD2B8\uB864\uC744 \uACF5\uC720 start \uAC00\uC7A5\uC790\uB9AC\uC5D0 \uB9DE\uCD94\uC138\uC694.\n- \uBE14\uB85D\uC774 \uC758\uB3C4\uC801\uC73C\uB85C \uCD08\uC810\uC77C \uB54C\uB9CC \uAC00\uC6B4\uB370 \uC815\uB82C\uD558\uC138\uC694(\uBE48 \uC0C1\uD0DC, \uB2E4\uC774\uC5BC\uB85C\uADF8).\n- \uD234\uBC14(\uC67C\uCABD \uC81C\uBAA9, \uC624\uB978\uCABD \uC561\uC158)\uC5D0\uB294 \uC790\uC2DD\uB9C8\uB2E4 `margin-left: auto`\uB97C \uC4F0\uAE30\uBCF4\uB2E4 `between`\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n\n## \uBC18\uC751\uD615\n\n\uB808\uC774\uC544\uC6C3\uC740 Spacing\xB7\uD0C0\uC785 \uD1A0\uD070\uC744 \uC548\uC815\uC801\uC73C\uB85C \uC720\uC9C0\uD558\uBA74\uC11C \uBDF0\uD3EC\uD2B8\uC5D0 \uB9DE\uCDB0 \uB9AC\uD50C\uB85C\uC6B0\uD574\uC57C \uD569\uB2C8\uB2E4. \uC791\uC740 \uD654\uBA74\uC5D0\uC11C\uB294 \uCEEC\uB7FC\uC744 \uC904\uC774\uACE0, \uC2A4\uD0DD\uC744 \uC313\uC73C\uBA70, \uCEE8\uD2B8\uB864\uC744 \uC804\uCCB4 \uB108\uBE44\uB85C \uB450\uB294 \uD3B8\uC774 \uC88B\uC2B5\uB2C8\uB2E4.\n\n1. **\uAC19\uC740 \uD1A0\uD070** \u2014 \uBAA8\uBC14\uC77C\uC6A9 \uB450 \uBC88\uC9F8 Spacing \uC2A4\uCF00\uC77C\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n2. **\uAD6C\uC870 \uC811\uAE30** \u2014 \uADF8\uB9AC\uB4DC\uB294 \uD55C \uCEEC\uB7FC\uC774 \uB418\uACE0, \uB098\uB780\uD55C \uC2A4\uD0DD\uC740 `direction="column"`\uC774 \uB429\uB2C8\uB2E4.\n3. **\uD130\uCE58 \uD0C0\uAE43** \u2014 \uCEF4\uD3EC\uB10C\uD2B8 API\uC758 \uCEE8\uD2B8\uB864 \uD06C\uAE30(`size="md"` / `lg`)\uB97C \uC720\uC9C0\uD558\uC138\uC694. Foundation \uCEE8\uD2B8\uB864 \uB192\uC774 \uC544\uB798\uB85C \uC904\uC774\uC9C0 \uB9C8\uC138\uC694.\n4. **\uB0B4\uBE44\uAC8C\uC774\uC158** \u2014 \uB370\uC2A4\uD06C\uD1B1 \uB808\uC77C\uC740 \uC791\uC740 \uD654\uBA74\uC5D0\uC11C \uB4DC\uB85C\uC5B4\uAC00 \uB429\uB2C8\uB2E4 ([Drawer](/ko/components/drawer/), [Sidebar](/ko/components/sidebar/) \uCC38\uACE0).\n\n## \uAD00\uB828 \uCEF4\uD3EC\uB10C\uD2B8\n\n- [Stack](/ko/components/stack/)\n- [Grid](/ko/components/grid/)\n- [Container](/ko/components/container/)\n- [Box](/ko/components/box/)',
+      searchText: '\uB808\uC774\uC544\uC6C3 \uACF5\uAC04 \uB9AC\uB4EC, \uCEE8\uD14C\uC774\uB108, \uADF8\uB9AC\uB4DC, \uC815\uB82C, \uBC18\uC751\uD615 \uADDC\uCE59. \n\uB808\uC774\uC544\uC6C3 \uD30C\uC6B4\uB370\uC774\uC158\uC740 \uACF5\uAC04\uC774 \uC5B4\uB5BB\uAC8C \uAD6C\uC131\uB418\uB294\uC9C0 \uC124\uBA85\uD569\uB2C8\uB2E4. \uC774\uB97C \uAD6C\uD604\uD558\uB294 react \uD504\uB9AC\uBBF8\uD2F0\uBE0C\uB294 **[box, stack, grid, container](/ko/components/stack/)** (\uADF8\uB9AC\uACE0 resizable, scrollarea)\uC785\uB2C8\uB2E4.\n\n## \uC6D0\uCE59\n\n1. **\uD1A0\uD070 \uAC2D\uACFC \uD328\uB529** \u2014 \uC784\uC758 `px`\uAC00 \uC544\uB2C8\uB77C spacing \uD0A4(`sizesmall`, `sizelarge`)\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.\n2. **\uD504\uB9AC\uBBF8\uD2F0\uBE0C \uC870\uD569** \u2014 \uC81C\uD488 \uD654\uBA74\uC5D0\uC11C \uC77C\uD68C\uC131 flex css\uBCF4\uB2E4 `stack` / `grid` / `container`\uB97C \uC6B0\uC120\uD558\uC138\uC694.\n3. **\uD558\uB098\uC758 \uC8FC \uC77D\uAE30 \uB108\uBE44** \u2014 \uAE34 \uD14D\uC2A4\uD2B8\uB294 `container` \uB610\uB294 foundation max-width \uD1A0\uD070\uC73C\uB85C \uC81C\uD55C\uD558\uC138\uC694.\n\n## container\n\n\uCEE8\uD14C\uC774\uB108\uB294 \uCF58\uD150\uCE20\uB97C \uAC00\uC6B4\uB370 \uB450\uACE0 \uB108\uBE44\uB97C \uC81C\uD55C\uD574 \uAE34 \uD398\uC774\uC9C0\uAC00 \uC77D\uAE30 \uC27D\uAC8C \uC720\uC9C0\uB429\uB2C8\uB2E4. react\uC5D0\uC11C\uB294 spacing \uD1A0\uD070 \uD328\uB529\uACFC \uD568\uAED8 [`container`](/ko/components/container/) \uD504\uB9AC\uBBF8\uD2F0\uBE0C\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n**\uC5B8\uC81C \uC4F0\uB098**\n\n- \uBB38\uC11C\xB7\uB9C8\uCF00\uD305 \uD398\uC774\uC9C0\n- \uC640\uC774\uB4DC \uD654\uBA74\uC5D0\uC11C \uAC00\uC7A5\uC790\uB9AC\uAE4C\uC9C0 \uB298\uC5B4\uB098\uBA74 \uC548 \uB418\uB294 \uD3FC\xB7\uC124\uC815 \uCEEC\uB7FC\n\n**\uADDC\uCE59**\n\n- \uC0C8 \uBE0C\uB808\uC774\uD06C\uD3EC\uC778\uD2B8 \uB108\uBE44\uB97C \uB9CC\uB4E4\uAE30\uBCF4\uB2E4 foundation / \uCEF4\uD3EC\uB10C\uD2B8 max-width \uD1A0\uD070\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n- \uC989\uD765 \uB9C8\uC9C4\uBCF4\uB2E4 \uD398\uC774\uC9C0 \uC218\uC900 \uC218\uC9C1 spacing(`sizexxlarge` / `sizexxxlarge`)\uACFC \uD568\uAED8 \uC4F0\uC138\uC694.\n- \uC911\uCCA9 \uCEE8\uD14C\uC774\uB108\uB294 \uBCF4\uD1B5 \uBD88\uD544\uC694\uD569\uB2C8\uB2E4 \u2014 \uD398\uC774\uC9C0 \uC178 \uD558\uB098\uB85C \uCDA9\uBD84\uD569\uB2C8\uB2E4.\n\n## grid\n\n\uCF58\uD150\uCE20\uAC00 2\uCC28\uC6D0\uC77C \uB54C(\uCE74\uB4DC, \uB300\uC2DC\uBCF4\uB4DC, \uAC24\uB7EC\uB9AC) \uADF8\uB9AC\uB4DC\uB97C \uC0AC\uC6A9\uD558\uC138\uC694. react\uC5D0\uC11C\uB294 `columns` \uB610\uB294 `minitem`(foundation \uC0AC\uC774\uC988)\uACFC spacing \uD1A0\uD070 \uAC2D\uC73C\uB85C [`grid`](/ko/components/grid/)\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.\n\n**\uC5B8\uC81C \uC4F0\uB098**\n\n- \uBC18\uBCF5\uB418\uB294 \uCE74\uB4DC\xB7\uD0C0\uC77C\n- \uB370\uC2A4\uD06C\uD1B1\uC5D0\uC11C \uB450 \uCEEC\uB7FC \uD3FC \uD544\uB4DC\n- \uC815\uB82C\uB41C \uCEEC\uB7FC\uC774 \uD544\uC694\uD55C \uBC00\uC9D1 \uB370\uC774\uD130\n\n**\uADDC\uCE59**\n\n- \uAC2D\uC740 spacing \uD1A0\uD070\uC5D0\uC11C \uC635\uB2C8\uB2E4(`gap="sizelarge"`).\n- \uC720\uB3D9 \uCE74\uB4DC \uADF8\uB9AC\uB4DC\uC5D0\uB294 `minitem` auto-fit\uC744, \uAC1C\uC218\uAC00 \uC758\uB3C4\uC801\uC77C \uB54C\uB294 \uACE0\uC815 `columns`\uB97C \uC6B0\uC120\uD558\uC138\uC694.\n- \uC791\uC740 \uBDF0\uD3EC\uD2B8\uC5D0\uC11C\uB294 \uD55C \uCEEC\uB7FC\uC73C\uB85C \uC811\uC73C\uC138\uC694 ([\uBC18\uC751\uD615](#responsive) \uCC38\uACE0).\n\n## \uC815\uB82C\n\n\uC815\uB82C\uC740 \uC790\uC2DD\uC774 \uC8FC\uCD95\xB7\uAD50\uCC28\uCD95\uC5D0 \uC5B4\uB5BB\uAC8C \uC549\uB294\uC9C0 \uC81C\uC5B4\uD569\uB2C8\uB2E4. react\uC5D0\uC11C `stack`\uACFC `grid`\uB294 `align`\uACFC `justify`(`start`, `center`, `end`, `between`, \u2026)\uB97C \uB178\uCD9C\uD569\uB2C8\uB2E4.\n\n- \uD3FC\uC5D0\uC11C\uB294 \uB77C\uBCA8\uACFC \uCEE8\uD2B8\uB864\uC744 \uACF5\uC720 start \uAC00\uC7A5\uC790\uB9AC\uC5D0 \uB9DE\uCD94\uC138\uC694.\n- \uBE14\uB85D\uC774 \uC758\uB3C4\uC801\uC73C\uB85C \uCD08\uC810\uC77C \uB54C\uB9CC \uAC00\uC6B4\uB370 \uC815\uB82C\uD558\uC138\uC694(\uBE48 \uC0C1\uD0DC, \uB2E4\uC774\uC5BC\uB85C\uADF8).\n- \uD234\uBC14(\uC67C\uCABD \uC81C\uBAA9, \uC624\uB978\uCABD \uC561\uC158)\uC5D0\uB294 \uC790\uC2DD\uB9C8\uB2E4 `margin-left: auto`\uB97C \uC4F0\uAE30\uBCF4\uB2E4 `between`\uC744 \uC6B0\uC120\uD558\uC138\uC694.\n\n## \uBC18\uC751\uD615\n\n\uB808\uC774\uC544\uC6C3\uC740 spacing\xB7\uD0C0\uC785 \uD1A0\uD070\uC744 \uC548\uC815\uC801\uC73C\uB85C \uC720\uC9C0\uD558\uBA74\uC11C \uBDF0\uD3EC\uD2B8\uC5D0 \uB9DE\uCDB0 \uB9AC\uD50C\uB85C\uC6B0\uD574\uC57C \uD569\uB2C8\uB2E4. \uC791\uC740 \uD654\uBA74\uC5D0\uC11C\uB294 \uCEEC\uB7FC\uC744 \uC904\uC774\uACE0, \uC2A4\uD0DD\uC744 \uC313\uC73C\uBA70, \uCEE8\uD2B8\uB864\uC744 \uC804\uCCB4 \uB108\uBE44\uB85C \uB450\uB294 \uD3B8\uC774 \uC88B\uC2B5\uB2C8\uB2E4.\n\n1. **\uAC19\uC740 \uD1A0\uD070** \u2014 \uBAA8\uBC14\uC77C\uC6A9 \uB450 \uBC88\uC9F8 spacing \uC2A4\uCF00\uC77C\uC744 \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n2. **\uAD6C\uC870 \uC811\uAE30** \u2014 \uADF8\uB9AC\uB4DC\uB294 \uD55C \uCEEC\uB7FC\uC774 \uB418\uACE0, \uB098\uB780\uD55C \uC2A4\uD0DD\uC740 `direction="column"`\uC774 \uB429\uB2C8\uB2E4.\n3. **\uD130\uCE58 \uD0C0\uAE43** \u2014 \uCEF4\uD3EC\uB10C\uD2B8 api\uC758 \uCEE8\uD2B8\uB864 \uD06C\uAE30(`size="md"` / `lg`)\uB97C \uC720\uC9C0\uD558\uC138\uC694. foundation \uCEE8\uD2B8\uB864 \uB192\uC774 \uC544\uB798\uB85C \uC904\uC774\uC9C0 \uB9C8\uC138\uC694.\n4. **\uB0B4\uBE44\uAC8C\uC774\uC158** \u2014 \uB370\uC2A4\uD06C\uD1B1 \uB808\uC77C\uC740 \uC791\uC740 \uD654\uBA74\uC5D0\uC11C \uB4DC\uB85C\uC5B4\uAC00 \uB429\uB2C8\uB2E4 ([drawer](/ko/components/drawer/), [sidebar](/ko/components/sidebar/) \uCC38\uACE0).\n\n## \uAD00\uB828 \uCEF4\uD3EC\uB10C\uD2B8\n\n- [stack](/ko/components/stack/)\n- [grid](/ko/components/grid/)\n- [container](/ko/components/container/)\n- [box](/ko/components/box/)\n'
+    },
+    {
+      slug: "ko/foundations/motion",
+      href: "/ko/foundations/motion/",
+      title: "\uBAA8\uC158",
+      description: "\uC778\uD130\uB799\uC158\uC744 \uC704\uD55C duration, easing, scale, distance \uC5ED\uD560.",
+      category: "guides",
+      content: '**\uC2DC\uB9E8\uD2F1 \uC5ED\uD560**(`fast`, `press`, `panel`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 CSS `--refineui-motion-duration-fast`, `--refineui-motion-scale-press`. \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 `150ms`\uB098 \uC77C\uD68C\uC131 \uCEE4\uBE0C\uB97C \uC4F0\uC9C0 \uB9C8\uC138\uC694. \uCEE8\uD2B8\uB864 hover\uC640 focus\uB294 \uC774\uBBF8 `refineui.css`\uAC00 \uB2F4\uB2F9\uD569\uB2C8\uB2E4.\n\n## \uC5ED\uD560 (\uC694\uC57D)\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uBAA8\uC158 \uC5ED\uD560 \uC694\uC57D"\n    columns={[\n      { key: "kind", header: "\uC885\uB958" },\n      { key: "examples", header: "\uC608\uC2DC", mono: true },\n    ]}\n    rows={[\n      { kind: "Duration", examples: "instant, fast, normal, medium, slow, overlay, panel" },\n      { kind: "Easing", examples: "standard, emphasized, panel, content, easeOut" },\n      { kind: "Scale", examples: "enter, press, hoverGrow" },\n      { kind: "Distance", examples: "float (4px)" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <MotionPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.control {\n  transition: transform var(--refineui-motion-duration-fast)\n    var(--refineui-motion-easing-standard);\n}\n\n.control[data-pressed] {\n  transform: scale(var(--refineui-motion-scale-press));\n}\n```',
+      searchText: '\uBAA8\uC158 \uC778\uD130\uB799\uC158\uC744 \uC704\uD55C duration, easing, scale, distance \uC5ED\uD560. \n**\uC2DC\uB9E8\uD2F1 \uC5ED\uD560**(`fast`, `press`, `panel`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694 \u2014 css `--refineui-motion-duration-fast`, `--refineui-motion-scale-press`. \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 `150ms`\uB098 \uC77C\uD68C\uC131 \uCEE4\uBE0C\uB97C \uC4F0\uC9C0 \uB9C8\uC138\uC694. \uCEE8\uD2B8\uB864 hover\uC640 focus\uB294 \uC774\uBBF8 `refineui.css`\uAC00 \uB2F4\uB2F9\uD569\uB2C8\uB2E4.\n\n## \uC5ED\uD560 (\uC694\uC57D)\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uBAA8\uC158 \uC5ED\uD560 \uC694\uC57D"\n    columns={[\n      { key: "kind", header: "\uC885\uB958" },\n      { key: "examples", header: "\uC608\uC2DC", mono: true },\n    ]}\n    rows={[\n      { kind: "duration", examples: "instant, fast, normal, medium, slow, overlay, panel" },\n      { kind: "easing", examples: "standard, emphasized, panel, content, easeout" },\n      { kind: "scale", examples: "enter, press, hovergrow" },\n      { kind: "distance", examples: "float (4px)" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <motionpreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.control {\n  transition: transform var(--refineui-motion-duration-fast)\n    var(--refineui-motion-easing-standard);\n}\n\n.control[data-pressed] {\n  transform: scale(var(--refineui-motion-scale-press));\n}\n```\n'
+    },
+    {
+      slug: "ko/foundations/opacity",
+      href: "/ko/foundations/opacity/",
+      title: "\uD22C\uBA85\uB3C4",
+      description: "\uACF5\uC720 \uD22C\uBA85\uB3C4 \uC2A4\uD15D\uACFC \uC624\uBC84\uB808\uC774 \uD5EC\uD37C.",
+      category: "guides",
+      content: '<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { token: "opacityFull", value: "1", use: "\uAE30\uBCF8" },\n      { token: "opacityDisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n      { token: "opacityGhostHover", value: "0.08", use: "Ghost hover wash (\uB2E4\uD06C)" },\n    ]}\n  />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 \uCEE4\uC2A4\uD140 \uC54C\uD30C\uAC00 \uC544\uB2C8\uB77C `surfaceOverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0).\n\n<div class="not-content">\n  <OpacityPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```',
+      searchText: '\uD22C\uBA85\uB3C4 \uACF5\uC720 \uD22C\uBA85\uB3C4 \uC2A4\uD15D\uACFC \uC624\uBC84\uB808\uC774 \uD5EC\uD37C. \n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uD22C\uBA85\uB3C4 \uD1A0\uD070"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n      { key: "use", header: "\uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { token: "opacityfull", value: "1", use: "\uAE30\uBCF8" },\n      { token: "opacitydisabled", value: "0.5", use: "\uBE44\uD65C\uC131 wash" },\n      { token: "opacityghosthover", value: "0.08", use: "ghost hover wash (\uB2E4\uD06C)" },\n    ]}\n  />\n</div>\n\n\uD398\uC774\uC9C0 \uB514\uBA38\uB294 \uCEE4\uC2A4\uD140 \uC54C\uD30C\uAC00 \uC544\uB2C8\uB77C `surfaceoverlay` / `--refineui-overlay-backdrop`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4 ([\uCEEC\uB7EC](/ko/foundations/color/) \uCC38\uACE0).\n\n<div class="not-content">\n  <opacitypreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.scrim {\n  background: var(--refineui-overlay-backdrop);\n}\n```\n'
+    },
+    {
+      slug: "ko/foundations/radius",
+      href: "/ko/foundations/radius/",
+      title: "Radius",
+      description: "Foundation\uC758 \uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30 \u2014 \uC784\uC758 \uD53D\uC140\uC774 \uC544\uB2C8\uB77C \uD0A4\uB97C \uC0AC\uC6A9\uD558\uC138\uC694.",
+      category: "guides",
+      content: '\uBAA8\uC11C\uB9AC\uB294 Foundation \uD0A4(`roundedLarge`, `roundedXXLarge`)\uC785\uB2C8\uB2E4. `roundedCircle`\uB294 pill / \uC644\uC804 \uC6D0\uD615\uC785\uB2C8\uB2E4.\n\n## \uC2A4\uCF00\uC77C\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Radius \uC2A4\uCF00\uC77C"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n    ]}\n    rows={[\n      { token: "roundedNone", value: "0" },\n      { token: "roundedXSmall", value: "2px" },\n      { token: "roundedSmall", value: "4px" },\n      { token: "roundedMedium", value: "6px" },\n      { token: "roundedLarge", value: "8px" },\n      { token: "roundedXLarge", value: "12px" },\n      { token: "roundedXXLarge", value: "16px" },\n      { token: "roundedCircle", value: "9999px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <RadiusPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Box\n  padding="sizeLarge"\n  radius="roundedXLarge"\n  border="strokeWidthThin"\n  borderColor="borderDefault"\n  background="backgroundSurface"\n>\n  Rounded surface\n</Box>\n```',
+      searchText: 'radius foundation\uC758 \uBAA8\uC11C\uB9AC \uB465\uAE00\uAE30 \u2014 \uC784\uC758 \uD53D\uC140\uC774 \uC544\uB2C8\uB77C \uD0A4\uB97C \uC0AC\uC6A9\uD558\uC138\uC694. \n\uBAA8\uC11C\uB9AC\uB294 foundation \uD0A4(`roundedlarge`, `roundedxxlarge`)\uC785\uB2C8\uB2E4. `roundedcircle`\uB294 pill / \uC644\uC804 \uC6D0\uD615\uC785\uB2C8\uB2E4.\n\n## \uC2A4\uCF00\uC77C\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="radius \uC2A4\uCF00\uC77C"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n    ]}\n    rows={[\n      { token: "roundednone", value: "0" },\n      { token: "roundedxsmall", value: "2px" },\n      { token: "roundedsmall", value: "4px" },\n      { token: "roundedmedium", value: "6px" },\n      { token: "roundedlarge", value: "8px" },\n      { token: "roundedxlarge", value: "12px" },\n      { token: "roundedxxlarge", value: "16px" },\n      { token: "roundedcircle", value: "9999px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <radiuspreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<box\n  padding="sizelarge"\n  radius="roundedxlarge"\n  border="strokewidththin"\n  bordercolor="borderdefault"\n  background="backgroundsurface"\n>\n  rounded surface\n</box>\n```\n'
+    },
+    {
+      slug: "ko/foundations/sizing",
+      href: "/ko/foundations/sizing/",
+      title: "Sizing",
+      description: "Foundation \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D, \uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58 \uCE58\uC218.",
+      category: "guides",
+      content: '\uCEF4\uD3EC\uB10C\uD2B8 \uCE58\uC218\uB294 `@refineui/tokens`\uC758 `componentSizes`\uB97C \uD1B5\uD574 **Foundation \uC0AC\uC774\uC988 \uC2A4\uD15D**\uC744 \uBCC4\uCE6D\uD569\uB2C8\uB2E4. React \uC2A4\uD0C0\uC77C\uC5D0 \uCEE8\uD2B8\uB864 \uB192\uC774\uB098 \uC544\uC774\uCF58 \uBC15\uC2A4\uB97C \uD558\uB4DC\uCF54\uB529\uD558\uC9C0 \uB9C8\uC138\uC694.\n\n## \uBB34\uC5C7\uC744 \uC4F8\uAE4C\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Sizing \uB808\uC774\uC5B4"\n    columns={[\n      { key: "layer", header: "\uB808\uC774\uC5B4", mono: true },\n      { key: "purpose", header: "\uBAA9\uC801" },\n    ]}\n    rows={[\n      { layer: "foundationSizes", purpose: "\uC804\uC5ED \uC0AC\uC774\uC988 \uC2A4\uD15D (Foundation\uC758 \uB2E8\uC77C \uC18C\uC2A4)" },\n      { layer: "componentSizes", purpose: "Web Kit \uCE58\uC218 \uBCC4\uCE6D \u2192 Foundation \uD0A4" },\n      { layer: "iconSizes", purpose: "\uAE00\uB9AC\uD504 \uD06C\uAE30 px (xxsmall \u2026 xxlarge)" },\n    ]}\n  />\n</div>\n\n## \uC544\uC774\uCF58 \uD06C\uAE30\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uC544\uC774\uCF58 \uD06C\uAE30"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "px", header: "px", mono: true },\n    ]}\n    rows={[\n      { token: "xxsmall", px: "12" },\n      { token: "xsmall", px: "16" },\n      { token: "small", px: "20" },\n      { token: "medium", px: "24" },\n      { token: "large", px: "28" },\n      { token: "xlarge", px: "32" },\n      { token: "xxlarge", px: "48" },\n    ]}\n  />\n</div>\n\n## \uC608\uC2DC\n\n\uCEE8\uD2B8\uB864 \uB192\uC774(\uBC84\uD2BC, \uC778\uD48B)\uC640 \uC624\uBC84\uB808\uC774 \uB108\uBE44\uB294 `--refineui-size-button-min-height-md`, `--refineui-size-dialog-max-width` \uAC19\uC740 CSS \uBCC0\uC218\uB85C \uD574\uC11D\uB429\uB2C8\uB2E4. \uCEE4\uC2A4\uD140 \uD06C\uB86C\uC744 \uC870\uD569\uD558\uB294 \uACBD\uC6B0\uAC00 \uC544\uB2C8\uBA74 \uC81C\uD488 CSS\uC5D0\uC11C \uADF8 \uBCC0\uC218\uB97C \uC77D\uAE30\uBCF4\uB2E4 \uCEF4\uD3EC\uB10C\uD2B8 props(`size="md"`)\uB97C \uC6B0\uC120\uD558\uC138\uC694.\n\n```tsx\n<WebIcon name="search" size={iconSizes.small} />\n```',
+      searchText: 'sizing foundation \uB808\uC774\uC544\uC6C3 \uC2A4\uD15D, \uCEE8\uD2B8\uB864 \uB192\uC774, \uC544\uC774\uCF58 \uCE58\uC218. \n\uCEF4\uD3EC\uB10C\uD2B8 \uCE58\uC218\uB294 `@refineui/tokens`\uC758 `componentsizes`\uB97C \uD1B5\uD574 **foundation \uC0AC\uC774\uC988 \uC2A4\uD15D**\uC744 \uBCC4\uCE6D\uD569\uB2C8\uB2E4. react \uC2A4\uD0C0\uC77C\uC5D0 \uCEE8\uD2B8\uB864 \uB192\uC774\uB098 \uC544\uC774\uCF58 \uBC15\uC2A4\uB97C \uD558\uB4DC\uCF54\uB529\uD558\uC9C0 \uB9C8\uC138\uC694.\n\n## \uBB34\uC5C7\uC744 \uC4F8\uAE4C\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="sizing \uB808\uC774\uC5B4"\n    columns={[\n      { key: "layer", header: "\uB808\uC774\uC5B4", mono: true },\n      { key: "purpose", header: "\uBAA9\uC801" },\n    ]}\n    rows={[\n      { layer: "foundationsizes", purpose: "\uC804\uC5ED \uC0AC\uC774\uC988 \uC2A4\uD15D (foundation\uC758 \uB2E8\uC77C \uC18C\uC2A4)" },\n      { layer: "componentsizes", purpose: "web kit \uCE58\uC218 \uBCC4\uCE6D \u2192 foundation \uD0A4" },\n      { layer: "iconsizes", purpose: "\uAE00\uB9AC\uD504 \uD06C\uAE30 px (xxsmall \u2026 xxlarge)" },\n    ]}\n  />\n</div>\n\n## \uC544\uC774\uCF58 \uD06C\uAE30\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uC544\uC774\uCF58 \uD06C\uAE30"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "px", header: "px", mono: true },\n    ]}\n    rows={[\n      { token: "xxsmall", px: "12" },\n      { token: "xsmall", px: "16" },\n      { token: "small", px: "20" },\n      { token: "medium", px: "24" },\n      { token: "large", px: "28" },\n      { token: "xlarge", px: "32" },\n      { token: "xxlarge", px: "48" },\n    ]}\n  />\n</div>\n\n## \uC608\uC2DC\n\n\uCEE8\uD2B8\uB864 \uB192\uC774(\uBC84\uD2BC, \uC778\uD48B)\uC640 \uC624\uBC84\uB808\uC774 \uB108\uBE44\uB294 `--refineui-size-button-min-height-md`, `--refineui-size-dialog-max-width` \uAC19\uC740 css \uBCC0\uC218\uB85C \uD574\uC11D\uB429\uB2C8\uB2E4. \uCEE4\uC2A4\uD140 \uD06C\uB86C\uC744 \uC870\uD569\uD558\uB294 \uACBD\uC6B0\uAC00 \uC544\uB2C8\uBA74 \uC81C\uD488 css\uC5D0\uC11C \uADF8 \uBCC0\uC218\uB97C \uC77D\uAE30\uBCF4\uB2E4 \uCEF4\uD3EC\uB10C\uD2B8 props(`size="md"`)\uB97C \uC6B0\uC120\uD558\uC138\uC694.\n\n```tsx\n<webicon name="search" size={iconsizes.small} />\n```\n'
+    },
+    {
+      slug: "ko/foundations/spacing",
+      href: "/ko/foundations/spacing/",
+      title: "Spacing",
+      description: "\uAC2D, \uD328\uB529, \uB9C8\uC9C4\uC744 \uC704\uD55C T-shirt Spacing \uC2A4\uCF00\uC77C.",
+      category: "guides",
+      content: '\uAC2D\uACFC \uD328\uB529\uC740 `spacings`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4. \uC784\uC758 \uD53D\uC140\uC774 \uC544\uB2C8\uB77C `Stack`, `Box`, \uB808\uC774\uC544\uC6C3 props\uC758 \uC774 \uD0A4\uB97C \uC6B0\uC120\uD558\uC138\uC694.\n\n## \uC2A4\uCF00\uC77C\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="Spacing \uC2A4\uCF00\uC77C"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n    ]}\n    rows={[\n      { token: "sizeNone", value: "0" },\n      { token: "sizeXXXSmall", value: "2px" },\n      { token: "sizeXXSmall", value: "4px" },\n      { token: "sizeXSmall", value: "6px" },\n      { token: "sizeSmall", value: "8px" },\n      { token: "sizeMedium", value: "10px" },\n      { token: "sizeLarge", value: "16px" },\n      { token: "sizeXLarge", value: "20px" },\n      { token: "sizeXXLarge", value: "24px" },\n      { token: "sizeXXXLarge", value: "32px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <SpacingPreview client:load />\n</div>\n\n## \uC544\uC774\uCF58 \uAE00\uB9AC\uD504 \uD06C\uAE30\n\n\uC544\uC774\uCF58 \uD53D\uC140\uC740 Spacing\uACFC \uBCC4\uAC1C\uC785\uB2C8\uB2E4(`iconSizes`). `WebIcon` / \uAE00\uB9AC\uD504 \uC2AC\uB86F\uC5D0\uB9CC \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content">\n  <IconSizePreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Stack gap="sizeMedium">\n  <Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">\n    Inset\n  </Box>\n</Stack>\n```',
+      searchText: 'spacing \uAC2D, \uD328\uB529, \uB9C8\uC9C4\uC744 \uC704\uD55C t-shirt spacing \uC2A4\uCF00\uC77C. \n\uAC2D\uACFC \uD328\uB529\uC740 `spacings`\uB97C \uC0AC\uC6A9\uD569\uB2C8\uB2E4. \uC784\uC758 \uD53D\uC140\uC774 \uC544\uB2C8\uB77C `stack`, `box`, \uB808\uC774\uC544\uC6C3 props\uC758 \uC774 \uD0A4\uB97C \uC6B0\uC120\uD558\uC138\uC694.\n\n## \uC2A4\uCF00\uC77C\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="spacing \uC2A4\uCF00\uC77C"\n    columns={[\n      { key: "token", header: "\uD1A0\uD070", mono: true },\n      { key: "value", header: "\uAC12", mono: true },\n    ]}\n    rows={[\n      { token: "sizenone", value: "0" },\n      { token: "sizexxxsmall", value: "2px" },\n      { token: "sizexxsmall", value: "4px" },\n      { token: "sizexsmall", value: "6px" },\n      { token: "sizesmall", value: "8px" },\n      { token: "sizemedium", value: "10px" },\n      { token: "sizelarge", value: "16px" },\n      { token: "sizexlarge", value: "20px" },\n      { token: "sizexxlarge", value: "24px" },\n      { token: "sizexxxlarge", value: "32px" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <spacingpreview client:load />\n</div>\n\n## \uC544\uC774\uCF58 \uAE00\uB9AC\uD504 \uD06C\uAE30\n\n\uC544\uC774\uCF58 \uD53D\uC140\uC740 spacing\uACFC \uBCC4\uAC1C\uC785\uB2C8\uB2E4(`iconsizes`). `webicon` / \uAE00\uB9AC\uD504 \uC2AC\uB86F\uC5D0\uB9CC \uC0AC\uC6A9\uD558\uC138\uC694.\n\n<div class="not-content">\n  <iconsizepreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<stack gap="sizemedium">\n  <box padding="sizelarge" background="backgroundsurface" radius="roundedlarge">\n    inset\n  </box>\n</stack>\n```\n'
+    },
+    {
+      slug: "ko/foundations/typography",
+      href: "/ko/foundations/typography/",
+      title: "\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C",
+      description: "Foundation heading, title, body, caption \uC2A4\uD0C0\uC77C \uC704\uC758 \uC2DC\uB9E8\uD2F1 \uD14D\uC2A4\uD2B8 \uC5ED\uD560.",
+      category: "guides",
+      content: '`Text`\uC5D0 **\uC2DC\uB9E8\uD2F1 \uC5ED\uD560**(`headingMd`, `bodyMd`, `labelSm`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694. \uAC01 \uC5ED\uD560\uC740 `typographys`\uC758 Foundation \uD504\uB9AC\uC14B\uC744 \uBCC4\uCE6D\uD569\uB2C8\uB2E4. \uC81C\uD488 UI\uC5D0\uC11C \uC6D0\uC2DC `fontSize`\uB098 `body2` \uAC19\uC740 Foundation \uD0A4\uB97C \uB118\uAE30\uC9C0 \uB9C8\uC138\uC694.\n\n## \uC5ED\uD560\n\n<div class="not-content">\n  <SpecTable\n    client:load\n    aria-label="\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C \uC5ED\uD560"\n    columns={[\n      { key: "family", header: "\uC5ED\uD560 \uD328\uBC00\uB9AC" },\n      { key: "examples", header: "\uC608\uC2DC", mono: true },\n      { key: "use", header: "\uC77C\uBC18\uC801\uC778 \uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { family: "Display", examples: "displayLg, displayMd, displaySm", use: "\uB9C8\uCF00\uD305 / \uD788\uC5B4\uB85C" },\n      { family: "Heading", examples: "headingLg, headingMd, headingSm", use: "\uD398\uC774\uC9C0\xB7\uC139\uC158 \uC81C\uBAA9" },\n      { family: "Title", examples: "titleLg, titleMd, titleSm", use: "\uCE74\uB4DC / \uB2E4\uC774\uC5BC\uB85C\uADF8 \uC81C\uBAA9" },\n      { family: "Subtitle", examples: "subtitleLg, subtitleMd", use: "\uAC15\uC870\uB41C \uBCF4\uC870 \uB77C\uC778" },\n      { family: "Body", examples: "bodyLg \u2026 bodyXs", use: "\uBCF8\uBB38 \uD14D\uC2A4\uD2B8" },\n      { family: "Label", examples: "labelLg, labelMd, labelSm", use: "\uD3FC\xB7\uBA54\uB274 \uB77C\uBCA8" },\n      { family: "Caption", examples: "captionLg \u2026 captionSm", use: "\uBA54\uD0C0\uB370\uC774\uD130\xB7\uD5EC\uD37C" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <TypographyPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<Text variant="headingMd" as="h2">\n  Section title\n</Text>\n<Text variant="bodyMd" as="p">\n  Body copy.\n</Text>\n```',
+      searchText: '\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C foundation heading, title, body, caption \uC2A4\uD0C0\uC77C \uC704\uC758 \uC2DC\uB9E8\uD2F1 \uD14D\uC2A4\uD2B8 \uC5ED\uD560. \n`text`\uC5D0 **\uC2DC\uB9E8\uD2F1 \uC5ED\uD560**(`headingmd`, `bodymd`, `labelsm`)\uC744 \uC0AC\uC6A9\uD558\uC138\uC694. \uAC01 \uC5ED\uD560\uC740 `typographys`\uC758 foundation \uD504\uB9AC\uC14B\uC744 \uBCC4\uCE6D\uD569\uB2C8\uB2E4. \uC81C\uD488 ui\uC5D0\uC11C \uC6D0\uC2DC `fontsize`\uB098 `body2` \uAC19\uC740 foundation \uD0A4\uB97C \uB118\uAE30\uC9C0 \uB9C8\uC138\uC694.\n\n## \uC5ED\uD560\n\n<div class="not-content">\n  <spectable\n    client:load\n    aria-label="\uD0C0\uC774\uD3EC\uADF8\uB798\uD53C \uC5ED\uD560"\n    columns={[\n      { key: "family", header: "\uC5ED\uD560 \uD328\uBC00\uB9AC" },\n      { key: "examples", header: "\uC608\uC2DC", mono: true },\n      { key: "use", header: "\uC77C\uBC18\uC801\uC778 \uC6A9\uB3C4" },\n    ]}\n    rows={[\n      { family: "display", examples: "displaylg, displaymd, displaysm", use: "\uB9C8\uCF00\uD305 / \uD788\uC5B4\uB85C" },\n      { family: "heading", examples: "headinglg, headingmd, headingsm", use: "\uD398\uC774\uC9C0\xB7\uC139\uC158 \uC81C\uBAA9" },\n      { family: "title", examples: "titlelg, titlemd, titlesm", use: "\uCE74\uB4DC / \uB2E4\uC774\uC5BC\uB85C\uADF8 \uC81C\uBAA9" },\n      { family: "subtitle", examples: "subtitlelg, subtitlemd", use: "\uAC15\uC870\uB41C \uBCF4\uC870 \uB77C\uC778" },\n      { family: "body", examples: "bodylg \u2026 bodyxs", use: "\uBCF8\uBB38 \uD14D\uC2A4\uD2B8" },\n      { family: "label", examples: "labellg, labelmd, labelsm", use: "\uD3FC\xB7\uBA54\uB274 \uB77C\uBCA8" },\n      { family: "caption", examples: "captionlg \u2026 captionsm", use: "\uBA54\uD0C0\uB370\uC774\uD130\xB7\uD5EC\uD37C" },\n    ]}\n  />\n</div>\n\n<div class="not-content">\n  <typographypreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```tsx\n<text variant="headingmd" as="h2">\n  section title\n</text>\n<text variant="bodymd" as="p">\n  body copy.\n</text>\n```\n'
+    },
+    {
+      slug: "ko/foundations/z-index",
+      href: "/ko/foundations/z-index/",
+      title: "Z-index",
+      description: "\uCF58\uD150\uCE20, \uC624\uBC84\uB808\uC774, \uD31D\uC5C5, \uD1A0\uC2A4\uD2B8, \uB514\uBC84\uADF8\uB97C \uC704\uD55C \uC2A4\uD0DD\uD0B9 \uB808\uC774\uC5B4.",
+      category: "guides",
+      content: '<div class="not-content">\n  <TokenSpec\n    client:load\n    columns="pair"\n    aria-label="Z-index \uD1A0\uD070"\n    rows={[\n      { token: "zIndexBackground", role: "\uCF58\uD150\uCE20 \uB4A4" },\n      { token: "zIndexContent", role: "\uAE30\uBCF8 \uCF58\uD150\uCE20" },\n      { token: "zIndexOverlay", role: "\uBAA8\uB2EC / \uB4DC\uB85C\uC5B4 \uC2A4\uD06C\uB9BC\uACFC \uD328\uB110" },\n      { token: "zIndexPopup / zIndexFloating", role: "\uBA54\uB274, \uD31D\uC624\uBC84" },\n      { token: "zIndexMessages", role: "\uD1A0\uC2A4\uD2B8" },\n      { token: "zIndexPriority", role: "\uC911\uC694 \uD06C\uB86C" },\n      { token: "zIndexDebug", role: "\uAC1C\uBC1C \uC624\uBC84\uB808\uC774" },\n    ]}\n  />\n</div>\n\n\uBAA8\uB2EC\xB7\uB4DC\uB85C\uC5B4 \u2192 `overlay`. \uBA54\uB274\xB7\uD31D\uC624\uBC84 \u2192 `popup`. \uD1A0\uC2A4\uD2B8 \u2192 `messages`. `z-index: 9999`\uB97C \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n\n<div class="not-content">\n  <ZIndexPreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.menu {\n  z-index: var(--refineui-z-popup);\n}\n```',
+      searchText: 'z-index \uCF58\uD150\uCE20, \uC624\uBC84\uB808\uC774, \uD31D\uC5C5, \uD1A0\uC2A4\uD2B8, \uB514\uBC84\uADF8\uB97C \uC704\uD55C \uC2A4\uD0DD\uD0B9 \uB808\uC774\uC5B4. \n<div class="not-content">\n  <tokenspec\n    client:load\n    columns="pair"\n    aria-label="z-index \uD1A0\uD070"\n    rows={[\n      { token: "zindexbackground", role: "\uCF58\uD150\uCE20 \uB4A4" },\n      { token: "zindexcontent", role: "\uAE30\uBCF8 \uCF58\uD150\uCE20" },\n      { token: "zindexoverlay", role: "\uBAA8\uB2EC / \uB4DC\uB85C\uC5B4 \uC2A4\uD06C\uB9BC\uACFC \uD328\uB110" },\n      { token: "zindexpopup / zindexfloating", role: "\uBA54\uB274, \uD31D\uC624\uBC84" },\n      { token: "zindexmessages", role: "\uD1A0\uC2A4\uD2B8" },\n      { token: "zindexpriority", role: "\uC911\uC694 \uD06C\uB86C" },\n      { token: "zindexdebug", role: "\uAC1C\uBC1C \uC624\uBC84\uB808\uC774" },\n    ]}\n  />\n</div>\n\n\uBAA8\uB2EC\xB7\uB4DC\uB85C\uC5B4 \u2192 `overlay`. \uBA54\uB274\xB7\uD31D\uC624\uBC84 \u2192 `popup`. \uD1A0\uC2A4\uD2B8 \u2192 `messages`. `z-index: 9999`\uB97C \uB9CC\uB4E4\uC9C0 \uB9C8\uC138\uC694.\n\n<div class="not-content">\n  <zindexpreview client:load />\n</div>\n\n## \uC0AC\uC6A9\uBC95\n\n```css\n.menu {\n  z-index: var(--refineui-z-popup);\n}\n```\n'
+    },
+    {
+      slug: "ko/getting-started",
+      href: "/ko/getting-started/",
+      title: "\uC2DC\uC791\uD558\uAE30",
+      description: "RefineUI\uB97C \uC124\uCE58\uD558\uACE0 \uC544\uD0A4\uD14D\uCC98 \u2014 \uD1A0\uD070, \uCEF4\uD3EC\uB10C\uD2B8, AI \uC900\uBE44 \uBB38\uC11C\uB97C \uC774\uD574\uD569\uB2C8\uB2E4.",
+      category: "guides",
+      content: 'RefineUI\uB294 Pelagornis \uC81C\uD488\uC744 \uC704\uD55C \uD1B5\uD569 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC785\uB2C8\uB2E4. \uD30C\uC6B4\uB370\uC774\uC158 \uBCC0\uC218\uB294 `@refineui/tokens`\uAC00 \uB418\uACE0, UI\uB294 `@refineui/react`\uC785\uB2C8\uB2E4. \uB514\uC790\uC778\uD558\uB294 Web Kit\uC774 \uADF8\uB300\uB85C \uBC30\uD3EC\uD558\uB294 React\uC785\uB2C8\uB2E4.\n\n## \uC544\uD0A4\uD14D\uCC98\n\n- **[\uD30C\uC6B4\uB370\uC774\uC158](/ko/foundations/)** \u2014 \uBE44\uC8FC\uC5BC \uC5B8\uC5B4, \uB514\uC790\uC778 \uD1A0\uD070, \uB808\uC774\uC544\uC6C3\n- **[\uCEF4\uD3EC\uB10C\uD2B8](/ko/components/)** \u2014 Actions, Forms, Navigation, Feedback, Overlays, Data Display, Content, Layout\n- **[\uAC1C\uBC1C](/ko/development/)** \u2014 \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uC758 \uC124\uCE58, \uD14C\uB9C8, \uBAA8\uC158\n- **[AI & \uB3C4\uAD6C](/ko/ai-tools/)** \u2014 DESIGN.md, llms.txt, Skill, Doctor, MCP\n\n## \uC124\uCE58\n\n<PackageInstallFull />\n\n## \uC2A4\uD0C0\uC77C\uC2DC\uD2B8\n\n\uC571 \uB8E8\uD2B8\uC5D0\uC11C \uD1A0\uD070 CSS\uC640 \uCEF4\uD3EC\uB10C\uD2B8 \uC778\uD130\uB799\uC158 \uC2A4\uD0C0\uC77C\uC744 \uD55C \uBC88 \uB85C\uB4DC\uD558\uC138\uC694.\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\n\uB610\uB294 JS\uC5D0\uC11C:\n\n```tsx\n```\n\n## \uC608\uC81C\n\n```tsx\nexport function Example() {\n  return (\n    <Card>\n      <Input placeholder="Email" />\n      <Button variant="primary">Continue</Button>\n    </Card>\n  );\n}\n```\n\n## \uB2E4\uC74C \uB2E8\uACC4\n\n- [\uD30C\uC6B4\uB370\uC774\uC158](/ko/foundations/) \u2014 \uD1A0\uD070\uACFC \uB808\uC774\uC544\uC6C3\n- [\uCEF4\uD3EC\uB10C\uD2B8](/ko/components/) \u2014 \uC778\uD130\uB799\uD2F0\uBE0C UI \uD504\uB9AC\uBBF8\uD2F0\uBE0C\n- [\uAC1C\uBC1C / \uC124\uCE58](/ko/development/installation/) \u2014 \uC790\uC138\uD55C \uC124\uC815 \uB178\uD2B8\n- [DESIGN.md](/DESIGN.md) \u2014 \uC5D0\uC774\uC804\uD2B8\uC6A9 \uB514\uC790\uC778 \uC544\uC774\uB374\uD2F0\uD2F0\n- [Iconography](https://github.com/pelagornis/refineui-system-icons) \u2014 \uC2DC\uC2A4\uD15C \uC544\uC774\uCF58 (\uBCC4\uB3C4 \uC0AC\uC774\uD2B8 / \uC800\uC7A5\uC18C)',
+      searchText: '\uC2DC\uC791\uD558\uAE30 refineui\uB97C \uC124\uCE58\uD558\uACE0 \uC544\uD0A4\uD14D\uCC98 \u2014 \uD1A0\uD070, \uCEF4\uD3EC\uB10C\uD2B8, ai \uC900\uBE44 \uBB38\uC11C\uB97C \uC774\uD574\uD569\uB2C8\uB2E4. \nrefineui\uB294 pelagornis \uC81C\uD488\uC744 \uC704\uD55C \uD1B5\uD569 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC785\uB2C8\uB2E4. \uD30C\uC6B4\uB370\uC774\uC158 \uBCC0\uC218\uB294 `@refineui/tokens`\uAC00 \uB418\uACE0, ui\uB294 `@refineui/react`\uC785\uB2C8\uB2E4. \uB514\uC790\uC778\uD558\uB294 web kit\uC774 \uADF8\uB300\uB85C \uBC30\uD3EC\uD558\uB294 react\uC785\uB2C8\uB2E4.\n\n## \uC544\uD0A4\uD14D\uCC98\n\n- **[\uD30C\uC6B4\uB370\uC774\uC158](/ko/foundations/)** \u2014 \uBE44\uC8FC\uC5BC \uC5B8\uC5B4, \uB514\uC790\uC778 \uD1A0\uD070, \uB808\uC774\uC544\uC6C3\n- **[\uCEF4\uD3EC\uB10C\uD2B8](/ko/components/)** \u2014 actions, forms, navigation, feedback, overlays, data display, content, layout\n- **[\uAC1C\uBC1C](/ko/development/)** \u2014 \uC81C\uD488 \uCF54\uB4DC\uC5D0\uC11C\uC758 \uC124\uCE58, \uD14C\uB9C8, \uBAA8\uC158\n- **[ai & \uB3C4\uAD6C](/ko/ai-tools/)** \u2014 design.md, llms.txt, skill, doctor, mcp\n\n## \uC124\uCE58\n\n<packageinstallfull />\n\n## \uC2A4\uD0C0\uC77C\uC2DC\uD2B8\n\n\uC571 \uB8E8\uD2B8\uC5D0\uC11C \uD1A0\uD070 css\uC640 \uCEF4\uD3EC\uB10C\uD2B8 \uC778\uD130\uB799\uC158 \uC2A4\uD0C0\uC77C\uC744 \uD55C \uBC88 \uB85C\uB4DC\uD558\uC138\uC694.\n\n```css\n@import "@refineui/tokens/tailwind.css";\n@import "@refineui/web-icons/dist/fonts/refineui-system-icons.css";\n@import "@refineui/react/refineui.css";\n```\n\n\uB610\uB294 js\uC5D0\uC11C:\n\n```tsx\n```\n\n## \uC608\uC81C\n\n```tsx\nexport function example() {\n  return (\n    <card>\n      <input placeholder="email" />\n      <button variant="primary">continue</button>\n    </card>\n  );\n}\n```\n\n## \uB2E4\uC74C \uB2E8\uACC4\n\n- [\uD30C\uC6B4\uB370\uC774\uC158](/ko/foundations/) \u2014 \uD1A0\uD070\uACFC \uB808\uC774\uC544\uC6C3\n- [\uCEF4\uD3EC\uB10C\uD2B8](/ko/components/) \u2014 \uC778\uD130\uB799\uD2F0\uBE0C ui \uD504\uB9AC\uBBF8\uD2F0\uBE0C\n- [\uAC1C\uBC1C / \uC124\uCE58](/ko/development/installation/) \u2014 \uC790\uC138\uD55C \uC124\uC815 \uB178\uD2B8\n- [design.md](/design.md) \u2014 \uC5D0\uC774\uC804\uD2B8\uC6A9 \uB514\uC790\uC778 \uC544\uC774\uB374\uD2F0\uD2F0\n- [iconography](https://github.com/pelagornis/refineui-system-icons) \u2014 \uC2DC\uC2A4\uD15C \uC544\uC774\uCF58 (\uBCC4\uB3C4 \uC0AC\uC774\uD2B8 / \uC800\uC7A5\uC18C)\n'
+    },
+    {
+      slug: "ko/index",
+      href: "/ko/index/",
+      title: "RefineUI",
+      description: "Pelagornis \uC81C\uD488\uC744 \uC704\uD55C \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \u2014 \uD1A0\uD070, React \uCEF4\uD3EC\uB10C\uD2B8, \uB77C\uC774\uBE0C \uBB38\uC11C.",
+      category: "guides",
+      content: '<div class="not-content">\n  <DocsHome client:load locale="ko" />\n</div>',
+      searchText: 'refineui pelagornis \uC81C\uD488\uC744 \uC704\uD55C \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \u2014 \uD1A0\uD070, react \uCEF4\uD3EC\uB10C\uD2B8, \uB77C\uC774\uBE0C \uBB38\uC11C. \n<div class="not-content">\n  <docshome client:load locale="ko" />\n</div>\n'
+    }
+  ]
+};
+
+// src/docs-store.ts
+import { SEMANTIC_TEXT } from "@refineui/tokens";
+var index = docs_index_default;
+var TOKEN_CATEGORIES = [
+  "colors",
+  "typography",
+  "spacing",
+  "sizing",
+  "radius",
+  "stroke",
+  "shadows",
+  "motion",
+  "zIndex"
+];
+function normalizeSlug(input) {
+  return input.trim().replace(/^https?:\/\/[^/]+/i, "").replace(/^\//, "").replace(/\/$/, "");
+}
+function getLlmIndex() {
+  return index.llmIndex;
+}
+function getDesignMd() {
+  return index.designMd;
+}
+function listPages(category) {
+  return index.pages.filter((page) => category ? page.category === category : true).map(({ slug, href, title, description, category: pageCategory }) => ({
+    slug,
+    href,
+    title,
+    description,
+    category: pageCategory
+  }));
+}
+function getDocPage(slugInput) {
+  const slug = normalizeSlug(slugInput);
+  const page = index.pages.find((item) => item.slug === slug);
+  if (!page) return null;
+  const { searchText, ...doc } = page;
+  void searchText;
+  return doc;
+}
+function searchDocs(query, category, limit = 10) {
+  const terms = query.toLowerCase().split(/\s+/).map((term) => term.trim()).filter(Boolean);
+  if (terms.length === 0) {
+    return listPages(category).slice(0, limit);
+  }
+  const scored = index.pages.filter((page) => category ? page.category === category : true).map((page) => {
+    let score = 0;
+    for (const term of terms) {
+      if (page.slug.includes(term)) score += 4;
+      if (page.title.toLowerCase().includes(term)) score += 3;
+      if (page.description.toLowerCase().includes(term)) score += 2;
+      if (page.searchText.includes(term)) score += 1;
+    }
+    return { page, score };
+  }).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score).slice(0, limit);
+  return scored.map(({ page }) => ({
+    slug: page.slug,
+    href: page.href,
+    title: page.title,
+    description: page.description,
+    category: page.category
+  }));
+}
+function listTokenCategories() {
+  return [...TOKEN_CATEGORIES];
+}
+function listSemanticTextRoles() {
+  return Object.keys(SEMANTIC_TEXT);
+}
+function getIndexMeta() {
+  return {
+    generatedAt: index.generatedAt,
+    pageCount: index.pages.length
+  };
+}
+
+// src/design-rules.ts
+var DESIGN_RULES = getDesignMd();
+
+export {
+  normalizeSlug,
+  getLlmIndex,
+  getDesignMd,
+  listPages,
+  getDocPage,
+  searchDocs,
+  listTokenCategories,
+  listSemanticTextRoles,
+  getIndexMeta,
+  DESIGN_RULES
+};