{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "media-editorial",
  "type": "registry:block",
  "title": "Media editorial",
  "description": "Browses a complete visual feature through chapters, focus galleries, and scroll-led storytelling.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://motion-lexicon.pages.dev/r/cinematic-hero.json",
    "https://motion-lexicon.pages.dev/r/focus-gallery.json",
    "https://motion-lexicon.pages.dev/r/kinetic-heading.json",
    "https://motion-lexicon.pages.dev/r/scroll-story.json"
  ],
  "categories": [
    "page-block"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/blocks/media-editorial/",
  "meta": {
    "engines": [
      "motion"
    ],
    "runtimeCost": "medium",
    "signature": "Chapter navigation connects a cinematic lead, gallery focus, and scroll story into one feature.",
    "sceneFamily": "editorial-warm",
    "primaryState": "Visual feature lead with chapter navigation",
    "componentIds": [
      "cinematic-hero",
      "focus-gallery",
      "kinetic-heading",
      "scroll-story"
    ]
  },
  "files": [
    {
      "path": "src/registry/blocks/media-editorial.tsx",
      "type": "registry:component",
      "target": "components/motion-lexicon/blocks/media-editorial.tsx",
      "content": "\"use client\";\n\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\nimport { CinematicHero } from \"@/components/motion-lexicon/cinematic-hero\";\nimport {\n  FocusGallery,\n  type FocusGalleryItem,\n} from \"@/components/motion-lexicon/focus-gallery\";\nimport { KineticHeading } from \"@/components/motion-lexicon/kinetic-heading\";\nimport { ScrollStory } from \"@/components/motion-lexicon/scroll-story\";\n\ntype Locale = \"zh\" | \"en\";\nexport type MediaEditorialBlockProps = { locale?: Locale; className?: string };\n\nconst art = (tone: string, accent: string) => (\n  <div aria-hidden className={`relative size-full overflow-hidden ${tone}`}>\n    <span\n      className={`absolute -left-[8%] bottom-[-34%] size-[78%] rounded-full border-[18px] ${accent}`}\n    />\n    <span className=\"absolute right-[18%] top-[15%] h-[68%] w-[9%] rounded-full bg-[#e06d4a]\" />\n    <span className=\"absolute inset-x-0 bottom-[19%] h-px bg-white/70\" />\n  </div>\n);\n\nexport function MediaEditorialBlock({\n  locale = \"en\",\n  className = \"\",\n}: MediaEditorialBlockProps) {\n  const reduced = useReducedMotion() === true;\n  const [joined, setJoined] = useState(false);\n  const copy = locale === \"zh\" ? zh : en;\n  const gallery: readonly FocusGalleryItem[] = [\n    {\n      id: \"harbour\",\n      title: copy.harbour,\n      caption: copy.harbourCopy,\n      meta: \"NORTH / 01\",\n      art: art(\"bg-[#18475e]\", \"border-[#efbd6c]\"),\n    },\n    {\n      id: \"orchard\",\n      title: copy.orchard,\n      caption: copy.orchardCopy,\n      meta: \"NORTH / 02\",\n      art: art(\"bg-[#b85a43]\", \"border-[#f2c06c]\"),\n    },\n    {\n      id: \"signal\",\n      title: copy.signal,\n      caption: copy.signalCopy,\n      meta: \"NORTH / 03\",\n      art: art(\"bg-[#29204c]\", \"border-[#b69aff]\"),\n    },\n  ];\n  return (\n    <motion.section\n      data-page-block=\"media-editorial\"\n      initial={reduced ? false : { opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: reduced ? 0 : 0.28 }}\n      className={`w-full overflow-hidden rounded-[18px] border border-[#4b3526]/15 bg-[#f4ead9] text-[#2e251d] ${className}`}\n    >\n      <header className=\"flex min-h-16 items-center justify-between gap-4 border-b border-[#4b3526]/12 px-5 sm:px-8\">\n        <a\n          href=\"#editorial-home\"\n          className=\"flex min-h-11 items-center gap-2 font-serif text-[22px] tracking-[-.06em] outline-none focus-visible:ring-2 focus-visible:ring-[#4568ff]\"\n        >\n          Northline{\" \"}\n          <span className=\"font-mono text-[9px] tracking-[.16em]\">JOURNAL</span>\n        </a>\n        <nav\n          aria-label={copy.navigation}\n          className=\"hidden gap-4 text-[11px] font-medium text-[#745f4b] md:flex\"\n        >\n          <a href=\"#editorial-stories\">{copy.stories}</a>\n          <a href=\"#editorial-gallery\">{copy.gallery}</a>\n          <a href=\"#editorial-letter\">{copy.letter}</a>\n        </nav>\n        <button\n          type=\"button\"\n          onClick={() => setJoined(true)}\n          className=\"min-h-11 rounded-full bg-[#2f251b] px-4 text-[11px] font-semibold text-[#fff2de] outline-none focus-visible:ring-2 focus-visible:ring-[#4568ff]\"\n        >\n          {joined ? copy.joined : copy.subscribe}\n        </button>\n      </header>\n      <div id=\"editorial-home\" className=\"p-4 sm:p-6 lg:p-8\">\n        <CinematicHero\n          eyebrow={copy.issue}\n          title={copy.title}\n          description={copy.intro}\n          actionLabel={copy.read}\n          art={art(\n            \"bg-[linear-gradient(126deg,#17475f_0_44%,#d96847_44%_50%,#395b50_50%)]\",\n            \"border-[#f0bd68]\",\n          )}\n        />\n        <section\n          id=\"editorial-stories\"\n          className=\"mt-8 grid gap-6 lg:grid-cols-[minmax(0,1.18fr)_minmax(260px,.82fr)]\"\n        >\n          <div>\n            <span className=\"font-mono text-[9px] tracking-[.16em] text-[#80674e]\">\n              {copy.featured}\n            </span>\n            <KineticHeading\n              text={copy.headline}\n              label={copy.featured}\n              detail={copy.body}\n              className=\"mt-3\"\n            />\n            <div className=\"mt-6 flex items-center gap-3 border-y border-[#4b3526]/12 py-4\">\n              <span className=\"grid size-9 place-items-center rounded-full bg-[#31546a] font-serif text-white\">\n                N\n              </span>\n              <span>\n                <strong className=\"block text-[11px]\">Mina Alvarez</strong>\n                <span className=\"text-[9px] text-[#80674e]\">{copy.byline}</span>\n              </span>\n            </div>\n          </div>\n          <ScrollStory\n            label={copy.storyLabel}\n            height={360}\n            chapters={[\n              {\n                id: \"arrive\",\n                eyebrow: \"01\",\n                title: copy.arrive,\n                copy: copy.arriveCopy,\n                scene: art(\"bg-[#20475b]\", \"border-[#f0bd68]\"),\n              },\n              {\n                id: \"listen\",\n                eyebrow: \"02\",\n                title: copy.listen,\n                copy: copy.listenCopy,\n                scene: art(\"bg-[#703d3f]\", \"border-[#f2c06c]\"),\n              },\n              {\n                id: \"return\",\n                eyebrow: \"03\",\n                title: copy.return,\n                copy: copy.returnCopy,\n                scene: art(\"bg-[#2d2859]\", \"border-[#bba8ff]\"),\n              },\n            ]}\n          />\n        </section>\n        <section id=\"editorial-gallery\" className=\"mt-10\">\n          <FocusGallery items={gallery} label={copy.galleryLabel} />\n        </section>\n        <section\n          id=\"editorial-letter\"\n          className=\"mt-8 grid gap-4 border-t border-[#4b3526]/12 pt-8 sm:grid-cols-[1fr_auto] sm:items-end\"\n        >\n          <div>\n            <span className=\"font-mono text-[9px] tracking-[.16em] text-[#80674e]\">\n              {copy.letter}\n            </span>\n            <h2 className=\"mt-2 max-w-[18ch] font-serif text-[30px] leading-[.9] tracking-[-.06em]\">\n              {copy.letterTitle}\n            </h2>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => setJoined(true)}\n            className=\"min-h-11 rounded-full border border-[#4b3526]/20 bg-[#fff6e9] px-4 text-[11px] font-semibold outline-none focus-visible:ring-2 focus-visible:ring-[#4568ff]\"\n          >\n            {joined ? copy.joined : copy.subscribe}\n          </button>\n        </section>\n      </div>\n    </motion.section>\n  );\n}\nconst en = {\n  navigation: \"Journal navigation\",\n  stories: \"Stories\",\n  gallery: \"Gallery\",\n  letter: \"Letter\",\n  subscribe: \"Subscribe\",\n  joined: \"Subscribed\",\n  issue: \"NORTHLINE / AUTUMN 2026\",\n  title: \"Listen between tides\",\n  intro:\n    \"A visual journal of harbour light, late ferries and the frequencies that remain after midnight.\",\n  read: \"Read the issue\",\n  featured: \"FEATURED STORY\",\n  headline: \"A harbour keeps its own weather.\",\n  body: \"For three November evenings, we followed the last crossing from the old breakwater to the edge of the city. The route is short; the light never repeats itself.\",\n  byline: \"Words and images · 8 min read\",\n  storyLabel: \"Harbour story\",\n  arrive: \"Arrive\",\n  arriveCopy: \"The ferry leaves before the street lamps settle.\",\n  listen: \"Listen\",\n  listenCopy: \"Wind makes a radio of every railing.\",\n  return: \"Return\",\n  returnCopy: \"The same coast becomes a different page.\",\n  galleryLabel: \"Field studies\",\n  harbour: \"Harbour after rain\",\n  harbourCopy: \"Wet cobalt, rust and reflected traffic.\",\n  orchard: \"Orchard table\",\n  orchardCopy: \"Late fruit, linen and the last usable daylight.\",\n  signal: \"Night score\",\n  signalCopy: \"An ultraviolet pulse against a sodium-orange line.\",\n  letterTitle: \"One new field note, sent when it is ready.\",\n};\nconst zh = {\n  navigation: \"刊物导航\",\n  stories: \"故事\",\n  gallery: \"画廊\",\n  letter: \"来信\",\n  subscribe: \"订阅\",\n  joined: \"已订阅\",\n  issue: \"北岸 / 2026 秋季册\",\n  title: \"在潮汐之间聆听\",\n  intro: \"一本关于港湾光线、末班渡轮与午夜后仍在回响的频率的影像日记。\",\n  read: \"阅读本期\",\n  featured: \"本期特写\",\n  headline: \"港湾拥有自己的天气。\",\n  body: \"连续三个十一月夜晚，我们跟随最后一班渡轮，从旧防波堤抵达城市边缘。航线很短，光线从未重复。\",\n  byline: \"文字与影像 · 阅读约 8 分钟\",\n  storyLabel: \"港湾故事\",\n  arrive: \"抵达\",\n  arriveCopy: \"街灯尚未安定，渡轮已经离岸。\",\n  listen: \"聆听\",\n  listenCopy: \"每一段栏杆都被风吹成电台。\",\n  return: \"返回\",\n  returnCopy: \"同一片海岸成为另一张页面。\",\n  galleryLabel: \"现场研究\",\n  harbour: \"雨后的港湾\",\n  harbourCopy: \"湿润钴蓝、锈色与街灯倒影。\",\n  orchard: \"果园餐桌\",\n  orchardCopy: \"晚熟果实、亚麻与最后的可用日光。\",\n  signal: \"夜间乐谱\",\n  signalCopy: \"紫外脉冲停留在钠灯橙线旁。\",\n  letterTitle: \"一则新的现场笔记，在它准备好时抵达。\",\n};\n"
    }
  ]
}