{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-engraving",
  "type": "registry:ui",
  "title": "Hover engraving",
  "description": "A block's identity on a 420 ms dwell: Surface(tip) beside its first line with the kind and details in Label(engraved), derived tags as Chip(tag) and the recognizer's status with a Led.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/blocks/hover-engraving/hover-engraving.tsx",
      "type": "registry:ui",
      "target": "components/metalui/blocks/hover-engraving/hover-engraving.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Surface } from '../../components/surface/surface';\nimport { Label } from '../../components/label/label';\nimport { Chip } from '../../components/chip/chip';\nimport { Led } from '../../components/status/status';\n\n/* ─────────────────────────────────────────────────────────\n * HOVER ENGRAVING (the reference design's .meta): a composition\n *   Surface(tip, pill) › Label(engraved) <b>kind</b> · details + Chip(tag) × n + Label(engraved) Led status\n *\n *   pass      the pointer crosses the block: nothing\n *   dwell     the block stays hovered 420 ms: the engraving fades in on settle,\n *             sliding 3 in from the block (beside) or 2 down (below)\n *   leave     it goes at once, on settle, no delay\n *   selected  hidden, and hidden while writing (the host passes open={false})\n * Reduce Motion: settle resolves to a crossfade, so it fades in place.\n * ───────────────────────────────────────────────────────── */\n\n/* Layout and timing from the engraving group. Hidden until a dwell; leaving is immediate (the delay\n * only applies on the way in). A dwell, not a pass: the host must stay hovered for 420 ms. */\nconst PILL = 'mu-engraving absolute z-2 flex items-center gap-engraving-gap h-engraving-height px-engraving-pad whitespace-nowrap pointer-events-none opacity-0 engraving-motion [.mu-icon-trigger:hover>&]:not-data-[open=false]:engraving-shown data-[open=true]:engraving-shown data-[open=true]:data-immediate:delay-0';\n/* Beside the first line of a text block, so a stacked list below stays readable; under a material block. */\nconst PLACEMENT = {\n  beside: 'left-full ml-engraving-beside-gap top-engraving-beside-top engraving-beside-out',\n  below: 'left-0 top-full mt-engraving-below-gap engraving-below-out',\n};\nconst TAGS = 'mu-engraving-tags flex gap-engraving-tag-gap';\nconst STATUS = 'mu-engraving-status [&>.mu-led]:inline-block [&>.mu-led]:mr-engraving-led-gap [&>.mu-led]:engraving-led-lift';\n\nexport type EngravingStatus = 'live' | 'waiting' | 'failed' | 'off';\n\nexport interface HoverEngravingProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {\n  /** The block's kind, emphasised first: \"LOG\", \"TASK\", \"TITLE\". */\n  kind: string;\n  /** Then time, edits, other life events: \"07:40\", \"SLEEP 6 H\", \"ALSO TIRED\". */\n  details?: string[];\n  /** Tags derived from a cluster title or region, as hollow pills: \"poster\". */\n  tags?: string[];\n  /** The recognizer's status, with its LED: { led: 'live', text: 'RECOGNIZER ✓' }. */\n  status?: { led: EngravingStatus; text: string };\n  /** beside the first line of a text block (default), or below a material block. */\n  placement?: 'beside' | 'below';\n  /** Controlled: true shows it (after the dwell), false hides it (selected, writing). Default: the host's hover. */\n  open?: boolean;\n  /** With open, skip the dwell (a keyboard focus, a docs still). */\n  immediate?: boolean;\n}\n\n/** A block's identity on a dwell: what it is, when, and where it came from. */\nexport const HoverEngraving = React.forwardRef<HTMLSpanElement, HoverEngravingProps>(function HoverEngraving(\n  { kind, details = [], tags = [], status, placement = 'beside', open, immediate, className, ...props },\n  ref,\n) {\n  return (\n    <Surface\n      ref={ref}\n      as=\"span\"\n      material=\"tip\"\n      radius=\"pill\"\n      role=\"note\"\n      data-placement={placement}\n      data-open={open === undefined ? undefined : String(open)}\n      data-immediate={immediate ? '' : undefined}\n      className={className ? `${PILL} ${PLACEMENT[placement]} ${className}` : `${PILL} ${PLACEMENT[placement]}`}\n      {...props}\n    >\n      <Label variant=\"engraved\">\n        <b>{kind}</b>\n        {details.map((d) => ` · ${d}`).join('')}\n      </Label>\n      {tags.length > 0 && (\n        <span className={TAGS}>\n          {tags.map((t) => <Chip key={t} variant=\"tag\">#{t}</Chip>)}\n        </span>\n      )}\n      {status && (\n        <Label variant=\"engraved\" className={STATUS}>\n          <Led kind={status.led} />\n          {status.text}\n        </Label>\n      )}\n    </Surface>\n  );\n});\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/hover-engraving.md. SwiftUI: MetalHoverEngraving in the MetalUI Swift package."
}