{
  "name": "DEFAULT_REGIONS",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/EdgeRace.tsx",
  "chapterTag": "11 Narrative Systems",
  "chapter": "12-narrative-systems.html",
  "sectionId": null,
  "elName": null,
  "demoUrl": null,
  "hasLiveDemo": false,
  "description": "Default region scenarios — the chapter §11.12 \"Closest edge wins\" demo\ncontent baked in so `<EdgeRace />` works with zero props. Five regions:\nUS WEST · US EAST · EUROPE · ASIA · OCEANIA.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "EdgeRace",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "EdgeRaceProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "EdgeRaceRegion",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "EdgeRaceServer",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { DEFAULT_REGIONS } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "regions",
      "optional": true,
      "type": "EdgeRaceRegion[]",
      "doc": "Region scenarios — typically 5 (US-WEST, US-EAST, EUROPE, ASIA, OCEANIA). Defaults to {@link DEFAULT_REGIONS} (the chapter §11.12 demo content)."
    },
    {
      "name": "cycleMs",
      "optional": true,
      "type": "number",
      "doc": "Cycle duration per region in ms. Defaults to `5000`."
    }
  ],
  "classesUsed": [
    "edge-race",
    "edge-race-pager-dot",
    "edge-race-server",
    "edge-race-server-dot",
    "edge-race-server-label",
    "reveal",
    "title"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".edge-race {\n  position: relative;\n  width: 100%;\n  max-width: 540px;\n  aspect-ratio: 1 / 1;\n  /* Vertical breathing room — the pager dots sit at bottom: -28px and the\n     region pill at top: -8px, so account for both plus a comfortable gap. */\n  margin: var(--s-6) auto var(--s-7);\n}\n\n.edge-race-pager-dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--hair);\n  transition: background 200ms var(--ease);\n}\n\n.edge-race-server {\n  display: inline-flex; align-items: center; gap: 4px;\n  font: 600 10px/1 var(--f-mono);\n  letter-spacing: 0.06em; text-transform: uppercase;\n  color: var(--fg-soft);\n  white-space: nowrap;\n}\n\n.edge-race-server-dot {\n  width: 6px; height: 6px; border-radius: 50%;\n  background: var(--fg-dim);\n  flex-shrink: 0;\n}\n\n.edge-race-server-label {\n  font: inherit;\n  color: inherit;\n}\n\n.reveal {\n  opacity: 0;\n  transform: translateY(14px);\n  transition: opacity 480ms var(--ease), transform 480ms var(--ease);\n  transition-delay: calc(var(--i, 0) * 60ms);\n  will-change: opacity, transform;\n}\n.reveal {\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 700ms var(--ease), transform 700ms var(--ease);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}