{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "developer-docs",
  "type": "registry:block",
  "title": "Developer docs",
  "description": "Organizes installation, code comparison, command search, and preview output into navigable developer documentation.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://motion-lexicon.pages.dev/r/code-comparison.json",
    "https://motion-lexicon.pages.dev/r/command-palette.json",
    "https://motion-lexicon.pages.dev/r/mega-menu.json",
    "https://motion-lexicon.pages.dev/r/split-text-reveal.json"
  ],
  "categories": [
    "page-block"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/blocks/developer-docs/",
  "meta": {
    "engines": [
      "motion"
    ],
    "runtimeCost": "medium",
    "signature": "Navigation, command search, and content sections hand off inside a stable documentation frame.",
    "sceneFamily": "product-mono",
    "primaryState": "Navigable installation and API documentation workspace",
    "componentIds": [
      "code-comparison",
      "command-palette",
      "mega-menu",
      "split-text-reveal"
    ]
  },
  "files": [
    {
      "path": "src/registry/blocks/developer-docs.tsx",
      "type": "registry:component",
      "target": "components/motion-lexicon/blocks/developer-docs.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useEffect, useState } from \"react\";\nimport { CodeComparison } from \"@/components/motion-lexicon/code-comparison\";\nimport {\n  CommandPalette,\n  type CommandItem,\n} from \"@/components/motion-lexicon/command-palette\";\nimport { MegaMenu } from \"@/components/motion-lexicon/mega-menu\";\nimport { SplitTextReveal } from \"@/components/motion-lexicon/split-text-reveal\";\n\ntype Locale = \"zh\" | \"en\";\nexport type DeveloperDocsBlockProps = { locale?: Locale; className?: string };\n\nconst installCode = `npx shadcn@latest add \\n  https://motionlexicon.com/r/code-comparison.json`;\nconst manualCode = `import { CodeComparison } from \"@/components/code-comparison\";\\n\\nexport function Review() {\\n  return <CodeComparison items={changes} />;\\n}`;\n\nexport function DeveloperDocsBlock({\n  locale = \"en\",\n  className = \"\",\n}: DeveloperDocsBlockProps) {\n  const reduced = useReducedMotion() === true;\n  const [commandOpen, setCommandOpen] = useState(false);\n  const [copied, setCopied] = useState(false);\n  const [section, setSection] = useState(\"overview\");\n  const c = locale === \"zh\" ? zh : en;\n  useEffect(() => {\n    const onKey = (event: KeyboardEvent) => {\n      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === \"k\") {\n        event.preventDefault();\n        event.stopPropagation();\n        setCommandOpen(true);\n      }\n    };\n    document.addEventListener(\"keydown\", onKey, true);\n    return () => document.removeEventListener(\"keydown\", onKey, true);\n  }, []);\n  const commands: CommandItem[] = c.commands.map((label, index) => ({\n    id: `command-${index}`,\n    label,\n    hint: c.commandHints[index],\n    shortcut: index === 0 ? [\"⌘\", \"K\"] : undefined,\n  }));\n  const selectCommand = (item: CommandItem) => {\n    setSection(\n      item.id === \"command-1\"\n        ? \"install\"\n        : item.id === \"command-2\"\n          ? \"api\"\n          : \"overview\",\n    );\n    setCommandOpen(false);\n  };\n  const navigation = [\n    {\n      id: \"docs\",\n      label: c.docs,\n      preview: (\n        <div className=\"grid size-24 place-items-center rounded-xl bg-[#dbe7ff] text-[24px] text-[#2457d6]\">\n          ⌘\n        </div>\n      ),\n      links: [\n        {\n          id: \"intro\",\n          label: c.intro,\n          description: c.introBody,\n          onSelect: () => setSection(\"overview\"),\n        },\n        {\n          id: \"install\",\n          label: c.install,\n          description: c.installBody,\n          onSelect: () => setSection(\"install\"),\n        },\n      ],\n    },\n    {\n      id: \"reference\",\n      label: c.reference,\n      preview: (\n        <div className=\"grid size-24 place-items-center rounded-xl bg-[#dff1e7] text-[24px] text-[#18724c]\">\n          {}\n        </div>\n      ),\n      links: [\n        {\n          id: \"api\",\n          label: c.api,\n          description: c.apiBody,\n          onSelect: () => setSection(\"api\"),\n        },\n        {\n          id: \"examples\",\n          label: c.examples,\n          description: c.examplesBody,\n          onSelect: () => setSection(\"examples\"),\n        },\n      ],\n    },\n  ];\n  return (\n    <section\n      data-page-block=\"developer-docs\"\n      className={`relative w-full overflow-hidden rounded-[18px] border border-neutral-200 bg-[#f6f7f9] text-neutral-950 shadow-[0_24px_60px_-45px_rgba(15,23,42,.4)] dark:border-white/10 dark:bg-[#111318] dark:text-neutral-50 ${className}`}\n    >\n      <header className=\"flex min-h-16 items-center gap-3 border-b border-neutral-200 bg-white px-4 sm:px-6 dark:border-white/10 dark:bg-[#181b21]\">\n        <a\n          href=\"#docs-overview\"\n          className=\"flex min-h-11 items-center gap-2 font-semibold tracking-[-.03em] outline-none focus-visible:ring-2 focus-visible:ring-blue-600\"\n        >\n          <span className=\"grid size-8 place-items-center rounded-lg bg-neutral-950 text-[11px] text-white dark:bg-white dark:text-neutral-950\">\n            ML\n          </span>\n          Motion Lexicon\n        </a>\n        <nav\n          className=\"ml-auto hidden items-center gap-1 md:flex\"\n          aria-label={c.navigation}\n        >\n          {[c.docs, c.components, c.guides].map((item) => (\n            <a\n              key={item}\n              href=\"#docs-overview\"\n              className=\"min-h-11 rounded-lg px-3 py-3 text-[11px] text-neutral-500 hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-blue-600 dark:hover:bg-white/5\"\n            >\n              {item}\n            </a>\n          ))}\n        </nav>\n        <button\n          type=\"button\"\n          onClick={() => setCommandOpen(true)}\n          className=\"min-h-11 rounded-lg border border-neutral-200 bg-neutral-50 px-3 font-mono text-[10px] text-neutral-500 outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-white/10 dark:bg-white/5\"\n        >\n          {c.search}\n          <span className=\"ml-3 text-neutral-400\">⌘K</span>\n        </button>\n      </header>\n      <div className=\"grid min-h-[720px] lg:grid-cols-[210px_minmax(0,1fr)]\">\n        <aside className=\"hidden border-r border-neutral-200 bg-white p-3 lg:block dark:border-white/10 dark:bg-[#181b21]\">\n          <p className=\"px-3 py-3 font-mono text-[9px] uppercase tracking-[.16em] text-neutral-400\">\n            {c.onThisPage}\n          </p>\n          {[\"overview\", \"install\", \"api\", \"examples\"].map((id) => (\n            <button\n              key={id}\n              type=\"button\"\n              onClick={() => setSection(id)}\n              className={`min-h-11 w-full rounded-lg px-3 text-left text-[11px] outline-none focus-visible:ring-2 focus-visible:ring-blue-600 ${section === id ? \"bg-neutral-950 text-white dark:bg-white dark:text-neutral-950\" : \"text-neutral-500 hover:bg-neutral-100 dark:hover:bg-white/5\"}`}\n            >\n              {c.sections[id as keyof typeof c.sections]}\n            </button>\n          ))}\n        </aside>\n        <div\n          id=\"docs-overview\"\n          className=\"min-w-0 px-5 py-10 sm:px-8 lg:px-12\"\n        >\n          <div className=\"mx-auto max-w-4xl\">\n            <MegaMenu\n              sections={navigation}\n              label={c.navigation}\n              className=\"mb-10\"\n            />\n            <AnimatePresence mode=\"wait\" initial={false}>\n              <motion.div\n                key={section}\n                initial={reduced ? false : { opacity: 0, y: 8 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={reduced ? undefined : { opacity: 0, y: -5 }}\n                transition={{ duration: reduced ? 0 : 0.2 }}\n              >\n                <p className=\"font-mono text-[10px] uppercase tracking-[.16em] text-blue-600\">\n                  {c.sections[section as keyof typeof c.sections]}\n                </p>\n                <SplitTextReveal\n                  text={\n                    section === \"install\"\n                      ? c.installTitle\n                      : section === \"api\"\n                        ? c.apiTitle\n                        : c.title\n                  }\n                  mode=\"word\"\n                  label={c.title}\n                  className=\"mt-4 text-[clamp(32px,5vw,52px)] font-semibold leading-[.95] tracking-[-.06em]\"\n                />\n                <p className=\"mt-6 max-w-2xl text-[14px] leading-6 text-neutral-600 dark:text-neutral-300\">\n                  {section === \"install\"\n                    ? c.installLead\n                    : section === \"api\"\n                      ? c.apiLead\n                      : c.lead}\n                </p>\n                {section === \"overview\" ? (\n                  <div className=\"mt-9 grid gap-3 sm:grid-cols-3\">\n                    {c.principles.map((item, index) => (\n                      <article\n                        key={item.title}\n                        className=\"rounded-xl border border-neutral-200 bg-white p-4 dark:border-white/10 dark:bg-[#181b21]\"\n                      >\n                        <span className=\"font-mono text-[9px] text-blue-600\">\n                          0{index + 1}\n                        </span>\n                        <h2 className=\"mt-6 text-[14px] font-medium\">\n                          {item.title}\n                        </h2>\n                        <p className=\"mt-2 text-[11px] leading-5 text-neutral-500\">\n                          {item.body}\n                        </p>\n                      </article>\n                    ))}\n                  </div>\n                ) : null}\n                {section === \"install\" ? (\n                  <div className=\"mt-8 overflow-hidden rounded-xl bg-[#101218] p-4 text-[#dce8ff]\">\n                    <div className=\"flex justify-between gap-3 font-mono text-[9px] text-white/45\">\n                      <span>TERMINAL</span>\n                      <button\n                        type=\"button\"\n                        onClick={() => setCopied(true)}\n                        className=\"min-h-11 rounded-lg px-2 text-[#bcd2ff] outline-none focus-visible:ring-2 focus-visible:ring-[#9cc5ff]\"\n                      >\n                        {copied ? c.copied : c.copy}\n                      </button>\n                    </div>\n                    <pre className=\"mt-3 overflow-x-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-6\">\n                      <code>{installCode}</code>\n                    </pre>\n                  </div>\n                ) : null}\n                {section === \"api\" || section === \"examples\" ? (\n                  <CodeComparison\n                    label={c.comparison}\n                    items={[\n                      {\n                        id: \"registry\",\n                        label: c.registry,\n                        meta: \"01\",\n                        code: installCode,\n                        description: c.registryBody,\n                        preview: (\n                          <div className=\"grid size-full place-items-center bg-[#18325f] p-6 text-center text-white\">\n                            <span className=\"font-mono text-[10px] tracking-[.16em]\">\n                              REGISTRY READY\n                            </span>\n                            <strong className=\"mt-3 text-[25px] tracking-[-.05em]\">\n                              {c.previewOne}\n                            </strong>\n                          </div>\n                        ),\n                      },\n                      {\n                        id: \"manual\",\n                        label: c.manual,\n                        meta: \"02\",\n                        code: manualCode,\n                        description: c.manualBody,\n                        preview: (\n                          <div className=\"grid size-full place-items-center bg-[#235a4c] p-6 text-center text-white\">\n                            <span className=\"font-mono text-[10px] tracking-[.16em]\">\n                              SOURCE CONTROL\n                            </span>\n                            <strong className=\"mt-3 text-[25px] tracking-[-.05em]\">\n                              {c.previewTwo}\n                            </strong>\n                          </div>\n                        ),\n                      },\n                    ]}\n                  />\n                ) : null}\n              </motion.div>\n            </AnimatePresence>\n          </div>\n        </div>\n      </div>\n      <AnimatePresence>\n        {commandOpen ? (\n          <div\n            className=\"absolute inset-0 z-20 grid place-items-start bg-neutral-950/25 p-4 pt-20 backdrop-blur-sm\"\n            role=\"presentation\"\n            onMouseDown={() => setCommandOpen(false)}\n          >\n            <div\n              className=\"w-full max-w-[520px]\"\n              onMouseDown={(event) => event.stopPropagation()}\n            >\n              <CommandPalette\n                open\n                items={commands}\n                onSelect={selectCommand}\n                onDismiss={() => setCommandOpen(false)}\n                label={c.search}\n                placeholder={c.search}\n              />\n            </div>\n          </div>\n        ) : null}\n      </AnimatePresence>\n    </section>\n  );\n}\n\nconst en = {\n  navigation: \"Documentation navigation\",\n  docs: \"Docs\",\n  components: \"Components\",\n  guides: \"Guides\",\n  search: \"Search docs\",\n  onThisPage: \"On this page\",\n  intro: \"Introduction\",\n  introBody: \"Start with the component contract.\",\n  install: \"Install\",\n  installBody: \"Add a component through the Registry.\",\n  reference: \"Reference\",\n  api: \"API\",\n  apiBody: \"Focused props and stable states.\",\n  examples: \"Examples\",\n  examplesBody: \"Compare source approaches.\",\n  title: \"Motion that holds up in product.\",\n  lead: \"Copy-ready components with an intentional primary frame, a focused API, and motion that continues to make sense when it stops.\",\n  installTitle: \"Install the source you previewed.\",\n  installLead:\n    \"The Registry command installs the exact implementation, dependency list, and local source file used in this preview.\",\n  apiTitle: \"Choose the integration that fits your stack.\",\n  apiLead:\n    \"Every recipe stays legible as a local component. Compare the quickest installation path with a direct source import.\",\n  sections: {\n    overview: \"Overview\",\n    install: \"Install\",\n    api: \"API reference\",\n    examples: \"Examples\",\n  },\n  principles: [\n    {\n      title: \"Primary state\",\n      body: \"Every preview is useful before it moves.\",\n    },\n    {\n      title: \"Focused props\",\n      body: \"Useful defaults with a compact public surface.\",\n    },\n    {\n      title: \"Graceful motion\",\n      body: \"Keyboard and reduced-motion behavior are first class.\",\n    },\n  ],\n  copy: \"Copy command\",\n  copied: \"Copied\",\n  comparison: \"Two ways to install\",\n  registry: \"Registry\",\n  registryBody: \"Use one command to add the exact public artifact.\",\n  manual: \"Source import\",\n  manualBody: \"Keep the implementation beside the rest of your product.\",\n  previewOne: \"Ready in one command.\",\n  previewTwo: \"Made to stay editable.\",\n  commands: [\"Open overview\", \"Open installation\", \"Open API reference\"],\n  commandHints: [\"Start here\", \"Registry command\", \"Props and examples\"],\n};\nconst zh: typeof en = {\n  navigation: \"文档导航\",\n  docs: \"文档\",\n  components: \"组件\",\n  guides: \"指南\",\n  search: \"搜索文档\",\n  onThisPage: \"本页内容\",\n  intro: \"简介\",\n  introBody: \"从组件契约开始。\",\n  install: \"安装\",\n  installBody: \"通过 Registry 添加组件。\",\n  reference: \"参考\",\n  api: \"API\",\n  apiBody: \"聚焦的属性与稳定状态。\",\n  examples: \"示例\",\n  examplesBody: \"比较源码方案。\",\n  title: \"经得起产品考验的动效。\",\n  lead: \"可直接复制的组件拥有有意图的首帧、聚焦的 API，以及在暂停后仍然成立的动效。\",\n  installTitle: \"安装你正在预览的源码。\",\n  installLead: \"Registry 命令会安装这个预览使用的实现、依赖清单和本地源码。\",\n  apiTitle: \"选择适合当前技术栈的集成方式。\",\n  apiLead:\n    \"每个配方都能作为本地组件清晰阅读。比较最快的安装路径和直接源码导入。\",\n  sections: {\n    overview: \"概览\",\n    install: \"安装\",\n    api: \"API 参考\",\n    examples: \"示例\",\n  },\n  principles: [\n    { title: \"首要状态\", body: \"每个预览在运动前也有明确价值。\" },\n    { title: \"聚焦属性\", body: \"有用的默认值配合紧凑公开接口。\" },\n    { title: \"优雅动效\", body: \"键盘与减弱动效都是一等能力。\" },\n  ],\n  copy: \"复制命令\",\n  copied: \"已复制\",\n  comparison: \"两种安装方式\",\n  registry: \"Registry\",\n  registryBody: \"用一条命令添加完全一致的公开制品。\",\n  manual: \"源码导入\",\n  manualBody: \"把实现放在产品其他代码旁边维护。\",\n  previewOne: \"一条命令即可准备好。\",\n  previewTwo: \"始终保持可编辑。\",\n  commands: [\"打开概览\", \"打开安装\", \"打开 API 参考\"],\n  commandHints: [\"从这里开始\", \"Registry 命令\", \"属性与示例\"],\n};\n"
    }
  ]
}