{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "entity-card",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/card.json"
  ],
  "files": [
    {
      "path": "entity-card.tsx",
      "target": "components/ui/entity-card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Card, type CardProps } from \"./card\";\n\nexport type EntityVariant = \"stack\" | \"row\" | \"showcase\";\n\nexport interface EntityCardProps extends CardProps {\n  /**\n   * Layout style:\n   *   stack:    media on top, content below (gallery tile; the default).\n   *   row:      media as a side panel, content beside it (compact list row).\n   *   showcase: a large content column with an oversized title (the numbered\n   *             \"selected work\" card).\n   */\n  variant?: EntityVariant;\n}\n\nconst variantRoot: Record<EntityVariant, string> = {\n  stack: \"flex-col\",\n  row: \"flex-col sm:flex-row sm:items-stretch\",\n  showcase: \"flex-col\",\n};\n\nexport const EntityCard = React.forwardRef<HTMLDivElement, EntityCardProps>(\n  ({ className, variant = \"stack\", ...p }, ref) => (\n    <Card\n      ref={ref}\n      data-variant={variant}\n      className={cn(\n        \"group/entity flex overflow-hidden rounded-2xl\",\n        variantRoot[variant],\n        className,\n      )}\n      {...p}\n    />\n  ),\n);\nEntityCard.displayName = \"EntityCard\";\n\n/** The text column. Required for `row`/`showcase`; wraps meta, title, body. */\nexport const EntityContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...p }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex min-w-0 flex-1 flex-col\",\n      \"group-data-[variant=showcase]/entity:justify-end group-data-[variant=showcase]/entity:p-[clamp(1.25rem,3vw,2rem)]\",\n      className,\n    )}\n    {...p}\n  />\n));\nEntityContent.displayName = \"EntityContent\";\n\nexport const EntityMedia = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...p }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"relative aspect-video w-full overflow-hidden bg-sunken\",\n      \"group-data-[variant=row]/entity:aspect-square group-data-[variant=row]/entity:w-full group-data-[variant=row]/entity:sm:aspect-auto group-data-[variant=row]/entity:sm:w-40 group-data-[variant=row]/entity:sm:shrink-0\",\n      \"[&_img]:h-full [&_img]:w-full [&_img]:object-cover\",\n      \"[&>*]:transition-control [&>*]:duration-ambient [&>*]:ease-soft\",\n      \"group-hover/entity:[&>*]:scale-[1.03]\",\n      \"motion-reduce:[&>*]:transition-none motion-reduce:[&>*]:scale-100\",\n      className,\n    )}\n    {...p}\n  />\n));\nEntityMedia.displayName = \"EntityMedia\";\n\nexport const EntityMeta = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...p }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-2 px-5 pt-5 font-mono text-[0.7rem] uppercase tracking-[0.12em] tabular-nums text-muted\",\n      \"group-data-[variant=showcase]/entity:px-0 group-data-[variant=showcase]/entity:pt-0\",\n      className,\n    )}\n    {...p}\n  />\n));\nEntityMeta.displayName = \"EntityMeta\";\n\n/** The oversized mono index marker, e.g. 001, for the showcase style. */\nexport const EntityIndex = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...p }, ref) => (\n  <span\n    ref={ref}\n    className={cn(\n      \"font-mono text-sm font-bold tabular-nums tracking-[0.16em] text-accent-alt\",\n      className,\n    )}\n    {...p}\n  />\n));\nEntityIndex.displayName = \"EntityIndex\";\n\nexport const EntityTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...p }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"flex items-center gap-1.5 text-balance px-5 pt-3 text-base font-semibold tracking-[-0.01em] text-ink\",\n      \"group-data-[variant=showcase]/entity:px-0 group-data-[variant=showcase]/entity:pt-4 group-data-[variant=showcase]/entity:text-[clamp(1.5rem,3vw,2.25rem)] group-data-[variant=showcase]/entity:font-bold group-data-[variant=showcase]/entity:leading-[1.05]\",\n      \"transition-layout duration-base ease-soft motion-reduce:transition-none\",\n      \"after:leading-none after:text-accent group-data-[interactive]/entity:after:content-['→']\",\n      \"group-hover/entity:gap-2.5\",\n      className,\n    )}\n    {...p}\n  />\n));\nEntityTitle.displayName = \"EntityTitle\";\n\nexport const EntityBody = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...p }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\n      \"px-5 pt-2 text-sm text-muted [text-wrap:pretty]\",\n      \"group-data-[variant=showcase]/entity:px-0 group-data-[variant=showcase]/entity:pt-4 group-data-[variant=showcase]/entity:max-w-prose group-data-[variant=showcase]/entity:leading-relaxed\",\n      className,\n    )}\n    {...p}\n  />\n));\nEntityBody.displayName = \"EntityBody\";\n\nexport const EntityActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...p }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"mt-auto flex items-center gap-2 p-5\",\n      \"group-data-[variant=showcase]/entity:px-0 group-data-[variant=showcase]/entity:pb-0 group-data-[variant=showcase]/entity:pt-6\",\n      className,\n    )}\n    {...p}\n  />\n));\nEntityActions.displayName = \"EntityActions\";\n"
    }
  ]
}