{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroller",
  "title": "Scroller",
  "description": "Navigation par sections avec scroll-spy (IntersectionObserver).",
  "files": [
    {
      "path": "registry/valraiso/scroller/scroller.astro",
      "content": "---\nimport styles from \"./scroller.module.css\";\n\n/**\n * Scroller — sommaire avec scroll-spy : surligne l'entrée correspondant à la\n * section visible (IntersectionObserver) et défile en douceur au clic.\n *\n * Comportement : smooth scroll au clic, scroll-spy via IntersectionObserver\n * (l'item courant porte `data-current`), nettoyage sur `astro:before-swap`.\n *\n * Props :\n *  - `items` : liste `{ name, title }` (name = id de la section cible).\n *  - `class` : classe(s) ajoutée(s) au conteneur racine.\n *\n * Personnalisation (variables CSS) : --ads-scroller-gap,\n *  --ads-scroller-link-color, --ads-scroller-link-current-color,\n *  --ads-scroller-link-font-size.\n */\ninterface NavigationItem {\n  name: string;\n  title: string;\n}\n\ninterface Props {\n  class?: string;\n  items: NavigationItem[];\n}\n\nconst { class: className, items } = Astro.props;\n---\n\n<div class:list={[styles.scroller, className]} data-scroller>\n  <ol class={styles.mobileList}>\n    {\n      items.map(({ name, title }) => (\n        <li class={styles.mobileListItem}>\n          <a\n            class={styles.mobileListLink}\n            href={`#${name}`}\n            data-scroll-to={name}\n          >\n            <span />\n            {title}\n          </a>\n        </li>\n      ))\n    }\n  </ol>\n  <ol\n    class={styles.menu}\n    data-scroll-spy\n    data-items={JSON.stringify(items.map(({ name }) => name))}\n    data-root-margin=\"-50% 0px\"\n  >\n    {\n      items.map(({ name, title }) => (\n        <li class={styles.item} data-scroll-item>\n          <a class={styles.link} href={`#${name}`} data-scroll-to={name}>\n            {title}\n          </a>\n        </li>\n      ))\n    }\n  </ol>\n  <div class={styles.content}>\n    <slot />\n  </div>\n</div>\n\n<script>\n  function initScroller(scroller: HTMLElement) {\n    // Smooth scroll on click\n    scroller\n      .querySelectorAll<HTMLAnchorElement>(\"[data-scroll-to]\")\n      .forEach((link) => {\n        link.addEventListener(\"click\", (e) => {\n          e.preventDefault();\n          const target = document.getElementById(link.dataset.scrollTo!);\n          if (target) {\n            const isBiggerThanScreen =\n              target.clientHeight >= window.innerHeight * 0.7;\n            target.scrollIntoView({\n              behavior: \"smooth\",\n              block: isBiggerThanScreen ? \"start\" : \"center\",\n              inline: \"center\",\n            });\n          }\n        });\n      });\n\n    // Scroll spy\n    const spy = scroller.querySelector<HTMLElement>(\"[data-scroll-spy]\");\n    if (!spy) return;\n\n    const items: string[] = JSON.parse(spy.dataset.items || \"[]\");\n    const rootMargin = spy.dataset.rootMargin || \"-50% 0px\";\n    const children = Array.from(spy.children) as HTMLElement[];\n\n    function setCurrent(index: number) {\n      children.forEach((child, i) => {\n        if (i === index) child.setAttribute(\"data-current\", \"\");\n        else child.removeAttribute(\"data-current\");\n      });\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.target === scroller) {\n            if (!entry.isIntersecting) {\n              children.forEach((child) =>\n                child.removeAttribute(\"data-current\"),\n              );\n            }\n          } else if (entry.isIntersecting) {\n            setCurrent(items.indexOf(entry.target.id));\n          }\n        }\n      },\n      { rootMargin },\n    );\n\n    observer.observe(scroller);\n    items.forEach((id) => {\n      const el = document.getElementById(id);\n      if (el) observer.observe(el);\n    });\n\n    document.addEventListener(\n      \"astro:before-swap\",\n      () => observer.disconnect(),\n      { once: true },\n    );\n  }\n\n  function mountAll() {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-scroller]\")\n      .forEach(initScroller);\n  }\n\n  document.addEventListener(\"astro:page-load\", mountAll);\n  mountAll();\n</script>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/scroller/scroller.astro"
    },
    {
      "path": "registry/valraiso/scroller/scroller.module.css",
      "content": ".scroller {\n  position: relative;\n}\n\n/* Sommaire (desktop) */\n.menu {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ads-scroller-gap, 16px);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.item {\n  display: inline-flex;\n}\n\n.link {\n  color: var(--ads-scroller-link-color, var(--ads-grey-300, #c9c9c9));\n  font-family: var(--ads-sans-serif-font, inherit);\n  font-size: var(--ads-scroller-link-font-size, 15px);\n  text-decoration: none;\n  transition: color 160ms var(--ads-transition-easing, ease);\n}\n\n.link:hover {\n  color: var(--ads-scroller-link-current-color, var(--ads-black, #262626));\n}\n\n/* État courant : piloté par l'attribut data-current posé par le script */\n.item[data-current] .link {\n  color: var(--ads-scroller-link-current-color, var(--ads-black, #262626));\n  font-weight: 600;\n}\n\n.content {\n  position: relative;\n}\n\n/* Liste mobile */\n.mobileList {\n  display: flex;\n  gap: var(--ads-scroller-gap, 16px);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n\n.mobileList::-webkit-scrollbar {\n  display: none;\n}\n\n.mobileListItem {\n  flex: 0 0 auto;\n}\n\n.mobileListLink {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--ads-scroller-link-color, var(--ads-grey-300, #c9c9c9));\n  font-family: var(--ads-sans-serif-font, inherit);\n  font-size: var(--ads-scroller-link-font-size, 15px);\n  text-decoration: none;\n  white-space: nowrap;\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/scroller/scroller.module.css"
    }
  ],
  "type": "registry:component"
}