{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "list-cover",
  "type": "registry:ui",
  "title": "List cover",
  "description": "The generated cover art used by project rows and cards.",
  "registryDependencies": [
    "https://littmd.vercel.app/r/litt.json"
  ],
  "files": [
    {
      "path": "registry/litt/ui/list-cover.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n// @litt/list-cover 2026.10.26. What changed: https://littmd.vercel.app/changelog.md\n\n/**\n * Project covers: simple abstract compositions of rectangles and hairlines.\n *\n * Token colors only, no gradients: the page already has its one light source\n * (R2), so a cover is drawn, not lit. The artwork is static. The cover's own\n * fill (surface-2, stepping to surface-3 on hover) is set by the card.\n *\n * The viewBox is 320 x 200 and the card's cover is 8:5, so nothing crops.\n * Strokes use non-scaling-stroke so every hairline stays 1px at any size.\n */\nimport type { ReactNode } from \"react\";\n\nexport type CoverName =\n  | \"dashboard\"\n  | \"identity\"\n  | \"landing\"\n  | \"template\"\n  | \"type\"\n  | \"motion\"\n  | \"refresh\"\n  | \"system\"\n  | \"blank\";\n\nconst tone = {\n  panel: \"fill-litt-surface-1 stroke-litt-line-strong\",\n  bar: \"fill-litt-line-strong\",\n  soft: \"fill-litt-line\",\n  ink: \"fill-litt-fg-subtle\",\n} as const;\ntype Tone = keyof typeof tone;\n\nfunction R({ x, y, w, h, t = \"panel\" }: { x: number; y: number; w: number; h: number; t?: Tone }) {\n  return <rect x={x} y={y} width={w} height={h} className={tone[t]} vectorEffect=\"non-scaling-stroke\" />;\n}\n\nfunction L({ x1, y1, x2, y2, dash }: { x1: number; y1: number; x2: number; y2: number; dash?: string }) {\n  return (\n    <line\n      x1={x1}\n      y1={y1}\n      x2={x2}\n      y2={y2}\n      className=\"stroke-litt-line-strong\"\n      strokeDasharray={dash}\n      vectorEffect=\"non-scaling-stroke\"\n    />\n  );\n}\n\nconst art: Record<CoverName, ReactNode> = {\n  /* A fintech dashboard: sidebar, KPI panels, five bars. */\n  dashboard: (\n    <>\n      <R x={24} y={24} w={272} h={152} />\n      <L x1={24} y1={48} x2={296} y2={48} />\n      <L x1={88} y1={48} x2={88} y2={176} />\n      <R x={36} y={32} w={8} h={8} t=\"ink\" />\n      <R x={36} y={64} w={40} h={6} t=\"bar\" />\n      <R x={36} y={80} w={28} h={6} t=\"bar\" />\n      <R x={36} y={96} w={36} h={6} t=\"bar\" />\n      <R x={104} y={60} w={56} h={24} />\n      <R x={168} y={60} w={56} h={24} />\n      <R x={232} y={60} w={48} h={24} />\n      <L x1={104} y1={160} x2={280} y2={160} />\n      <R x={112} y={132} w={16} h={28} t=\"bar\" />\n      <R x={144} y={116} w={16} h={44} t=\"bar\" />\n      <R x={176} y={104} w={16} h={56} t=\"ink\" />\n      <R x={208} y={124} w={16} h={36} t=\"bar\" />\n      <R x={240} y={112} w={16} h={48} t=\"bar\" />\n    </>\n  ),\n  /* A brand identity: a mark, a tall sheet and two small sheets. */\n  identity: (\n    <>\n      <R x={24} y={24} w={128} h={152} />\n      <R x={72} y={72} w={32} h={32} t=\"ink\" />\n      <L x1={24} y1={132} x2={152} y2={132} />\n      <R x={40} y={144} w={48} h={6} t=\"bar\" />\n      <R x={40} y={158} w={28} h={6} t=\"soft\" />\n      <R x={168} y={24} w={56} h={152} />\n      <R x={176} y={32} w={40} h={6} t=\"bar\" />\n      <R x={176} y={44} w={24} h={6} t=\"soft\" />\n      <L x1={168} y1={100} x2={224} y2={100} />\n      <R x={240} y={24} w={56} h={72} />\n      <R x={240} y={104} w={56} h={72} />\n    </>\n  ),\n  /* A landing page: nav, headline, button and an image placeholder. */\n  landing: (\n    <>\n      <R x={24} y={24} w={272} h={152} />\n      <L x1={24} y1={48} x2={296} y2={48} />\n      <R x={36} y={32} w={8} h={8} t=\"ink\" />\n      <R x={232} y={34} w={12} h={4} t=\"bar\" />\n      <R x={252} y={34} w={12} h={4} t=\"bar\" />\n      <R x={272} y={34} w={12} h={4} t=\"bar\" />\n      <R x={48} y={72} w={128} h={12} t=\"bar\" />\n      <R x={48} y={92} w={96} h={12} t=\"bar\" />\n      <R x={48} y={120} w={80} h={6} t=\"soft\" />\n      <R x={48} y={132} w={64} h={6} t=\"soft\" />\n      <R x={48} y={148} w={40} h={16} />\n      <R x={200} y={64} w={80} h={96} />\n      <L x1={200} y1={64} x2={280} y2={160} />\n      <L x1={280} y1={64} x2={200} y2={160} />\n    </>\n  ),\n  /* A template: a grid of six page thumbnails. */\n  template: (\n    <>\n      {[24, 116, 208].flatMap((x, col) =>\n        [24, 104].map((y, row) => (\n          <g key={`${col}-${row}`}>\n            <R x={x} y={y} w={88} h={72} />\n            <R x={x + 8} y={y + 8} w={40} h={6} t=\"bar\" />\n            <R x={x + 8} y={y + 20} w={24} h={6} t=\"soft\" />\n            <R x={x + 8} y={y + 40} w={72} h={24} t={col === 1 && row === 0 ? \"ink\" : \"soft\"} />\n          </g>\n        )),\n      )}\n    </>\n  ),\n  /* A type specimen: guides, three letterforms, four lines of text. */\n  type: (\n    <>\n      <R x={24} y={24} w={272} h={152} />\n      <L x1={24} y1={52} x2={296} y2={52} />\n      <L x1={24} y1={84} x2={296} y2={84} />\n      <R x={48} y={52} w={20} h={32} t=\"ink\" />\n      <R x={80} y={52} w={20} h={32} t=\"bar\" />\n      <R x={112} y={52} w={20} h={32} t=\"bar\" />\n      <R x={48} y={108} w={224} h={6} t=\"bar\" />\n      <R x={48} y={124} w={208} h={6} t=\"bar\" />\n      <R x={48} y={140} w={216} h={6} t=\"bar\" />\n      <R x={48} y={156} w={120} h={6} t=\"bar\" />\n    </>\n  ),\n  /* A motion study: four panels stepping up a dotted path. */\n  motion: (\n    <>\n      <L x1={32} y1={168} x2={288} y2={32} dash=\"2 4\" />\n      <R x={32} y={128} w={64} h={40} t=\"soft\" />\n      <R x={96} y={96} w={64} h={40} />\n      <R x={160} y={64} w={64} h={40} />\n      <R x={224} y={32} w={64} h={40} t=\"bar\" />\n    </>\n  ),\n  /* A refresh: a sparse before beside a structured after. */\n  refresh: (\n    <>\n      <R x={24} y={24} w={128} h={152} />\n      <R x={40} y={40} w={72} h={8} t=\"soft\" />\n      <R x={40} y={60} w={96} h={8} t=\"soft\" />\n      <R x={40} y={80} w={40} h={8} t=\"soft\" />\n      <R x={40} y={128} w={56} h={20} t=\"soft\" />\n      <R x={168} y={24} w={128} h={152} />\n      <R x={184} y={40} w={24} h={24} t=\"ink\" />\n      <R x={216} y={40} w={64} h={6} t=\"bar\" />\n      <R x={216} y={52} w={40} h={6} t=\"soft\" />\n      <R x={184} y={80} w={96} h={40} t=\"soft\" />\n      <R x={184} y={132} w={44} h={28} t=\"bar\" />\n      <R x={236} y={132} w={44} h={28} t=\"bar\" />\n      <L x1={160} y1={16} x2={160} y2={184} />\n    </>\n  ),\n  /* A layout system: four columns with a few filled blocks. */\n  system: (\n    <>\n      <R x={24} y={24} w={272} h={152} />\n      <L x1={92} y1={24} x2={92} y2={176} />\n      <L x1={160} y1={24} x2={160} y2={176} />\n      <L x1={228} y1={24} x2={228} y2={176} />\n      <R x={32} y={32} w={52} h={60} t=\"soft\" />\n      <R x={100} y={32} w={52} h={28} t=\"bar\" />\n      <R x={168} y={68} w={52} h={100} t=\"soft\" />\n      <R x={236} y={32} w={52} h={44} t=\"soft\" />\n      <R x={236} y={140} w={12} h={12} t=\"ink\" />\n    </>\n  ),\n  /* A new project: an empty dashed frame with a plus. */\n  blank: (\n    <>\n      <rect x={24} y={24} width={272} height={152} className=\"fill-none stroke-litt-line-strong\" strokeDasharray=\"4 4\" vectorEffect=\"non-scaling-stroke\" />\n      <L x1={152} y1={100} x2={168} y2={100} />\n      <L x1={160} y1={92} x2={160} y2={108} />\n    </>\n  ),\n};\n\n/** A drawn cover that fills its parent, which should be relative and 8:5. Decorative, so screen readers skip it. */\nexport function ProjectCover({\n  name,\n  className = \"\",\n}: {\n  /** Which cover to draw: dashboard, identity, landing, template, type, motion, refresh, system or blank. */\n  name: CoverName;\n  /** Extra classes for the SVG. */\n  className?: string;\n}) {\n  return (\n    <svg\n      viewBox=\"0 0 320 200\"\n      preserveAspectRatio=\"xMidYMid slice\"\n      shapeRendering=\"crispEdges\"\n      className={\"absolute inset-0 size-full \" + className}\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    >\n      {art[name]}\n    </svg>\n  );\n}\n",
      "target": "components/litt/list-cover.tsx"
    }
  ],
  "docs": "Import ProjectCover from components/litt/list-cover.",
  "meta": {
    "version": "2026.10.26",
    "released": "2026-10-26",
    "changelog": "https://littmd.vercel.app/changelog.md"
  }
}