{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "runtime-overview-panel",
  "type": "registry:component",
  "title": "Runtime Overview Panel",
  "description": "Top-of-dock summary tile grid for runtime health when no canvas object is selected.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/runtime-overview-panel/runtime-overview-panel.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 * Trend direction for a runtime metric.\n *\n * @public\n */\nexport type RuntimeMetricTrend = \"down\" | \"flat\" | \"up\";\n\n/**\n * Tone of the metric value — drives the dot color.\n *\n * @public\n */\nexport type RuntimeMetricTone = \"danger\" | \"neutral\" | \"success\" | \"warn\";\n\n/**\n * One metric tile in the runtime overview.\n *\n * @public\n */\nexport type RuntimeMetric = {\n  /** Optional secondary line (delta, target, owner). */\n  detail?: ReactNode;\n  /** Stable identifier — used as the React key. */\n  id: string;\n  /** Short label (e.g. `\"Active runs\"`). */\n  label: ReactNode;\n  /** Optional tone for the dot. Defaults to `\"neutral\"`. */\n  tone?: RuntimeMetricTone;\n  /** Optional trend arrow next to the value. */\n  trend?: RuntimeMetricTrend;\n  /** Display value (already formatted by the host). */\n  value: ReactNode;\n};\n\n/**\n * Localizable strings.\n *\n * @public\n */\nexport type RuntimeOverviewPanelLabels = {\n  /** Empty-state copy. Defaults to `\"No runtime metrics\"`. */\n  empty?: string;\n  /** Aria-label for the panel. Defaults to `\"Runtime overview\"`. */\n  region?: string;\n};\n\nconst DEFAULT_LABELS = {\n  empty: \"No runtime metrics\",\n  region: \"Runtime overview\",\n} as const satisfies Required<RuntimeOverviewPanelLabels>;\n\nconst TONE_DOT: Record<RuntimeMetricTone, string> = {\n  danger: \"bg-red-500\",\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-emerald-500\",\n  warn: \"bg-amber-500\",\n};\n\nconst TREND_GLYPH: Record<RuntimeMetricTrend, string> = {\n  down: \"↓\",\n  flat: \"·\",\n  up: \"↑\",\n};\n\n/**\n * Props for {@link RuntimeOverviewPanel}.\n *\n * @public\n */\nexport type RuntimeOverviewPanelProps = {\n  /** Localizable strings. */\n  labels?: RuntimeOverviewPanelLabels;\n  /** Metric tiles in render order. */\n  metrics: RuntimeMetric[];\n  /** Panel title. Defaults to `\"Runtime\"`. */\n  title?: ReactNode;\n} & ComponentPropsWithoutRef<\"section\">;\n\nconst Tile = (props: { metric: RuntimeMetric }): React.ReactElement => {\n  const { metric } = props;\n  const tone = metric.tone ?? \"neutral\";\n  return (\n    <li\n      className=\"flex flex-col gap-1 rounded-md border border-border/60 bg-muted/20 px-2.5 py-2\"\n      data-runtime-metric={metric.id}\n      data-runtime-tone={tone}\n    >\n      <span className=\"flex items-center gap-1.5 text-[10px] uppercase tracking-wide text-muted-foreground\">\n        <span\n          aria-hidden=\"true\"\n          className={cn(\"size-1.5 rounded-full\", TONE_DOT[tone])}\n        />\n        {metric.label}\n      </span>\n      <span className=\"flex items-baseline gap-1.5 text-sm font-semibold text-foreground\">\n        <span>{metric.value}</span>\n        {metric.trend ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"text-[10px] text-muted-foreground\"\n          >\n            {TREND_GLYPH[metric.trend]}\n          </span>\n        ) : null}\n      </span>\n      {metric.detail ? (\n        <span className=\"text-[10px] text-muted-foreground\">\n          {metric.detail}\n        </span>\n      ) : null}\n    </li>\n  );\n};\n\n/**\n * Top-of-dock summary for the runtime when nothing on the canvas is\n * selected. Renders a compact grid of metric tiles (active runs,\n * throughput, error rate, etc.). Pure presentation; the host computes\n * the metric list from the runtime stream.\n *\n * @example\n * ```tsx\n * <RuntimeOverviewPanel\n *   metrics={[\n *     { id: \"runs\",  label: \"Active runs\", value: 3, tone: \"success\" },\n *     { id: \"errs\",  label: \"Errors / hr\", value: 0, tone: \"neutral\", trend: \"flat\" },\n *     { id: \"tps\",   label: \"Throughput\", value: \"120 / s\", tone: \"success\", trend: \"up\" },\n *   ]}\n * />\n * ```\n *\n * @public\n */\nexport const RuntimeOverviewPanel = forwardRef<\n  HTMLElement,\n  RuntimeOverviewPanelProps\n>((props, ref) => {\n  const { className, labels, metrics, title = \"Runtime\", ...rest } = props;\n  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };\n  return (\n    <section\n      aria-label={resolvedLabels.region}\n      className={cn(\n        \"flex w-full flex-col gap-2 rounded-2xl border bg-background p-3 text-foreground\",\n        className,\n      )}\n      data-runtime-overview-panel\n      ref={ref}\n      {...rest}\n    >\n      <header>\n        <h3 className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n          {title}\n        </h3>\n      </header>\n      {metrics.length === 0 ? (\n        <p\n          className=\"px-2 py-3 text-center text-xs text-muted-foreground\"\n          data-runtime-state=\"empty\"\n        >\n          {resolvedLabels.empty}\n        </p>\n      ) : (\n        <ul className=\"grid grid-cols-2 gap-1.5\" data-runtime-grid>\n          {metrics.map((metric) => (\n            <Tile key={metric.id} metric={metric} />\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n});\nRuntimeOverviewPanel.displayName = \"RuntimeOverviewPanel\";\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}