{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "security-data-flow",
  "title": "Security — Data Flow",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/security-data-flow/SecurityDataFlow.tsx",
      "content": "'use client'\n\nimport { Fragment } from 'react'\nimport { ArrowRight, Building2, Cloud, Lock } from 'lucide-react'\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 zones = [\n  {\n    icon: Building2,\n    label: 'Your warehouse',\n    detail: 'Snowflake, BigQuery, Redshift, Postgres',\n    holds: ['Customer rows', 'PII and PHI', 'Raw event history'],\n  },\n  {\n    icon: Cloud,\n    label: 'Northwind',\n    detail: 'Your chosen region',\n    holds: ['Metric definitions', 'Query plans and timings', 'Access decisions'],\n  },\n  {\n    icon: Lock,\n    label: 'Your viewers',\n    detail: 'Scoped per identity',\n    holds: ['Aggregated results only', 'Nothing cached in the browser'],\n  },\n]\n\nconst crosses = ['Column names and types', 'Aggregate results, scoped', 'Query metadata and timings']\nconst neverCrosses = ['Customer rows', 'Primary keys', 'Free-text fields', 'Anything you have not modelled']\n\nexport function SecurityDataFlow() {\n  return (\n    <section data-slot=\"security-data-flow\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">Data flow</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">What crosses the boundary</h2>\n          <p className=\"text-muted-foreground mt-3 text-lg\">\n            And, more usefully, what never does. Both lists are below the diagram.\n          </p>\n        </div>\n\n        <Card className=\"mt-10\">\n          <CardContent className=\"p-6 lg:p-8\">\n            <div className=\"grid items-stretch gap-4 lg:grid-cols-[1fr_auto_1fr_auto_1fr]\">\n              {zones.map((zone, index) => (\n                <Fragment key={zone.label}>\n                  <div className=\"border-border bg-muted/30 rounded-lg border p-5\">\n                    <span\n                      className=\"border-border bg-background text-muted-foreground flex size-9 items-center justify-center rounded-lg border\"\n                      aria-hidden=\"true\"\n                    >\n                      <zone.icon className=\"size-4\" />\n                    </span>\n                    <p className=\"mt-4 text-sm font-semibold\">{zone.label}</p>\n                    <p className=\"text-muted-foreground mt-0.5 text-xs\">{zone.detail}</p>\n                    <ul className=\"mt-3 space-y-1\">\n                      {zone.holds.map((item) => (\n                        <li key={item} className=\"text-muted-foreground font-mono text-xs\">\n                          {item}\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n\n                  {index < zones.length - 1 && (\n                    <div\n                      className=\"text-muted-foreground/50 flex items-center justify-center lg:px-2\"\n                      aria-hidden=\"true\"\n                    >\n                      <ArrowRight className=\"size-4 rotate-90 lg:rotate-0\" />\n                    </div>\n                  )}\n                </Fragment>\n              ))}\n            </div>\n\n            <Separator className=\"my-8\" />\n\n            <div className=\"grid gap-8 sm:grid-cols-2\">\n              <div>\n                <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">\n                  Crosses the boundary\n                </p>\n                <ul className=\"mt-3 space-y-2\">\n                  {crosses.map((item) => (\n                    <li key={item} className=\"flex items-center gap-2.5 text-sm\">\n                      <span className=\"bg-primary size-1.5 shrink-0 rounded-full\" aria-hidden=\"true\" />\n                      <span>{item}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n\n              <div>\n                <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">Never crosses</p>\n                <ul className=\"mt-3 space-y-2\">\n                  {neverCrosses.map((item) => (\n                    <li key={item} className=\"flex items-center gap-2.5 text-sm\">\n                      <span className=\"bg-muted-foreground/40 size-1.5 shrink-0 rounded-full\" aria-hidden=\"true\" />\n                      <span className=\"text-muted-foreground\">{item}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Button variant=\"outline\" className=\"mt-6\">\n          Read the architecture note\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/SecurityDataFlow.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Diagram of what crosses the boundary and what does not: three labelled zones joined by drawn arrows, with a legend separating metadata from customer rows.",
  "categories": [
    "marketing"
  ]
}