{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "page",
  "title": "Page",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/page/Page.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface PageProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: PageProps = $props()\n</script>\n\n<div bind:this={ref} data-uipkge data-slot=\"page\" class={cn('space-y-6', className)} {...restProps}>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/page/Page.svelte"
    },
    {
      "path": "packages/registry-svelte/components/page/PageBody.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface PageBodyProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: PageBodyProps = $props()\n</script>\n\n<div bind:this={ref} data-uipkge data-slot=\"page-body\" class={cn('', className)} {...restProps}>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/page/PageBody.svelte"
    },
    {
      "path": "packages/registry-svelte/components/page/PageHeader.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface PageHeaderProps extends HTMLAttributes<HTMLDivElement> {\n    /** Action buttons rendered right of the heading (the Vue `#actions` slot). */\n    actions?: Snippet\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, actions, children, ref = $bindable(null), ...restProps }: PageHeaderProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge\n  data-slot=\"page-header\"\n  class={cn('flex flex-col justify-between gap-4 sm:flex-row sm:items-center', className)}\n  {...restProps}\n>\n  <div class=\"flex-1\">\n    {@render children?.()}\n  </div>\n  {@render actions?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/page/PageHeader.svelte"
    },
    {
      "path": "packages/registry-svelte/components/page/PageHeaderHeading.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface PageHeaderHeadingProps extends HTMLAttributes<HTMLDivElement> {\n    title: string\n    description?: string\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, title, description, ref = $bindable(null), ...restProps }: PageHeaderHeadingProps = $props()\n</script>\n\n<div bind:this={ref} data-uipkge data-slot=\"page-header-heading\" class={cn('', className)} {...restProps}>\n  <h2 class=\"text-xl font-bold tracking-tight\">{title}</h2>\n  {#if description}\n    <p class=\"text-muted-foreground mt-1 text-sm leading-relaxed\">{description}</p>\n  {/if}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/page/PageHeaderHeading.svelte"
    },
    {
      "path": "packages/registry-svelte/components/page/index.ts",
      "content": "export { default as Page, type PageProps } from './Page.svelte'\nexport { default as PageHeader, type PageHeaderProps } from './PageHeader.svelte'\nexport { default as PageHeaderHeading, type PageHeaderHeadingProps } from './PageHeaderHeading.svelte'\nexport { default as PageBody, type PageBodyProps } from './PageBody.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/page/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Page-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for `routes` pages so every screen looks consistent.",
  "categories": [
    "layout"
  ]
}