{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "bento-metrics-mixed",
  "title": "Bento — Mixed Metrics",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/bento-metrics-mixed/BentoMetricsMixed.vue",
      "content": "<script setup lang=\"ts\">\nimport { ArrowUpRight, CircleCheck } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst series = [4, 9, 7, 14, 11, 18, 16, 23, 21, 28, 26, 33]\n\nconst definitions = [\n  { name: 'revenue_net', owner: 'finance' },\n  { name: 'margin_by_channel', owner: 'finance' },\n  { name: 'pipeline_weighted', owner: 'revops' },\n]\n\n// Inline SVG polyline: a sparkline does not justify a charting dependency.\nfunction points(values: number[]) {\n  const min = Math.min(...values)\n  const max = Math.max(...values)\n  const span = max - min || 1\n  return values\n    .map((value, index) => {\n      const x = (index / (values.length - 1)) * 100\n      const y = 30 - ((value - min) / span) * 26\n      return `${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(' ')\n}\n</script>\n\n<template>\n  <section data-slot=\"bento-metrics-mixed\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-16\">\n      <Badge variant=\"secondary\">At a glance</Badge>\n\n      <div class=\"mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n        <Card>\n          <CardContent class=\"p-5\">\n            <p class=\"text-muted-foreground text-xs tracking-wide uppercase\">Days to close</p>\n            <p class=\"font-display mt-2 text-3xl font-bold tracking-tight\">4.2</p>\n            <p class=\"text-success mt-1 text-xs\">down from 9.4</p>\n          </CardContent>\n        </Card>\n\n        <Card class=\"sm:col-span-2\">\n          <CardContent class=\"p-5\">\n            <div class=\"flex items-baseline justify-between gap-3\">\n              <p class=\"text-muted-foreground text-xs tracking-wide uppercase\">Certified metrics published</p>\n              <p class=\"font-mono text-xs\">12 months</p>\n            </div>\n            <p class=\"font-display mt-2 text-3xl font-bold tracking-tight\">340</p>\n            <svg\n              class=\"text-primary/70 mt-2 h-8 w-full\"\n              viewBox=\"0 0 100 32\"\n              preserveAspectRatio=\"none\"\n              aria-hidden=\"true\"\n            >\n              <polyline :points=\"points(series)\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n            </svg>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardContent class=\"flex h-full flex-col p-5\">\n            <p class=\"text-muted-foreground text-xs tracking-wide uppercase\">Status</p>\n            <div class=\"mt-3 flex items-center gap-2\">\n              <CircleCheck class=\"text-success size-4\" aria-hidden=\"true\" />\n              <p class=\"text-sm font-medium\">All systems operational</p>\n            </div>\n            <p class=\"text-muted-foreground mt-auto pt-3 font-mono text-xs\">99.98% · rolling 90 days</p>\n          </CardContent>\n        </Card>\n\n        <Card class=\"sm:col-span-2\">\n          <CardContent class=\"p-5\">\n            <p class=\"text-muted-foreground text-xs tracking-wide uppercase\">Most-read definitions</p>\n            <ul class=\"mt-3 space-y-2\">\n              <li\n                v-for=\"definition in definitions\"\n                :key=\"definition.name\"\n                class=\"flex items-center justify-between gap-3\"\n              >\n                <span class=\"min-w-0 truncate font-mono text-xs\">{{ definition.name }}</span>\n                <span class=\"text-muted-foreground shrink-0 text-xs\">{{ definition.owner }}</span>\n              </li>\n            </ul>\n          </CardContent>\n        </Card>\n\n        <Card class=\"sm:col-span-2\">\n          <CardContent class=\"flex h-full flex-col justify-between gap-4 p-5 sm:flex-row sm:items-center\">\n            <div class=\"min-w-0\">\n              <p class=\"text-sm font-medium\">See the whole workspace</p>\n              <p class=\"text-muted-foreground mt-1 text-xs\">Live demo, no signup, real definitions.</p>\n            </div>\n            <Button variant=\"outline\" size=\"sm\" class=\"shrink-0\">\n              Open the demo\n              <ArrowUpRight class=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n            </Button>\n          </CardContent>\n        </Card>\n      </div>\n\n      <Separator class=\"mt-6\" />\n      <p class=\"text-muted-foreground mt-4 text-xs\">Figures from the Northwind workspace, refreshed hourly.</p>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/BentoMetricsMixed.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Five-tile bento mixing headline numbers, an inline sparkline, a short list, and a status tile, for the summary band beneath a hero.",
  "categories": [
    "marketing"
  ]
}