{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "registry-item-template",
  "type": "registry:block",
  "title": "Registry Item Template",
  "description": "Full-page surface for a single registry item's documentation (`/c/[name]` on ds.interlace.tools). Composes the header (item name + description + install snippet), the anatomy diagram, the variants matrix, related-components grid, and a CTA back to the…",
  "author": "ofri-peretz <https://github.com/ofri-peretz>",
  "categories": [
    "blog",
    "template"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://ds.interlace.tools/r/theme.json",
    "https://ds.interlace.tools/r/cn.json",
    "https://ds.interlace.tools/r/container.json",
    "https://ds.interlace.tools/r/section-boundary.json",
    "https://ds.interlace.tools/r/skeleton.json",
    "https://ds.interlace.tools/r/stack.json",
    "https://ds.interlace.tools/r/typography.json"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/templates/registry-item-template.tsx",
      "target": "components/ui/templates/registry-item-template.tsx",
      "type": "registry:block",
      "content": "import * as React from 'react';\n\n// @interlace/registry-item-template v1.1.0 — Interlace design system.\n// Docs, props and live preview: https://ds.interlace.tools/c/registry-item-template\n// What changed since: https://ds.interlace.tools/c/registry-item-template#history\n// Generated banner — keep it, the upgrade diff reads this version.\n\n/**\n * @interlace/ui — RegistryItemTemplate\n *\n * Full-page surface for a single registry item's documentation\n * (`/c/[name]` on ds.interlace.tools). Composes the header (item name +\n * description + install snippet), the anatomy diagram, the variants\n * matrix, related-components grid, and a CTA back to the registry —\n * each in its own `<SectionBoundary>` so the page streams\n * section-by-section.\n *\n * The DS eats its own dog food here: the registry app's `/c/[name]/page.tsx`\n * uses this template instead of hand-rolling the layout per-item.\n *\n * ## Anatomy\n *\n *   <article data-slot=\"registry-item-template\" data-min-viewport=\"320\">\n *     <Container size=\"content\">\n *       <SectionBoundary name=\"registry-item-header\">\n *         Header: name + description + install command\n *       </SectionBoundary>\n *       <SectionBoundary name=\"registry-item-anatomy\">\n *         Anatomy / API surface\n *       </SectionBoundary>\n *       <SectionBoundary name=\"registry-item-variants\">\n *         Variant matrix (CVA-driven)\n *       </SectionBoundary>\n *       <SectionBoundary name=\"registry-item-related\">\n *         Related components\n *       </SectionBoundary>\n *     </Container>\n *   </article>\n *\n * ## MIN_VIEWPORT — 320\n *\n * Container.content collapses to full width below 1024; the template\n * layout is fluid down to 320 CSS-px.\n *\n * | Rule | Concept                          | Where in this file                                          |\n * | ---- | -------------------------------- | ----------------------------------------------------------- |\n * | R4   | Extends native el                | `React.ComponentProps<'article'>` + template props          |\n * | R6   | data-slot on root                | `data-slot=\"registry-item-template\"`                        |\n * | R7   | className merged + ...rest       | `cn(className)` + `{...props}` on <article>                 |\n * | R10  | Composition seam (slots)         | `header` / `anatomy` / `variants` / `related` ReactNode props |\n * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}`                  |\n * | R18  | Tailwind only                    | Zero inline `style`; layout via Container + Stack + cn()    |\n * | R19  | Tokens only                      | (delegated to composed primitives)                          |\n * | R20  | AA contrast                      | (delegated)                                                  |\n * | R25  | Server component                 | Pure composition — no hooks                                 |\n * | R26  | A11y                             | `<article>` landmark + per-section `<SectionBoundary>` regions |\n */\n\nimport { cn } from '@/lib/utils';\nimport { SectionBoundary } from '@/components/ui/section-boundary';\nimport { Container } from '@/components/ui/container';\nimport { Typography } from '@/components/ui/typography';\nimport { Stack } from '@/components/ui/stack';\nimport { Skeleton } from '@/components/ui/skeleton';\n\nexport const MIN_VIEWPORT = 320 as const;\n\ninterface RegistryItemTemplateProps\n  extends Omit<React.ComponentProps<'article'>, 'title'> {\n  /** Component name — rendered as the page h1. */\n  name: string;\n  /** One-line description shown under the name. */\n  description?: React.ReactNode;\n  /**\n   * Install command — typically a `<CodeBlock language=\"bash\">npx shadcn\n   * add @interlace/<name></CodeBlock>` element. Pass as ReactNode so the\n   * template doesn't take a hard dep on CodeBlock.\n   */\n  install?: React.ReactNode;\n  /** Anatomy diagram + API surface (slots, props, R-rule mapping). */\n  anatomy?: React.ReactNode;\n  /** Variants matrix — CVA cells, themed in light + dark. */\n  variants?: React.ReactNode;\n  /** Related-components grid (e.g. \"Often used with…\"). */\n  related?: React.ReactNode;\n  /**\n   * Extra trailing content (e.g. a CTA back to the index, a \"Report an\n   * issue\" link). Rendered AFTER `related` inside its own SectionBoundary.\n   */\n  footer?: React.ReactNode;\n}\n\nfunction RegistryItemTemplate({\n  name,\n  description,\n  install,\n  anatomy,\n  variants,\n  related,\n  footer,\n  className,\n  ...props\n}: RegistryItemTemplateProps) {\n  return (\n    <article\n      data-slot=\"registry-item-template\"\n      data-min-viewport={String(MIN_VIEWPORT)}\n      className={cn('py-xl', className)}\n      {...props}\n    >\n      <Container size=\"content\">\n        <SectionBoundary\n          name=\"registry-item-header\"\n          skeletonVariant=\"page-header\"\n        >\n          <Stack gap=\"md\">\n            <Typography variant=\"h1\" as=\"h1\" className=\"text-balance\">\n              {name}\n            </Typography>\n            {description ? (\n              <Typography\n                variant=\"long\"\n                as=\"p\"\n                tone=\"muted\"\n                className=\"max-w-prose\"\n              >\n                {description}\n              </Typography>\n            ) : null}\n            {install ? <div className=\"mt-md\">{install}</div> : null}\n          </Stack>\n        </SectionBoundary>\n\n        {anatomy ? (\n          <SectionBoundary\n            name=\"registry-item-anatomy\"\n            skeletonVariant=\"code-block\"\n            className=\"mt-xl\"\n          >\n            <Stack gap=\"md\">\n              <Typography variant=\"h2\" as=\"h2\">\n                Anatomy\n              </Typography>\n              {anatomy}\n            </Stack>\n          </SectionBoundary>\n        ) : null}\n\n        {variants ? (\n          <SectionBoundary\n            name=\"registry-item-variants\"\n            skeletonVariant=\"card\"\n            className=\"mt-xl\"\n          >\n            <Stack gap=\"md\">\n              <Typography variant=\"h2\" as=\"h2\">\n                Variants\n              </Typography>\n              {variants}\n            </Stack>\n          </SectionBoundary>\n        ) : null}\n\n        {related ? (\n          <SectionBoundary\n            name=\"registry-item-related\"\n            skeletonVariant=\"article-card\"\n            className=\"mt-xl\"\n          >\n            <Stack gap=\"md\">\n              <Typography variant=\"h2\" as=\"h2\">\n                Related components\n              </Typography>\n              {related}\n            </Stack>\n          </SectionBoundary>\n        ) : null}\n\n        {footer ? (\n          <SectionBoundary\n            name=\"registry-item-footer\"\n            skeletonVariant=\"card\"\n            className=\"mt-xl\"\n          >\n            {footer}\n          </SectionBoundary>\n        ) : null}\n      </Container>\n    </article>\n  );\n}\nRegistryItemTemplate.displayName = 'RegistryItemTemplate';\n\n/**\n * Page-level loading state — the full-page silhouette of\n * `<RegistryItemTemplate>`, not a single rect. Rendered by the consumer while\n * the whole route's data is in flight (`loading.tsx` in Next.js), or as\n * a `<SectionBoundary skeleton={…}>` override.\n *\n * Shapes mirror the real layout so the swap is CLS-neutral (R23). One\n * `role=\"status\"` region for the page; inner skeletons pass\n * `label={null}` so screen readers hear one announcement, not ten.\n */\nfunction RegistryItemTemplateSkeleton({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"registry-item-template-skeleton\"\n      data-min-viewport={String(MIN_VIEWPORT)}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label=\"Loading component…\"\n      className={cn('py-xl', className)}\n      {...props}\n    >\n      <Container size=\"content\">\n        <Stack gap=\"xl\">\n          <Skeleton variant=\"page-header\" label={null} />\n          <Skeleton variant=\"code-block\" label={null} />\n          <Skeleton variant=\"card\" count={2} label={null} />\n          <Skeleton variant=\"article-card\" label={null} />\n        </Stack>\n      </Container>\n    </div>\n  );\n}\nRegistryItemTemplateSkeleton.displayName = 'RegistryItemTemplateSkeleton';\nRegistryItemTemplate.Skeleton = RegistryItemTemplateSkeleton;\n\nexport { RegistryItemTemplate };\nexport type { RegistryItemTemplateProps };\n"
    }
  ],
  "meta": {
    "tier": "template",
    "client": false,
    "minViewport": 320,
    "loading": false,
    "version": "1.1.0",
    "since": "1.0.0"
  },
  "docs": "## @interlace/registry-item-template\n\nInstalled to `components/ui/templates/registry-item-template.tsx`.\n\n```tsx\nimport { /* … */ } from '@/components/ui/templates/registry-item-template';\n```\n\nProps, a11y contract, live preview and source: https://ds.interlace.tools/c/registry-item-template\n\nRequires the `@interlace/theme` CSS baseline (installed automatically as a registry dependency)."
}