{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-metric",
  "type": "registry:component",
  "title": "Sticky Metric",
  "description": "Pinned metric pill that sticks to a canvas object's corner.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/sticky-metric/sticky-metric.tsx",
      "content": "\"use client\";\n\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/**\n * Tone of the metric — drives the dot color.\n *\n * @public\n */\nexport type StickyMetricTone = \"danger\" | \"neutral\" | \"success\" | \"warn\";\n\n/**\n * Anchor corner relative to the canvas object the metric sticks to.\n *\n * @public\n */\nexport type StickyMetricAnchor =\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-left\"\n  | \"top-right\";\n\nconst TONE_DOT: Record<StickyMetricTone, string> = {\n  danger: \"bg-red-500\",\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-emerald-500\",\n  warn: \"bg-amber-500\",\n};\n\nconst ANCHOR_OFFSET: Record<StickyMetricAnchor, { transform: string }> = {\n  \"bottom-left\": { transform: \"translate(-100%, 100%)\" },\n  \"bottom-right\": { transform: \"translate(0%, 100%)\" },\n  \"top-left\": { transform: \"translate(-100%, -100%)\" },\n  \"top-right\": { transform: \"translate(0%, -100%)\" },\n};\n\n/**\n * Localizable strings.\n *\n * @public\n */\nexport type StickyMetricLabels = {\n  /** Aria-label override. Defaults to `\"Sticky metric\"`. */\n  region?: string;\n};\n\nconst DEFAULT_LABELS = {\n  region: \"Sticky metric\",\n} as const satisfies Required<StickyMetricLabels>;\n\n/**\n * Props for {@link StickyMetric}.\n *\n * @public\n */\nexport type StickyMetricProps = {\n  /** Anchor corner. Defaults to `\"top-right\"`. */\n  anchor?: StickyMetricAnchor;\n  /** Optional secondary slot rendered after the value (delta, unit). */\n  detail?: ReactNode;\n  /** Short metric label (e.g. `\"errs/min\"`). */\n  label: ReactNode;\n  /** Localizable strings. */\n  labels?: StickyMetricLabels;\n  /** Tone for the leading dot. Defaults to `\"neutral\"`. */\n  tone?: StickyMetricTone;\n  /** Display value (already formatted by host). */\n  value: ReactNode;\n  /** Anchor X in canvas pixels. */\n  x: number;\n  /** Anchor Y in canvas pixels. */\n  y: number;\n} & ComponentPropsWithoutRef<\"div\">;\n\n/**\n * Pinned metric pill that sticks to a canvas object's corner. Use to\n * overlay a single live value (errors / min, p95 latency, queue depth)\n * on a runtime object without consuming card real-estate. Pure\n * presentation; the host computes the anchor coords from the object's\n * bounding box and the value from the runtime stream.\n *\n * The wrapper is `pointer-events: none` — host gestures pass through.\n *\n * @example\n * ```tsx\n * <div className=\"relative h-screen w-screen\">\n *   <Canvas />\n *   <StickyMetric\n *     x={420} y={180}\n *     anchor=\"top-right\"\n *     label=\"errs / min\"\n *     value=\"14\"\n *     tone=\"danger\"\n *   />\n * </div>\n * ```\n *\n * @public\n */\nexport const StickyMetric = forwardRef<HTMLDivElement, StickyMetricProps>(\n  (props, ref) => {\n    const {\n      anchor = \"top-right\",\n      className,\n      detail,\n      label,\n      labels,\n      tone = \"neutral\",\n      value,\n      x,\n      y,\n      ...rest\n    } = props;\n    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n    return (\n      <div\n        aria-label={resolvedLabels.region}\n        className={cn(\n          \"pointer-events-none absolute z-20 inline-flex items-center gap-1.5 rounded-full border border-border bg-background/90 px-2 py-1 text-[11px] shadow-sm backdrop-blur\",\n          className,\n        )}\n        data-sticky-anchor={anchor}\n        data-sticky-metric\n        data-sticky-tone={tone}\n        ref={ref}\n        role=\"status\"\n        style={{\n          left: x,\n          top: y,\n          transform: ANCHOR_OFFSET[anchor].transform,\n        }}\n        {...rest}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\"size-1.5 rounded-full\", TONE_DOT[tone])}\n          data-sticky-metric-dot\n        />\n        <span className=\"font-medium text-muted-foreground\">{label}</span>\n        <span className=\"font-semibold text-foreground\">{value}</span>\n        {detail ? (\n          <span\n            className=\"text-[10px] text-muted-foreground\"\n            data-sticky-metric-detail\n          >\n            {detail}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\nStickyMetric.displayName = \"StickyMetric\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}