{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "record-detail-page",
  "title": "Record Detail Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/record-detail-page/RecordDetailPage.svelte",
      "content": "<script lang=\"ts\">\n  import type { Component } from 'svelte'\n  import {\n    Building2,\n    ChevronRight,\n    CreditCard,\n    FileText,\n    Mail,\n    MessageSquare,\n    Pencil,\n    Plus,\n    ReceiptText,\n    Trash2,\n    UserPlus,\n  } from '@lucide/svelte'\n  import { Avatar, AvatarFallback, AvatarImage } from '$lib/components/ui/avatar'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs'\n\n  interface DataListRow {\n    label: string\n    value: string\n  }\n\n  interface Section {\n    title: string\n    icon: Component\n    rows: DataListRow[]\n  }\n\n  interface ActivityEvent {\n    icon: Component\n    sentence: string\n    time: string\n  }\n\n  interface Order {\n    id: string\n    amount: string\n    status: 'Paid' | 'Pending' | 'Refunded'\n  }\n\n  const summaryRows: DataListRow[] = [\n    { label: 'Account ID', value: 'CUS-004182' },\n    { label: 'Plan', value: 'Business annual' },\n    { label: 'Lifetime value', value: '$48,200' },\n  ]\n\n  const sections: Section[] = [\n    {\n      title: 'Contact',\n      icon: Mail,\n      rows: [\n        { label: 'Email', value: 'billing@acmecorp.com' },\n        { label: 'Phone', value: '+1 (415) 555-0134' },\n        { label: 'Website', value: 'acmecorp.com' },\n        { label: 'Address', value: '500 Market St, San Francisco, CA' },\n      ],\n    },\n    {\n      title: 'Company',\n      icon: Building2,\n      rows: [\n        { label: 'Industry', value: 'Logistics & supply chain' },\n        { label: 'Employees', value: '240–500' },\n        { label: 'Tax ID', value: 'US-84-2917365' },\n        { label: 'Payment terms', value: 'Net 30' },\n      ],\n    },\n  ]\n\n  const activity: ActivityEvent[] = [\n    { icon: ReceiptText, sentence: 'Invoice INV-2091 paid — $12,400', time: '2h ago' },\n    { icon: MessageSquare, sentence: 'Priya left a note on the renewal deal', time: 'Yesterday' },\n    { icon: UserPlus, sentence: 'Dana Whitfield added as billing contact', time: '3d ago' },\n    { icon: FileText, sentence: 'Contract Q3-amendment.pdf uploaded', time: '1w ago' },\n  ]\n\n  const tags = ['enterprise', 'renewal-q4', 'priority-support']\n\n  const orders: Order[] = [\n    { id: 'ORD-8841', amount: '$12,400.00', status: 'Paid' },\n    { id: 'ORD-8790', amount: '$3,180.50', status: 'Pending' },\n    { id: 'ORD-8612', amount: '$940.00', status: 'Refunded' },\n  ]\n</script>\n\n<div data-slot=\"record-detail-page\" class=\"bg-background text-foreground w-full\">\n  <div class=\"flex flex-wrap items-center justify-between gap-4\">\n    <div class=\"flex min-w-0 items-center gap-1.5\">\n      <Button variant=\"link\" size=\"sm\" class=\"text-muted-foreground h-auto min-h-6 px-0\">Customers</Button>\n      <ChevronRight class=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n      <span class=\"truncate text-sm font-semibold\">Acme Corp</span>\n      <Badge variant=\"secondary\" class=\"ml-2\">Active</Badge>\n    </div>\n    <div class=\"flex items-center gap-2\">\n      <Button variant=\"outline\" size=\"sm\">\n        <Pencil class=\"size-4\" aria-hidden=\"true\" />\n        Edit\n      </Button>\n      <Button variant=\"outline\" size=\"sm\" class=\"text-destructive hover:text-destructive\">\n        <Trash2 class=\"size-4\" aria-hidden=\"true\" />\n        Delete\n      </Button>\n    </div>\n  </div>\n\n  <div class=\"mt-6 grid gap-6 lg:grid-cols-3\">\n    <div class=\"space-y-6 lg:col-span-2\">\n      <Card>\n        <CardHeader class=\"flex-row items-center gap-4 space-y-0\">\n          <Avatar size=\"2xl\" class=\"size-14\">\n            <AvatarImage src=\"https://i.pravatar.cc/112?img=32\" alt=\"Acme Corp logo\" />\n            <AvatarFallback>AC</AvatarFallback>\n          </Avatar>\n          <div class=\"min-w-0\">\n            <CardTitle class=\"text-lg\">Acme Corp</CardTitle>\n            <CardDescription class=\"truncate\">billing@acmecorp.com · Customer since March 2023</CardDescription>\n          </div>\n        </CardHeader>\n        <CardContent>\n          <Separator class=\"mb-4\" />\n          <dl class=\"grid gap-x-8 gap-y-3 sm:grid-cols-3\">\n            {#each summaryRows as row (row.label)}\n              <div>\n                <dt class=\"text-muted-foreground text-xs\">{row.label}</dt>\n                <dd class=\"mt-0.5 text-sm font-medium\">{row.value}</dd>\n              </div>\n            {/each}\n          </dl>\n        </CardContent>\n      </Card>\n\n      <Tabs defaultValue=\"details\">\n        <TabsList>\n          <TabsTrigger value=\"details\">Details</TabsTrigger>\n          <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n        </TabsList>\n\n        <TabsContent value=\"details\" class=\"space-y-6 pt-4\">\n          {#each sections as section (section.title)}\n            {@const SectionIcon = section.icon}\n            <section>\n              <h3 class=\"flex items-center gap-2 text-sm font-semibold\">\n                <SectionIcon class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n                {section.title}\n              </h3>\n              <dl class=\"border-border mt-3 divide-y rounded-lg border\">\n                {#each section.rows as row (row.label)}\n                  <div class=\"px-4 py-2.5 sm:flex sm:items-center sm:gap-4\">\n                    <dt class=\"text-muted-foreground text-xs sm:w-36 sm:text-sm\">{row.label}</dt>\n                    <dd class=\"mt-0.5 text-sm font-medium sm:mt-0\">{row.value}</dd>\n                  </div>\n                {/each}\n              </dl>\n            </section>\n          {/each}\n        </TabsContent>\n\n        <TabsContent value=\"activity\" class=\"pt-4\">\n          <ol\n            class=\"before:bg-border relative space-y-6 before:absolute before:inset-y-1 before:left-[15px] before:w-px\"\n          >\n            {#each activity as event (event.sentence)}\n              {@const EventIcon = event.icon}\n              <li class=\"relative flex items-start gap-4 pl-0\">\n                <span\n                  class=\"bg-background ring-border relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full ring-1\"\n                >\n                  <EventIcon class=\"text-muted-foreground size-4\" aria-hidden=\"true\" />\n                </span>\n                <div class=\"min-w-0 pt-1\">\n                  <p class=\"truncate text-sm\">{event.sentence}</p>\n                  <time class=\"text-muted-foreground text-xs\">{event.time}</time>\n                </div>\n              </li>\n            {/each}\n          </ol>\n        </TabsContent>\n      </Tabs>\n    </div>\n\n    <div class=\"space-y-6\">\n      <Card>\n        <CardHeader>\n          <CardTitle class=\"text-sm font-medium\">Record meta</CardTitle>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <div class=\"flex items-center gap-3\">\n            <Avatar class=\"size-8\">\n              <AvatarImage src=\"https://i.pravatar.cc/64?img=47\" alt=\"Priya Raman\" />\n              <AvatarFallback>PR</AvatarFallback>\n            </Avatar>\n            <div class=\"min-w-0\">\n              <p class=\"text-muted-foreground text-xs\">Owner</p>\n              <p class=\"truncate text-sm font-medium\">Priya Raman</p>\n            </div>\n          </div>\n          <Separator />\n          <dl class=\"space-y-3\">\n            <div class=\"flex items-center justify-between gap-4\">\n              <dt class=\"text-muted-foreground text-xs\">Created</dt>\n              <dd class=\"text-sm font-medium\">Mar 14, 2023</dd>\n            </div>\n            <div class=\"flex items-center justify-between gap-4\">\n              <dt class=\"text-muted-foreground text-xs\">Updated</dt>\n              <dd class=\"text-sm font-medium\">2 hours ago</dd>\n            </div>\n          </dl>\n          <Separator />\n          <div>\n            <p class=\"text-muted-foreground mb-2 text-xs\">Tags</p>\n            <div class=\"flex flex-wrap gap-1.5\">\n              {#each tags as tag (tag)}\n                <Badge variant=\"secondary\">{tag}</Badge>\n              {/each}\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card>\n        <CardHeader class=\"flex-row items-center justify-between space-y-0\">\n          <CardTitle class=\"text-sm font-medium\">Recent orders</CardTitle>\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"View all orders\">\n            <CreditCard class=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n        </CardHeader>\n        <CardContent>\n          <ul class=\"divide-y\">\n            {#each orders as order (order.id)}\n              <li class=\"flex items-center gap-3 py-2.5 first:pt-0 last:pb-0\">\n                <span class=\"font-mono text-xs\">{order.id}</span>\n                <span class=\"text-muted-foreground ml-auto text-sm tabular-nums\">{order.amount}</span>\n                <Badge\n                  variant={order.status === 'Paid' ? 'default' : order.status === 'Pending' ? 'secondary' : 'outline'}\n                  class=\"min-w-[72px] justify-center\"\n                >\n                  {order.status}\n                </Badge>\n              </li>\n            {/each}\n          </ul>\n          <Button variant=\"outline\" size=\"sm\" class=\"mt-4 w-full\">\n            <Plus class=\"size-4\" aria-hidden=\"true\" />\n            New order\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</div>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/record-detail-page/RecordDetailPage.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/avatar.json",
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/separator.json",
    "https://uipkge.dev/r/svelte/tabs.json"
  ],
  "description": "Admin record detail page: breadcrumb header with status badge and Edit / Delete actions, two-column layout with a summary card (avatar, identity, key metrics), Details / Activity tabs (labeled description-list sections and an icon timeline feed), plus a side panel with owner metadata, relative timestamps, tag badges, and a recent-orders mini list. All data is hardcoded inline for you to replace.",
  "categories": [
    "layout",
    "app"
  ]
}