{
  "name": "feature/scroll-sidebar",
  "type": "registry:component",
  "description": "Scroll synced sidebar feature index",
  "files": [
    {
      "path": "example/Feature/SectionFeature_ScrollSidebar.astro",
      "type": "registry:component",
      "content": "---\nimport ScrollSidebar from '@@/components/ui/ScrollSidebar.astro';\nimport ScrollSidebarContent from '@@/components/ui/ScrollSidebarContent.astro';\nimport ScrollSidebarNav from '@@/components/ui/ScrollSidebarNav.astro';\nimport ScrollSidebarNavItem from '@@/components/ui/ScrollSidebarNavItem.astro';\nimport ScrollSidebarSection from '@@/components/ui/ScrollSidebarSection.astro';\nimport image1 from '@/assets/placeholder.png';\n\ninterface FeatureItem {\n  id: string;\n  title: string;\n  description: string;\n}\n\nconst featureItems: FeatureItem[] = [\n  {\n    id: 'ai',\n    title: 'AI',\n    description:\n      'Generate site layouts and advanced components in seconds with AI, so you can skip the blank canvas and start designing with confidence.',\n  },\n  {\n    id: 'design',\n    title: 'Design',\n    description:\n      'Craft responsive layouts and bring them to life with smooth effects, interactions, and animations. Build exactly what you imagine, visually.',\n  },\n  {\n    id: 'cms',\n    title: 'CMS',\n    description:\n      'Manage and update your content effortlessly with a built-in CMS. Keep your site fresh without touching code.',\n  },\n  {\n    id: 'collaborate',\n    title: 'Collaborate',\n    description:\n      \"Whether you're collaborating on the canvas or editing copy directly on the page, updates are seamless and handoff-free.\",\n  },\n];\n---\n\n<section class=\"relative py-20 sm:py-24\" data-scheme=\"bg\">\n  <div class=\"container mx-auto\">\n    <div class=\"mb-10 text-left\">\n      <div\n        class=\"rounded-card mb-4 inline-flex items-center gap-2 px-4 py-2 text-sm\"\n        data-scheme=\"shift\"\n      >\n        <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n        Layout Gallery\n      </div>\n      <h2 class=\"h2 mb-4\">Create, collaborate, and go live</h2>\n      <p class=\"text-fg-sub max-w-3xl text-lg md:text-xl\">\n        Explore how each feature helps you build better websites\n      </p>\n    </div>\n\n    <!-- モバイル: 順序通り表示 -->\n    <div class=\"flex flex-col gap-16 lg:hidden\">\n      {\n        featureItems.map((item) => (\n          <div class=\"flex flex-col gap-8\">\n            <img\n              src={image1.src}\n              alt={`${item.title} screenshot`}\n              class=\"h-auto w-full rounded-[var(--sp-radius-card)] object-cover\"\n              style=\"aspect-ratio: 16/10;\"\n              width={image1.width}\n              height={image1.height}\n            />\n            <div>\n              <h3 class=\"text-xl font-bold text-[color:var(--sp-fg)]\">\n                {item.title}\n              </h3>\n              <p class=\"text-fg-sub mt-2 text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          </div>\n        ))\n      }\n    </div>\n\n    <!-- デスクトップ: スクロール連動 -->\n    <ScrollSidebar gap=\"2rem\" class=\"hidden lg:flex\">\n      <ScrollSidebarNav stickyTop=\"6rem\">\n        {\n          featureItems.map((item, index) => (\n            <ScrollSidebarNavItem id={item.id} defaultOpen={index === 0}>\n              <div slot=\"header\">\n                <h3 class=\"text-xl font-bold text-[color:var(--sp-fg)]\">\n                  {item.title}\n                </h3>\n              </div>\n              <div slot=\"content\">\n                <p class=\"text-fg-sub mt-4 text-sm leading-relaxed\">\n                  {item.description}\n                </p>\n              </div>\n            </ScrollSidebarNavItem>\n          ))\n        }\n      </ScrollSidebarNav>\n\n      <ScrollSidebarContent gap=\"8rem\">\n        {\n          featureItems.map((item, index) => (\n            <ScrollSidebarSection id={item.id} class={index === 0 ? \"pt-6\" : \"\"}>\n              <img\n                src={image1.src}\n                alt={`${item.title} screenshot`}\n                class=\"h-auto w-full rounded-[var(--sp-radius-card)] object-cover\"\n                style=\"aspect-ratio: 16/10;\"\n                width={image1.width}\n                height={image1.height}\n              />\n            </ScrollSidebarSection>\n          ))\n        }\n      </ScrollSidebarContent>\n    </ScrollSidebar>\n  </div>\n</section>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "scroll-sidebar"
  ]
}