{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agency-header",
  "title": "Agency: Header",
  "description": "One line with the studio's availability, its pages as a list and the way in, then its name set bold, edge to edge.",
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json",
    "https://eased.dev/r/eased-motion.json",
    "https://eased.dev/r/agency-core.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/templates/agency/header.tsx",
      "content": "\"use client\";\n\nimport { useLayoutEffect, useRef, useState } from \"react\";\nimport { brand, nav } from \"./content\";\nimport { ArrowLink, COLUMN, useHref } from \"./kit\";\n\nconst LINK = \"focus-ring rounded-control-xs text-text transition-colors duration-(--eased-duration-fast) ease-standard hover-fine:text-text-secondary\";\n\n/**\n * The masthead: one quiet line (when the studio can start; its pages written as a list, comma\n * after comma; and the way in), then the name set in the heavy sans as wide as the page. It scrolls\n * away with the page; nothing sticks over the reel. Below md the availability goes.\n *\n * Every page past the home page takes the `compact` masthead: one row, the wordmark small as the\n * home link on the left, the nav and the way in on the right. It scrolls away too.\n */\nexport function Header({ compact = false }: { compact?: boolean }) {\n  const to = useHref();\n  if (compact)\n    return (\n      <header className={`${COLUMN} pt-pad-base`}>\n        <div className=\"flex min-h-control-md flex-wrap items-center justify-between gap-x-pad-lg gap-y-in text-ui\">\n          <a href={to(\"/\")} aria-label={`${brand.name} home`} className=\"focus-ring block rounded-control-xs\">\n            <Wordmark className=\"h-7 w-auto sm:h-8\" />\n          </a>\n          <div className=\"flex flex-wrap items-center gap-x-pad-lg gap-y-2\">\n            <Nav />\n            <ArrowLink href={nav.action.href}>{nav.action.label}</ArrowLink>\n          </div>\n        </div>\n      </header>\n    );\n  return (\n    <header className={`${COLUMN} pt-pad-base`}>\n      <div className=\"flex min-h-control-md flex-wrap items-center justify-between gap-x-pad-lg gap-y-2 text-ui\">\n        <p className=\"flex items-center gap-2 text-text-secondary max-md:hidden\">\n          <span aria-hidden className=\"size-2 rounded-[2px] bg-(--tessera-tile)\" />\n          {nav.availability}\n        </p>\n        <Nav />\n        <ArrowLink href={nav.action.href}>{nav.action.label}</ArrowLink>\n      </div>\n      <a href={to(\"/\")} aria-label={`${brand.name} home`} className=\"focus-ring mt-pad-md block rounded-control-sm sm:mt-pad-lg\">\n        <Wordmark />\n      </a>\n    </header>\n  );\n}\n\n/** The pages, written as one list, comma after comma. */\nfunction Nav() {\n  const to = useHref();\n  return (\n    <nav aria-label=\"Main\">\n      <ul className=\"flex flex-wrap items-center\">\n        {nav.links.map((link, i) => (\n          <li key={link.label} className=\"whitespace-pre\">\n            <a href={to(link.href)} className={LINK}>\n              {link.label}\n            </a>\n            {i < nav.links.length - 1 && <span className=\"text-text-muted\">, </span>}\n          </li>\n        ))}\n      </ul>\n    </nav>\n  );\n}\n\n/**\n * The name, edge to edge, in the sans at 800 with tight tracking, mixed case, and a vermilion\n * tile for a full stop. It is the logo, so it is set heavier than any heading may be (rule 43 is\n * for headings). SVG text whose viewBox is measured to the text's own box, so it spans\n * the column exactly at any width once the font has loaded; an estimate holds the height until.\n */\nfunction Wordmark({ className = \"block w-full\" }: { className?: string }) {\n  const ref = useRef<SVGTextElement>(null);\n  const [box, setBox] = useState({ x: 0, y: -84, w: 760, h: 104 });\n\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const measure = () => {\n      const b = el.getBBox();\n      if (b.width) setBox({ x: b.x, y: b.y + b.height * 0.2, w: b.width, h: b.height * 0.72 });\n    };\n    measure();\n    document.fonts?.ready.then(measure);\n  }, []);\n\n  // The tile sits on the baseline after the text, a gap's width beyond it.\n  const tile = 17;\n  return (\n    <svg\n      viewBox={`${box.x} ${box.y} ${box.w + tile * 1.6} ${box.h}`}\n      className={`overflow-visible text-text ${className}`}\n      role=\"img\"\n      aria-label={`${brand.wordmark.name} ${brand.wordmark.trade}`}\n    >\n      <text ref={ref} x=\"0\" y=\"0\" fill=\"currentColor\" fontSize=\"112\" fontWeight=\"800\" letterSpacing=\"-6.5\" className=\"font-display\" aria-hidden>\n        {brand.wordmark.name} {brand.wordmark.trade}\n      </text>\n      <rect x={box.x + box.w + tile * 0.6} y={-tile} width={tile} height={tile} rx=\"2\" fill=\"var(--tessera-tile)\" />\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/templates/agency/header.tsx"
    }
  ],
  "meta": {
    "template": "agency",
    "kind": "template-section",
    "industries": [
      "media"
    ]
  },
  "type": "registry:block"
}