{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "prose", "type": "registry:ui", "title": "Prose", "description": "The article-body wrapper. Renders an `
` whose descendants (`h1`–`h6`, `p`, `a`, `ul`/`ol`/`li`, `blockquote`, `code`/`pre`, `table`, `img`) get DS-token-mapped typography without per-element class gymnastics in the consumer. Think MDX-target…", "author": "ofri-peretz ", "categories": [ "blog", "primitive" ], "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "https://ds.interlace.tools/r/theme.json", "https://ds.interlace.tools/r/cn.json" ], "files": [ { "path": "registry/interlace-ui/prose.tsx", "target": "components/ui/prose.tsx", "type": "registry:ui", "content": "'use client';\n\nimport * as React from 'react';\n\n// @interlace/prose v1.1.0 — Interlace design system.\n// Docs, props and live preview: https://ds.interlace.tools/c/prose\n// What changed since: https://ds.interlace.tools/c/prose#history\n// Generated banner — keep it, the upgrade diff reads this version.\n\n/**\n * @interlace/ui — Prose\n *\n * The article-body wrapper. Renders an `
` whose descendants\n * (`h1`–`h6`, `p`, `a`, `ul`/`ol`/`li`, `blockquote`, `code`/`pre`, `table`,\n * `img`) get DS-token-mapped typography without per-element class\n * gymnastics in the consumer. Think MDX-target wrapper: drop a stream of\n * Markdown / MDX inside and it reads like a published article — measure\n * bounded, GFM tables zebra-striped, headings deep-link-anchorable.\n *\n * The descendant cascade lives on the wrapper itself via Tailwind\n * arbitrary-variant utilities (`[&_h1]:…`) so the whole contract is\n * auditable from one cva base and every value still resolves to a DS token\n * (R19). A stable `prose-interlace` className is also applied as an\n * external hook for consumer overrides (e.g. fumadocs MDX plugins).\n *\n * `variant=\"long\"` switches the body to `--text-long` (17px / 1.7) for\n * extended reading per TYPOGRAPHY_PHILOSOPHY (Reading mode vs UI mode).\n *\n * ## Anatomy\n *\n *
\n *

…

\n *

…

\n *
  • …
\n * 
…
\n *
\n *
\n *\n * The `as` prop accepts `'article' | 'div' | 'main' | 'section'` so the\n * wrapper can be the document root (`main`), a section in a wider\n * layout (`section`), or a non-landmark container (`div`).\n *\n * ## MIN_VIEWPORT — 320\n *\n * Long-form reading is one of the failure modes that MUST work on the\n * narrowest phone. Headings and measure all collapse cleanly at 320 CSS-px;\n * tables get `overflow-x: auto` (`[&_table]:block [&_table]:overflow-x-auto`)\n * so wide GFM tables scroll horizontally instead of breaking the page.\n *\n * | Rule | Concept | Where in this file |\n * | ---- | -------------------------------- | ----------------------------------------------------------- |\n * | R4 | Extends native el + VariantProps | `React.ComponentProps<'article'> & VariantProps<...>` |\n * | R6 | data-slot on root | `data-slot=\"prose\"` + data-variant |\n * | R7 | className merged + ...rest + ref | `cn(proseVariants(...), 'prose-interlace', className)` |\n * | R8 | No `isXxx`; enum for variants | `variant` is an enum (`default` / `long`) |\n * | R10 | Composition seam (`as` prop) | `as` accepts `article` / `div` / `main` / `section` |\n * | R14 | Declares min viewport | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |\n * | R18 | Tailwind only | Zero inline `style`; cva + arbitrary-variant utilities |\n * | R19 | Tokens only | `--text-*`, `--spacing-*`, `--container-prose`, semantic colors |\n * | R20 | AA contrast | `text-foreground` / `text-muted-foreground` clear AA in light + dark |\n * | R25 | Client component | useLayoutEffect injects `tabindex=\"0\"` on overflowing `
`/`` for axe `scrollable-region-focusable` |\n * | R26  | A11y from native el              | semantic elements (`article`, `h*`, `a`, `table`) own the a11y tree |\n */\n\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n/**\n * Minimum viable viewport (CSS px) for this primitive. Below it, the\n * preflight contract draws a dev-mode outline; in prod the component still\n * renders. Exported so consumers / tests can read it.\n */\nexport const MIN_VIEWPORT = 320 as const;\n\n/**\n * Element seam — keep the set closed (`article` default + the three\n * landmark-or-neutral alternatives). Anything else (a ``, a `
`\n     * inside their MDX/HTML content is to inject it from the wrapper.\n     *\n     * useLayoutEffect runs after render but before paint, so the attribute is\n     * in place before the test-runner's axe scan inspects the DOM. We also\n     * re-run when children change (React reconciles a new key set) by keying\n     * on `children` identity via the dependency array.\n     */\n    React.useLayoutEffect(() => {\n      const root = localRef.current;\n      if (!root) return;\n      for (const el of root.querySelectorAll('pre, table')) {\n        if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');\n      }\n    }, [children]);\n\n    const setRef = (node: HTMLElement | null) => {\n      localRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) (ref as React.MutableRefObject).current = node;\n    };\n\n    return (\n      \n        {children}\n      \n    );\n  },\n);\nProse.displayName = 'Prose';\n\nexport { Prose, proseVariants };\nexport type { ProseProps };\n"
    }
  ],
  "meta": {
    "tier": "primitive",
    "client": true,
    "minViewport": 320,
    "loading": false,
    "version": "1.1.0",
    "since": "1.0.0"
  },
  "docs": "## @interlace/prose\n\nInstalled to `components/ui/prose.tsx`.\n\n```tsx\nimport { /* … */ } from '@/components/ui/prose';\n```\n\nProps, a11y contract, live preview and source: https://ds.interlace.tools/c/prose\n\nRequires the `@interlace/theme` CSS baseline (installed automatically as a registry dependency)."
}