{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "eased-demo-frame",
  "title": "Demo frame",
  "description": "The shell every Eased demo renders in: 420px tall, shrinks to its container, one 48px header style.",
  "registryDependencies": [
    "https://eased.dev/r/eased-tokens.json"
  ],
  "files": [
    {
      "path": "src/registry/eased/lib/demo-frame.tsx",
      "content": "import type { ReactNode } from \"react\";\n\nexport type DemoFrameProps = {\n  /** Header title. Leave it out for demos that draw their own app chrome. */\n  title?: ReactNode;\n  /** Muted text on the right of the header, e.g. \"5 items\". */\n  meta?: ReactNode;\n  /**\n   * Controls on the right of the header. Bordered and filled controls sit on the 16px content\n   * line; pass ghost buttons `edge=\"end\"` so their icon or label lands on it instead.\n   */\n  actions?: ReactNode;\n  /** Extra classes for the root, e.g. `select-none`. */\n  className?: string;\n  /** The frame's height in px. Default 420; a full app screen (a block with a sidebar) may ask for more. */\n  height?: number;\n  children: ReactNode;\n};\n\n/**\n * The standard Eased demo shell: 420px tall, 28rem wide unless a parent sets `--demo-width`,\n * shrinks to its container (never forces\n * horizontal scroll), 16px panel radius, and a 48px header with one title style. The root\n * is a size container, so demos adapt to the tile with `@max-sm:` and friends rather than\n * the viewport, and it exposes `--radius-outer`/`--pad` for concentric children. It sets\n * Eased's UI type (`text-ui`) and text colour, so a demo reads the same in any app.\n */\nexport function DemoFrame({ title, meta, actions, className = \"\", height, children }: DemoFrameProps) {\n  return (\n    <div\n      style={height === undefined ? undefined : { height }}\n      className={`@container relative flex h-[420px] w-full max-w-(--demo-width,28rem) min-w-0 flex-col overflow-hidden rounded-panel border border-line-subtle bg-surface text-ui text-text [--pad:16px] [--radius-outer:var(--eased-radius-panel)] ${className}`}\n    >\n      {title !== undefined && (\n        <div\n          className=\"flex h-12 shrink-0 items-center justify-between gap-3 border-b border-line-subtle px-(--pad)\"\n        >\n          <div className=\"flex min-w-0 items-center gap-2 text-ui font-medium text-text\">\n            {typeof title === \"string\" ? <p className=\"truncate\">{title}</p> : title}\n          </div>\n          {(meta !== undefined || actions) && (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              {meta !== undefined && <div className=\"text-ui-sm text-text-muted tabular-nums\">{meta}</div>}\n              {actions}\n            </div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/eased/lib/demo-frame.tsx"
    }
  ],
  "type": "registry:component"
}