{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sticky-metric",
  "title": "Sticky Metric",
  "description": "Pinned metric pill that sticks to a canvas object's corner.",
  "dependencies": [
    "@vllnt/ui@^0.3.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/sticky-metric/sticky-metric.tsx",
      "content": "\"use client\";\n\nimport type { ComponentPropsWithoutRef, ReactNode } 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 = ({\n  ref,\n  ...props\n}: StickyMetricProps & { ref?: React.Ref<HTMLDivElement> }) => {\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};\nStickyMetric.displayName = \"StickyMetric\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.3.0",
  "stability": "stable"
}