react-dashstream 0.3.0 → 0.3.2

package/skills/dashstream-core/SKILL.md

@@ -0,0 +1,330 @@
+---
+name: dashstream-core
+description: React DashStream package overview, installation, theming, architecture, exports, and types
+license: MIT
+compatibility: opencode
+metadata:
+  audience: developers
+  workflow: react
+---
+
+## What I do
+
+- Explain the `react-dashstream` package structure, exports, and type system
+- Guide correct installation and CSS import
+- Document light/dark theming and `ThemeProvider` usage
+- Provide the full architecture tree and source layout
+- List all public exports and common pitfalls
+
+## When to use me
+
+Use this when starting a new project with `react-dashstream`, need the import list, want to understand the component hierarchy, or are troubleshooting theme / CSS issues.
+
+For specific features, see sibling skills:
+
+- **dashstream-3d-dashboard** — `AIOPsDashboard`, services, nodes, positioning
+- **dashstream-live-data** — `DataProvider`, data bindings, hooks, endpoint contract
+- **dashstream-component-dialogs** — drill-down metrics, internals, graph series, alerts
+- **dashstream-event-view** — `EventView`, event API, field mapping
+- **dashstream-datacenter-view** — `DatacenterView`, topology map, geography, buildings
+
+---
+
+## Package basics
+
+> **Package**: `react-dashstream` (npm)
+> **Version**: 0.2.0
+> **Peer deps**: `react` ^18 || ^19, `react-dom` ^18 || ^19
+> **License**: MIT
+
+React DashStream renders a rotating 3D carousel of infrastructure services using CSS 3D transforms (no WebGL, no canvas). Each service expands into a multi-tiered topology with servers, databases, dispatchers, message servers, and user nodes connected by animated SVG lines. Components can be drilled into to reveal internal sub-components with sparkline graphs and gauges.
+
+Two modes:
+
+1. **Static mode** — pass props directly for demo or snapshot views.
+2. **Live data mode** — poll an HTTP endpoint with PromQL queries and auto-inject resolved values as component props.
+
+---
+
+## Installation and CSS
+
+```bash
+npm install react-dashstream
+```
+
+```tsx
+import "react-dashstream/dist/index.css";
+import { AIOPsDashboard, Service, ServerNode, DatabaseNode } from "react-dashstream";
+```
+
+**Always import the CSS file** — without it, no styles render.
+
+---
+
+## Light / dark theme
+
+The dashboard supports **`"light"`** and **`"dark"`** modes.
+
+- **`AIOPsDashboard`** defaults to **light** and exposes a header toggle. Use **`backgroundImage`** (dark) and **`lightBackgroundImage`** (light when set).
+- **Controlled mode:** pass **`theme`** and **`onThemeChange`** (`DashboardTheme`) so parent state owns the mode (e.g. sync app chrome + `EventView`).
+- **`ThemeProvider`** (export) + **`useTheme()`** — wrap subtrees so **`EventView`**, **`CredentialsModal`**, **`ServiceDialog`**, and **`ComponentDialog`** match the dashboard. Without a provider, `useTheme()` defaults to **`"dark"`**; prefer wrapping when using `EventView` or the lock screen next to a light dashboard.
+- **`EventView`** accepts optional **`theme`** to override context.
+
+When generating multi-view apps (3D + Event Console + credentials), wrap the root in **`ThemeProvider`** with the same value passed to **`AIOPsDashboard`**'s controlled props.
+
+---
+
+## Architecture
+
+```
+AIOPsDashboard              ← Shell: header, state, optional DataProvider
+  └─ Carousel               ← 3D orbit, rotation, hosts dialogs
+       └─ Service            ← Per-service container, connections, holo base
+            ├─ ServerNode         ← Compound: ServiceNode + Server3D
+            ├─ DatabaseNode       ← Compound: ServiceNode + Database3D
+            ├─ WebDispatcherNode  ← Compound: ServiceNode + WebDispatcher3D
+            ├─ MessageServerNode  ← Compound: ServiceNode + MessageServer3D
+            ├─ HumanNode          ← Compound: ServiceNode + Human3D (SVG)
+            ├─ SvgConnection      ← Animated dashed topology line
+            ├─ SyncBridge         ← DB replication indicator
+            ├─ NodeCallout        ← Alert callout (auto from thresholds)
+            └─ HoloBase           ← Neon platform (auto-rendered)
+
+ServiceDialog               ← Service-level KPI panel (auto on expand)
+ComponentDialog              ← Drill-down with internals + graphs
+  ├─ HistoricalGraphPanel    ← Sparkline charts
+  └─ CPU3D / Memory3D / DriveBay3D / NetworkBlock3D / ThreadPool3D / Platter3D / Port3D
+
+DataProvider                 ← Polling engine + credentials modal
+
+EventView                    ← Standalone event console (table view)
+
+DatacenterView               ← SVG topology / optional geography map + drill-down dashboard
+```
+
+### Source layout
+
+```
+src/
+├── index.ts                 # Public API barrel
+├── AIOPsDashboard.tsx       # Dashboard shell + live-data wiring
+├── types.ts                 # Shared topology/drill-down types
+├── theme.ts                 # Status tokens, holo palette, 3D face helpers
+├── ThemeContext.ts           # DashboardTheme, ThemeProvider, useTheme
+├── styles.css / index.css   # Library + dashboard styles
+├── data/
+│   ├── DataProvider.tsx      # Polling engine, context, hooks
+│   ├── CredentialsModal.tsx  # Auth prompt UI
+│   └── index.ts
+├── components/              # ~30 UI components
+│   ├── Carousel.tsx, Service.tsx, ServiceNode.tsx
+│   ├── ServerNode.tsx, DatabaseNode.tsx, WebDispatcherNode.tsx, etc.
+│   ├── Server3D.tsx, Database3D.tsx, etc.
+│   ├── ServiceDialog.tsx, ComponentDialog.tsx
+│   ├── Internal3DComponents.tsx, HistoricalGraphPanel.tsx
+│   ├── ComponentDrillView.tsx, SvgConnection.tsx, SyncBridge.tsx
+│   ├── NodeCallout.tsx, HoloBase.tsx, CarouselContext.ts
+│   ├── EventView/                  # Operations event console
+│   │   ├── EventView.tsx           # Table component
+│   │   ├── EventView.css
+│   │   ├── EventAlertsContext.tsx   # EventAlertsProvider + per-host alert map
+│   │   ├── fetchEvents.ts          # Shared fetch/mapping logic
+│   │   ├── types.ts
+│   │   ├── mockData.ts             # 28 realistic mock events
+│   │   └── index.ts
+│   ├── DatacenterView/             # Topology map + CSS 3D building markers
+│   │   ├── DatacenterView.tsx
+│   │   ├── DatacenterView.css
+│   │   ├── buildings.tsx           # DatacenterSite, TowerDC, FlatDC, …
+│   │   ├── collectDatacenterTree.ts
+│   │   ├── types.ts
+│   │   └── index.ts
+│   └── index.ts
+├── services/
+│   ├── SAPService.tsx, ExchangeService.tsx
+│   ├── sapSubComponents.tsx
+│   └── index.ts
+example/
+├── Dashboard.tsx
+└── services/
+```
+
+---
+
+## Exports
+
+Everything below is exported from `react-dashstream`.
+
+### Default export
+
+`AIOPsDashboard` — main dashboard shell component.
+
+### Compound nodes
+
+`ServerNode`, `DatabaseNode`, `WebDispatcherNode`, `MessageServerNode`, `HumanNode`
+
+### Layout
+
+`Carousel`, `Service`, `ServiceNode`
+
+### 3D models
+
+`Server3D`, `Database3D`, `WebDispatcher3D`, `MessageServer3D`, `Human3D`
+
+### Internal 3D components (for drill-down)
+
+`CPU3D`, `Memory3D`, `DriveBay3D`, `NetworkBlock3D`, `ThreadPool3D`, `Platter3D`, `Port3D`
+
+### Indicators and connections
+
+`SvgConnection`, `SyncBridge`, `NodeCallout`, `HoloBase`
+
+### Dialogs
+
+`ServiceDialog`, `ComponentDialog`, `HistoricalGraphPanel`, `ComponentDrillView`
+
+### Pre-built services
+
+`SAPService`, `ExchangeService`
+
+SAP helpers: `computeSAPServiceStatus`, `computeSAPDialogMetrics`, `computeSAPDialogAlerts`, `SAP_CONNECTIONS`
+
+Exchange helpers: `computeExchangeServiceStatus`, `computeExchangeDialogMetrics`, `computeExchangeDialogAlerts`, `EXCHANGE_CONNECTIONS`
+
+SAP sub-component helpers: `getServerSubComponents`, `getServerGraphSeries`, `getDispatcherSubComponents`, `getDispatcherGraphSeries`, `getMessageServerSubComponents`, `getMessageServerGraphSeries`, `getDatabaseSubComponents`, `getDatabaseGraphSeries`
+
+### Data layer
+
+`DataProvider`, `useAIOpsData`, `useAIOpsDataOptional`, `useQueryResult`, `extractUniqueQueries`, `extractDatacenterMetricQueries`, `defaultDataTransform`
+
+### Datacenter topology map
+
+`DatacenterView`, `DatacenterSite`, shape components (`StandardDC`, `TowerDC`, `FlatDC`, `StorageDC`, `GoogleDC`, `MicroDC`, `OfficeDC`), generic `Datacenter`, `collectDatacenterTree`, `getBuildingVariant`, and types `DatacenterViewProps`, `DatacenterBuildingConfig`, `DatacenterBuildingNodeProps`, `DatacenterBuildingVariant`, `DatacenterConnection`, `DatacenterGeography`, `DatacenterMetrics`, `DatacenterProps`, `DatacenterSiteLabels`, `DatacenterSiteProps`, `DatacenterViewPhase`, `CollectedTopology`
+
+### Event alerts
+
+`EventAlertsProvider`, `useEventAlerts`, `useEventAlertsOptional`
+
+### Theme
+
+`STATUS_CFG`, `HOLO_CYAN` (`"#00e5ff"`), `HOLO_BLUE` (`"#0055cc"`), `HOLO_SURFACE`, `HOLO_GLASS`, `makeFaceStyles(W, H, D)`
+
+`ThemeProvider`, `useTheme`, type `DashboardTheme` (`"light" | "dark"`)
+
+### Context hooks
+
+`CarouselContext`, `CarouselItemContext`, `useCarouselContext`, `useCarouselItemContext`, `ServiceContext`
+
+### Type exports
+
+`AIOPsDashboardProps`, `ServiceMeta`, `ServiceMetricBinding`, `DashboardTheme`, `ComponentStatus`, `StatusCfg`, `FaceName`, `Base3DProps`, `ComponentType`, `ComponentContext`, `ComponentDialogMetric`, `SubComponentConfig`, `GraphSeries`, `SelectedComponent`, `ConnectionConfig`, `ViewState`, `DataBinding`, `DataBindings`, `DatacenterMetricBindings`, `DataProviderConfig`, `Credentials`, `DataContextValue`, `ServiceProps`, `ServiceContextValue`, `ServiceNodeProps`, `CarouselProps`, `ServerNodeProps`, `DatabaseNodeProps`, `HumanNodeProps`, `WebDispatcherNodeProps`, `MessageServerNodeProps`, `SvgConnectionProps`, `SyncBridgeProps`, `NodeCalloutProps`, `ServiceDialogProps`, `ServiceDialogMetric`, `ServiceDialogAlert`, `ComponentDialogProps`, `ComponentDrillViewProps`, `CarouselContextValue`, `CarouselItemContextValue`, `SAPServiceProps`, `SAPServiceOwnProps`, `SAPServiceConfig`, `ExchangeServiceProps`, `ExchangeServiceOwnProps`, `ExchangeServiceConfig`, `EventHostAlert`, `EventAlertsContextValue`, `EventAlertsProviderProps`, `DatacenterViewProps`, `DatacenterBuildingConfig`, `DatacenterBuildingNodeProps`, `DatacenterBuildingVariant`, `DatacenterConnection`, `DatacenterGeography`, `DatacenterMetrics`, `DatacenterProps`, `DatacenterSiteLabels`, `DatacenterSiteProps`, `DatacenterViewPhase`, `CollectedTopology`
+
+---
+
+## Key types quick reference
+
+### ComponentStatus
+
+```ts
+type ComponentStatus = "online" | "warning" | "critical" | "offline";
+```
+
+| Status     | Color     | Glow     |
+| ---------- | --------- | -------- |
+| `online`   | `#00e5ff` | cyan     |
+| `warning`  | `#ff8c00` | orange   |
+| `critical` | `#ff2255` | red      |
+| `offline`  | `#1e3a5a` | dim blue |
+
+### AIOPsDashboardProps
+
+`DashboardTheme` is `"light" | "dark"` (exported).
+
+```ts
+interface AIOPsDashboardProps {
+    title?: string;
+    brandName?: string;                // Default: "BUSAUD AIOps"
+    brandTag?: string;                 // Default: "3D MONITOR"
+    services?: ServiceMeta[];
+    backgroundImage?: string;
+    lightBackgroundImage?: string;     // Used in light mode when set
+    theme?: DashboardTheme;            // Controlled theme (pair with onThemeChange)
+    onThemeChange?: (theme: DashboardTheme) => void;
+    logoUrl?: string;
+    carouselSpeed?: number;            // Default: 0.006
+    fontFamily?: string;
+    liveData?: boolean;                // Default: false
+    dataEndpoint?: string;
+    dataBindings?: DataBindings;
+    dataTransform?: (raw: unknown) => unknown;
+    dataRefreshInterval?: number;      // Default: 60000
+    serviceDataBindings?: Record<string, ServiceMetricBinding[]>;
+    eventApiConfig?: EventApiConfig;   // Enable event-to-dashboard bridge
+    children: React.ReactNode;
+}
+```
+
+### ServiceMeta
+
+```ts
+interface ServiceMeta {
+    name: string;       // Must match child component name
+    status: ComponentStatus;
+    dbSync?: boolean;   // Default: true
+    metrics?: ServiceDialogMetric[];
+    alerts?: ServiceDialogAlert[];
+}
+
+interface ServiceDialogMetric {
+    label: string;
+    value: string;
+    color: string;
+}
+
+interface ServiceDialogAlert {
+    level: "info" | "warning" | "critical";
+    message: string;
+}
+```
+
+### ConnectionConfig
+
+```ts
+interface ConnectionConfig {
+    from: [number, number];
+    to: [number, number];
+    visibleAtPhase?: number;   // Default: 0
+    color?: string;            // Default: "#00e5ff"
+    duration?: string;         // Default: "1.2s"
+}
+```
+
+---
+
+## Build and development
+
+```bash
+npm run dev          # Vite dev server (loads example/Dashboard.tsx)
+npm run build        # TypeScript check + Vite library build
+npm run build:lib    # Vite library build only
+npm run preview      # Preview production build
+```
+
+Output: `dist/index.js` (ESM), `dist/index.d.ts`, `dist/index.css`.
+
+---
+
+## Common pitfalls
+
+1. **Missing CSS import** — Always import `react-dashstream/dist/index.css`.
+2. **Name mismatch** — `name` on child components must exactly match keys in `dataBindings`, `serviceDataBindings`, and `ServiceMeta.name`.
+3. **Credentials are in-memory only** — Page refresh requires re-entering credentials.
+4. **Default transform is plain-text** — For JSON endpoints, provide a custom `dataTransform`.
+5. **Polling only** — No WebSocket/SSE support; uses `setInterval`.
+6. **`visibleAtPhase` matters** — Nodes without proper values won't animate during expansion.
+7. **Connection coordinates** — `from`/`to` arrays use `[x, y]` matching `ex`/`ey` of connected nodes.
+8. **`dialogMetrics` replaces defaults** — When provided, all default gauges (CPU/Memory/Storage) are removed.
+9. **`subComponents` replaces defaults** — When provided, all auto-generated sub-components are removed.
+10. **`graphSeries` replaces defaults** — When provided, all auto-generated sparklines are removed.
+11. **Event bridge matching** — Node `name` must match event `host` (case-insensitive) for `eventApiConfig` to highlight nodes automatically.
+12. **Theme context** — `EventView` and `CredentialsModal` use `useTheme()`. Without `ThemeProvider`, context defaults to `"dark"`. Wrap the app (or use `EventView`'s `theme` prop) so light dashboards are not paired with a dark event console or lock screen.

package/skills/dashstream-datacenter-view/SKILL.md

@@ -0,0 +1,198 @@
+---
+name: dashstream-datacenter-view
+description: Build topology maps with DatacenterView, buildings, geography, and drill-down
+license: MIT
+compatibility: opencode
+metadata:
+  audience: developers
+  workflow: react
+---
+
+## What I do
+
+- Document `DatacenterView` — SVG topology or geographic map with CSS 3D building markers
+- Explain both array config and declarative JSX composition APIs
+- Cover sites, building variants, connections, metric bindings, and geography
+- Show how drill-down integrates with `AIOPsDashboard`
+
+## When to use me
+
+Use this when building a datacenter topology map, geographic view, or configuring building markers with drill-down dashboards.
+
+---
+
+## Overview
+
+SVG-based **network topology** (grid) or optional **geographic outline** (consumer-supplied SVG path `d`), CSS **3D building** markers, animated links, and **drill-down** into a nested `AIOPsDashboard` when the user selects a site or building.
+
+---
+
+## Data model
+
+- **`DatacenterBuildingConfig`** — one marker on the map (`id`, `name`, `subtitle`, `x` / `y` as **percent** of the 800×600 scene, `status`, `metrics`, `services`, `renderServices`, `variant`, optional `brand`, `isExternal`).
+- **`siteId`** — optional; multiple buildings with the same `siteId` share **one marker**, **combined metrics** (sums / averages for PUE, temperature, uptime), and a **multi-building cluster** visualization (each building's `variant` is shown). Optional **`siteLabels`** (`Record<string, { label: string; subtitle?: string }>`) overrides auto-generated titles. **`DatacenterSite`** can supply `label` / `subtitle` per `siteId`; the **`siteLabels`** prop merges on top (prop wins on conflict).
+
+---
+
+## Minimal usage (array config)
+
+```tsx
+import "react-dashstream/dist/index.css";
+import { DatacenterView } from "react-dashstream";
+import type { DatacenterBuildingConfig, DatacenterConnection } from "react-dashstream";
+
+const dataCenters: DatacenterBuildingConfig[] = [
+    /* id, x, y (%), metrics, services, renderServices, variant, siteId? … */
+];
+const connections: DatacenterConnection[] = [];
+
+<DatacenterView dataCenters={dataCenters} connections={connections} />
+```
+
+---
+
+## Declarative JSX topology
+
+Instead of a `dataCenters` array, pass `children` using `DatacenterSite` and shape components:
+
+```tsx
+import "react-dashstream/dist/index.css";
+import { DatacenterView, DatacenterSite, TowerDC, FlatDC } from "react-dashstream";
+
+<DatacenterView connections={[]}>
+    <DatacenterSite siteId="riyadh-hub" x={42} y={38} label="Riyadh hub" subtitle="Primary region">
+        <TowerDC
+            id="dc-east-1"
+            name="East tower"
+            subtitle="Tier III"
+            status="online"
+            metrics={{
+                carbonEmissions: 0,
+                powerUtilization: 0,
+                cooling: 0,
+                pue: 1.4,
+                uptime: 99.9,
+                activeServers: 0,
+                temperature: 22,
+                networkThroughput: 0,
+            }}
+            services={[]}
+        >
+            {/* Service / ServerNode / … drill-down tree */}
+        </TowerDC>
+        <FlatDC
+            id="dc-flat-2"
+            name="Flat block"
+            subtitle="Storage"
+            status="online"
+            metrics={{
+                carbonEmissions: 0,
+                powerUtilization: 0,
+                cooling: 0,
+                pue: 1.3,
+                uptime: 99.5,
+                activeServers: 0,
+                temperature: 21,
+                networkThroughput: 0,
+            }}
+            services={[]}
+        />
+    </DatacenterSite>
+</DatacenterView>
+```
+
+**Available building shapes:** `StandardDC`, `TowerDC`, `FlatDC`, `StorageDC`, `GoogleDC`, `MicroDC`, `OfficeDC` (alias of `MicroDC`). Use `Datacenter` with `variant` for a single generic component.
+
+Building components render `null` on the map; `children` on each building are the drill-down `Service` tree (same as `renderServices()` in the array API).
+
+`collectDatacenterTree(children)` is available if you need the resolved `DatacenterBuildingConfig[]` outside the view.
+
+---
+
+## Connections
+
+```ts
+interface DatacenterConnection {
+    from: string;          // Building id or siteId
+    to: string;            // Building id or siteId
+    throughput: string;    // Label (e.g. "10 Gbps")
+    isExternal?: boolean;  // External link styling
+}
+```
+
+---
+
+## DatacenterMetrics
+
+```ts
+interface DatacenterMetrics {
+    carbonEmissions: number;
+    powerUtilization: number;
+    cooling: number;
+    pue: number;
+    uptime: number;
+    activeServers: number;
+    temperature: number;
+    networkThroughput: number;
+}
+```
+
+Used on markers and for site-level aggregation.
+
+---
+
+## Mock metrics
+
+Pass `dataCenters` with embedded `metrics`. No `DataProvider` required.
+
+---
+
+## PromQL (live) metrics on markers
+
+1. Wrap the tree in **`DataProvider`** with `config.queries` including every query used by `metricBindings`, collected via `extractDatacenterMetricQueries(metricBindings)` (and merge with queries for any nested `AIOPsDashboard` if you use `aiOpsDashboardProps`).
+2. Pass **`metricBindings`**: `Record<buildingId, Partial<Record<keyof DatacenterMetrics, DataBinding>>>` — same `DataBinding` shape as service-level bindings (`string` or `{ query, transform? }`).
+3. `DatacenterView` calls `useAIOpsDataOptional()` and merges transformed numbers over each building's static `metrics` (site-level rows aggregate the merged per-building values).
+
+This path is **independent** of `AIOPsDashboard`'s `dataBindings` (which key off service `name` on carousel children).
+
+---
+
+## Drill-down dashboard
+
+`aiOpsDashboardProps` is spread onto the inner `AIOPsDashboard`; `services`, `theme`, `children` (from `renderServices()`), and branding are forced from the selected building so the map stays consistent. Use `aiOpsDashboardProps` for `liveData`, `dataEndpoint`, `dataBindings`, `serviceDataBindings`, etc., for service-level PromQL inside the opened datacenter.
+
+---
+
+## Geography (optional)
+
+`showGeography` and `geography: { outlinePathD, referencePoints? }` — the package does **not** ship country assets; the app parses or provides an SVG path `d` string (see `example/SaudiMapView.tsx`).
+
+---
+
+## DatacenterViewProps (full reference)
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children` | `ReactNode` | — | Declarative topology (`DatacenterSite`, `TowerDC`, …). When set, `dataCenters` is ignored (dev warning if both are passed) |
+| `dataCenters` | `DatacenterBuildingConfig[]` | `[]` | Flat / JSON-friendly config; required unless `children` is used |
+| `connections` | `DatacenterConnection[]` | `[]` | Link lines between building or site ids |
+| `metricBindings` | `DatacenterMetricBindings` | — | Building id → metric field → PromQL `DataBinding`; needs `DataProvider` + `extractDatacenterMetricQueries` |
+| `dataTransform` | `(raw: unknown) => unknown` | `defaultDataTransform` | Applied to each binding unless overridden per binding |
+| `geography` | `DatacenterGeography` | — | `outlinePathD` + optional `referencePoints` (SVG coords) |
+| `showGeography` | `boolean` | `false` | When true, draws outline + reference points |
+| `mapTitle` | `string` | `"Geography — Operations"` | Header when `showGeography` |
+| `topologyTitle` | `string` | `"Network topology"` | Header when not showing geography |
+| `topologyAffiliatesLabel` | `string` | `"AFFILIATES"` | Label in topology-only mode (affiliates zone) |
+| `brandText` | `string` | `"AIOps"` | Header brand |
+| `headerTag` | `string` | `"COMMAND CENTER"` | Corner tag |
+| `initialBuildingId` | `string` | — | Building id to open when `openDashboardOnMount` is true |
+| `openDashboardOnMount` | `boolean` | `false` | Auto-zoom into `initialBuildingId` |
+| `onNavigateEvents` | `() => void` | — | e.g. switch app view to event console |
+| `theme` | `DashboardTheme` | — | Passed through to drill-down dashboard |
+| `onThemeChange` | `(t) => void` | — | |
+| `backgroundImage` / `lightBackgroundImage` | `string` | — | Drill-down `AIOPsDashboard` backgrounds |
+| `aiOpsDashboardProps` | `Partial<AIOPsDashboardProps>` | — | Spread first; `services`, children, theme, branding overridden from selection |
+| `defaultBuildingBrand` | `string` | `"AIOps"` | Fallback label on 3D building faces |
+| `siteLabels` | `Record<string, DatacenterSiteLabels>` | — | Per-siteId titles for multi-building markers |
+| `showMapScaleControls` | `boolean` | `true` | Size / hover sliders in header (map mode) |
+| `mapFooter` | `ReactNode` | — | Rendered below the map when drill-down is not active |