{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "size-readout",
  "type": "registry:ui",
  "title": "Size readout",
  "description": "A graphite pill that reads a measured value: an object's size, a multi-selection's count, a copy, a zoom level. Surface(graphite-deep) with a live Led and the value in Label(readout).",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/size-readout/size-readout.tsx",
      "type": "registry:ui",
      "target": "components/metalui/size-readout/size-readout.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Surface } from '../surface/surface';\nimport { Led } from '../status/status';\nimport { Label } from '../label/label';\n\n/* SIZE READOUT (the reference design's .readout): Surface(graphite-deep, pill) › Led(live) + Label(readout)\n * with its × and · in Label(readout-dim). A component, not a block: the Selection frame places one\n * under its object, and blocks never import blocks.\n *   ● 320 × 214     an object's size\n *   ● 3 · 540 × 180 a multi-selection\n *   ● COPIED · PNG 130 × 215   a copy, for 900 ms (the host times it)\n *   ● 100 %         any other short value\n *   ● 3 blocks      a value with a dimmed unit (the lasso's count) */\n\nexport interface SizeReadoutProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {\n  width?: number;\n  height?: number;\n  /** Blocks in a multi-selection. */\n  count?: number;\n  /** A copy just happened, in this format: \"PNG\". */\n  copied?: string | null;\n  /** Any other short value in place of the size: \"100 %\". */\n  value?: React.ReactNode;\n  /** A dimmed word after the value: \"blocks\". */\n  unit?: React.ReactNode;\n  /** Hide the LED (a readout that is not live). */\n  led?: boolean;\n}\n\nconst READOUT = 'mu-readout inline-flex items-center gap-presence-readout-gap-inner h-presence-readout-height pl-presence-readout-pad-start pr-presence-readout-pad-end whitespace-nowrap transition-opacity ease-settle duration-settle';\n\n// Each figure and mark is its own flex item, 6 apart, as the reference's text runs are.\nconst V = ({ children }: { children: React.ReactNode }) => <Label variant=\"readout\">{children}</Label>;\nconst Mark = ({ children }: { children: React.ReactNode }) => (\n  <Label as=\"i\" variant=\"readout-dim\" className=\"mu-readout-x\">{children}</Label>\n);\n\nexport const SizeReadout = React.forwardRef<HTMLSpanElement, SizeReadoutProps>(function SizeReadout(\n  { width = 0, height = 0, count, copied, value, unit, led = true, className, ...props },\n  ref,\n) {\n  const w = Math.round(width), h = Math.round(height);\n  return (\n    <Surface ref={ref} as=\"span\" material=\"graphite-deep\" radius=\"pill\" className={className ? `${READOUT} ${className}` : READOUT} {...props}>\n      {led && <Led kind=\"live\" />}\n      {value !== undefined ? <><V>{value}</V>{unit !== undefined && <Mark>{unit}</Mark>}</> : copied ? (\n        <><V>COPIED</V><Mark>·</Mark><V>{copied} {w}</V><Mark>×</Mark><V>{h}</V></>\n      ) : count && count > 1 ? (\n        <><V>{count}</V><Mark>·</Mark><V>{w}</V><Mark>×</Mark><V>{h}</V></>\n      ) : (\n        <><V>{w}</V><Mark>×</Mark><V>{h}</V></>\n      )}\n    </Surface>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/size-readout.md. SwiftUI: MetalSizeReadout in the MetalUI Swift package."
}