{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "framed",
  "type": "registry:ui",
  "title": "Framed",
  "description": "Whether a whole screen stands alone or sits inside a page that has its own main landmark and h1. Inside Framed, a block's Main is a div and its headings drop one level, so the page keeps one main, one h1 and an outline that never skips.",
  "files": [
    {
      "path": "registry/litt/ui/framed.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n// @litt/framed 2026.11.03. What changed: https://littmd.vercel.app/changelog.md\n\n/**\n * Framed: whether a whole screen stands alone or sits inside a page that already has its own main landmark and h1,\n * such as a preview in a docs site.\n *\n * - A block is written as the whole app: one <Main> and one <Heading level={1}>, its sections at level 2.\n * - Inside <Framed>, Main is a div and every Heading is one level lower (1 becomes 2, 2 becomes 3), so the host page\n *   keeps one main and one h1 and its outline never skips a level. Classes set the look, so nothing you see changes.\n * - Without a Framed above it nothing changes: a block in an app renders main and h1.\n */\nimport { createContext, useContext, type HTMLAttributes, type ReactNode } from \"react\";\n\nconst FramedContext = createContext(false);\n\n/**\n * Marks what is inside as a screen shown within a page that owns the main landmark and the h1. Mount it around a\n * block's preview; an app that renders the block as its page leaves it out.\n */\nexport function Framed({\n  children,\n}: {\n  /** The screen shown inside the page. */\n  children: ReactNode;\n}) {\n  return <FramedContext value={true}>{children}</FramedContext>;\n}\n\n/** True inside a Framed. */\nexport function useFramed(): boolean {\n  return useContext(FramedContext);\n}\n\n/** The screen's main landmark: a main, or a div inside a Framed. */\nexport function Main(props: HTMLAttributes<HTMLElement>) {\n  const Tag = useFramed() ? \"div\" : \"main\";\n  return <Tag {...props} />;\n}\n\nexport type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  /** The level when the screen stands alone. Inside a Framed it renders one level lower. */\n  level: 1 | 2 | 3 | 4 | 5;\n};\n\nconst TAGS = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"] as const;\n\n/** A heading whose level follows the screen: as given when it stands alone, one lower inside a Framed. */\nexport function Heading({ level, ...props }: HeadingProps) {\n  const Tag = TAGS[level - 1 + (useFramed() ? 1 : 0)];\n  return <Tag {...props} />;\n}\n",
      "target": "components/litt/framed.tsx"
    }
  ],
  "docs": "Import Framed from components/litt/framed and wrap a block's preview in it, such as a screen shown in a docs page. A block rendered as your page needs nothing.",
  "meta": {
    "version": "2026.11.03",
    "released": "2026-11-03",
    "changelog": "https://littmd.vercel.app/changelog.md"
  }
}