{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "block-silhouette",
  "type": "registry:ui",
  "title": "Block silhouette",
  "description": "A block seen from far away: below the far-zoom threshold the canvas draws one flat, cheap shape per block that still says its kind (text bars, a dark code card, a link's tinted glass, a colour, a light file plate, a region's tray and name).",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/block-silhouette/block-silhouette.tsx",
      "type": "registry:ui",
      "target": "components/metalui/block-silhouette/block-silhouette.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\n\n/* ─────────────────────────────────────────────────────────\n * BLOCK SILHOUETTE (far zoom; the native reference's layer-only LOD, per block kind)\n *\n * Below the far-zoom threshold (the core's lod_policy, 0.35) the canvas stops drawing blocks\n * and draws their silhouettes: one flat shape per block, no text, no shadows beyond a hairline,\n * cheap enough for thousands. Each kind stays recognisable:\n *\n *   text     bars where its lines are, no plate (a text block is words only at rest)\n *   code     its dark card with light bars inside\n *   link     its dark glass with the site's tint glowing from the top right\n *   swatch   its colour\n *   image    its average colour, lit a little from the top\n *   file     a light plate\n *   region   its tray with its name, set large enough to read at that zoom\n *\n *   enter    crossing the threshold (on the camera commit, never mid-gesture), silhouettes\n *            fade in on settle and the blocks they replace fade out; Reduce Motion: at once\n * The host sizes and places it in world coordinates, exactly where the block is.\n * ───────────────────────────────────────────────────────── */\n\nexport type SilhouetteKind = 'text' | 'code' | 'link' | 'swatch' | 'image' | 'file' | 'region';\n\nexport interface BlockSilhouetteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  kind: SilhouetteKind;\n  /** swatch: its hex. image: its average colour. link: the site's tint. */\n  color?: string;\n  /** region: its name. */\n  label?: string;\n  /** text and code: how many lines the block has, so the bars end where the words do. */\n  lines?: number;\n}\n\nconst ROOT = 'mu-silhouette relative box-border overflow-hidden animate-silhouette-in reduced-motion:animate-none';\nconst LOOK: Record<SilhouetteKind, string> = {\n  text: 'rounded-silhouette-text-radius',\n  code: 'rounded-silhouette-code-radius recipe-silhouette-code p-silhouette-code-pad',\n  link: 'rounded-silhouette-link-radius recipe-silhouette-link',\n  swatch: 'rounded-silhouette-swatch-radius recipe-silhouette-swatch',\n  image: 'rounded-silhouette-image-radius recipe-silhouette-image',\n  file: 'rounded-silhouette-file-radius recipe-silhouette-file',\n  region: 'rounded-silhouette-region-radius recipe-silhouette-region p-silhouette-region-pad',\n};\nconst TEXT_BARS = 'silhouette-text-bars w-full';\nconst CODE_BARS = 'silhouette-code-bars w-full';\nconst REGION_LABEL = 'block type-silhouette-region text-silhouette-region-ink whitespace-nowrap overflow-hidden text-ellipsis';\n\n/** A block drawn from far away: one flat shape that still says what the block is. */\nexport const BlockSilhouette = React.forwardRef<HTMLDivElement, BlockSilhouetteProps>(function BlockSilhouette(\n  { kind, color, label, lines, className, style, ...props },\n  ref,\n) {\n  const self = color ? ({ '--mu-self': color } as React.CSSProperties) : undefined;\n  // The bars stop after the block's last line: lines × the line pitch, else the whole block.\n  const barsHeight = (pitch: string) => (lines ? { height: `calc(${lines} * var(${pitch}))` } : { height: '100%' });\n  return (\n    <div\n      ref={ref}\n      aria-hidden\n      data-kind={kind}\n      data-mu-self={color ? '' : undefined}\n      className={[ROOT, LOOK[kind], className].filter(Boolean).join(' ')}\n      style={{ ...self, ...style }}\n      {...props}\n    >\n      {kind === 'text' && <div className={TEXT_BARS} style={barsHeight('--mu-r-silhouette-text-line')} />}\n      {kind === 'code' && <div className={CODE_BARS} style={barsHeight('--mu-r-silhouette-code-line')} />}\n      {kind === 'region' && label && <span className={REGION_LABEL}>{label}</span>}\n    </div>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/block-silhouette.md. SwiftUI: MetalBlockSilhouette in the MetalUI Swift package."
}