react-dashstream 0.0.1

package/README.md

@@ -0,0 +1,400 @@
+# dashstream
+
+Holographic 3D infrastructure monitoring dashboard for React. Pure CSS-3D — no WebGL, no canvas, no dependencies beyond React.
+
+```
+npm install dashstream
+```
+
+---
+
+## Quick start
+
+```tsx
+import "dashstream/dist/index.css";
+import { AIOPsDashboard, Service, ServerNode, DatabaseNode } from "dashstream";
+import type { ServiceMeta } from "dashstream";
+
+const services: ServiceMeta[] = [
+    {
+        name: "My Service",
+        status: "online",
+        metrics: [
+            { label: "Service Health", value: "99.9%", color: "#00ff88" },
+            { label: "Avg Response Time", value: "14ms", color: "#00e5ff" },
+        ],
+        alerts: [{ level: "info", message: "All Systems Nominal" }],
+    },
+];
+
+export default function App() {
+    return (
+        <AIOPsDashboard brandName="MY DASHBOARD" services={services}>
+            <Service
+                name="My Service"
+                status="online"
+                connections={[
+                    { from: [330, 200], to: [200, 380], visibleAtPhase: 3 },
+                    { from: [330, 200], to: [460, 380], visibleAtPhase: 3 },
+                ]}
+            >
+                <ServerNode
+                    ex={200}
+                    ey={380}
+                    compactOffset={{ x: -30, y: -20 }}
+                    zIndex={8}
+                    name="SRV-01"
+                    subLabel="APP SERVER"
+                    status="online"
+                    cpuLoad={42}
+                    memLoad={60}
+                />
+                <DatabaseNode
+                    ex={460}
+                    ey={380}
+                    compactOffset={{ x: 30, y: -20 }}
+                    zIndex={7}
+                    name="DB-01"
+                    subLabel="PRIMARY"
+                    status="online"
+                    capacity={55}
+                />
+            </Service>
+        </AIOPsDashboard>
+    );
+}
+```
+
+Click a service to expand its topology. Click a component to drill into its internals.
+
+---
+
+## Full example — multi-service, multi-layer
+
+Two services with different topologies rotating in a 3D carousel.
+This is the example included in `example/Dashboard.tsx` inside this package.
+
+```tsx
+import "dashstream/dist/index.css";
+import { AIOPsDashboard, Service, HumanNode, WebDispatcherNode, ServerNode, DatabaseNode } from "dashstream";
+import type { ServiceMeta } from "dashstream";
+
+// ── Service metadata (drives the stats dialog) ──────────────────────────
+
+const services: ServiceMeta[] = [
+    {
+        name: "Payment Gateway",
+        status: "critical",
+        metrics: [
+            { label: "Service Health", value: "76.3%", color: "#ff8c00" },
+            { label: "Avg Response Time", value: "243ms", color: "#ff8c00" },
+            { label: "Active Connections", value: "1,847", color: "#bb55ff" },
+            { label: "Request Throughput", value: "3.2k req/s", color: "#00e5ff" },
+            { label: "Error Rate", value: "3.81%", color: "#ff2255" },
+        ],
+        alerts: [{ level: "critical", message: "SRV-01 CPU at 99% — immediate action required" }],
+    },
+    {
+        name: "Auth Service",
+        status: "online",
+        metrics: [
+            { label: "Service Health", value: "99.9%", color: "#00ff88" },
+            { label: "Avg Response Time", value: "11ms", color: "#00e5ff" },
+            { label: "Active Sessions", value: "8,421", color: "#bb55ff" },
+            { label: "Auth Rate", value: "920 req/s", color: "#00e5ff" },
+            { label: "Failed Logins", value: "0.03%", color: "#00ff88" },
+        ],
+        alerts: [{ level: "info", message: "All Systems Nominal" }],
+    },
+];
+
+// ── Payment Gateway — 4-layer topology ──────────────────────────────────
+
+function PaymentGateway({ name }: { name: string }) {
+    return (
+        <Service
+            name={name}
+            status="critical"
+            connections={[
+                { from: [330, 100], to: [330, 230], visibleAtPhase: 2, color: "#00e5ff" },
+                { from: [330, 230], to: [200, 380], visibleAtPhase: 3 },
+                { from: [330, 230], to: [460, 380], visibleAtPhase: 3 },
+                { from: [200, 380], to: [330, 520], visibleAtPhase: 4, color: "#ff8c00" },
+                { from: [460, 380], to: [330, 520], visibleAtPhase: 4, color: "#ff8c00" },
+            ]}
+        >
+            <HumanNode
+                ex={330}
+                ey={100}
+                compactOffset={{ x: 0, y: -50 }}
+                zIndex={10}
+                visibleAtPhase={2}
+                color="#00e5ff"
+                scale={1.5}
+            />
+            <WebDispatcherNode
+                ex={330}
+                ey={230}
+                compactOffset={{ x: 0, y: -25 }}
+                zIndex={9}
+                name="GATEWAY"
+                subLabel="HTTP LAYER"
+                status="online"
+                traffic={82}
+                activeRoutes={6}
+                visibleAtPhase={2}
+            />
+            <ServerNode
+                ex={200}
+                ey={380}
+                compactOffset={{ x: -30, y: 10 }}
+                zIndex={8}
+                name="SRV-01"
+                subLabel="PROCESSOR"
+                status="critical"
+                cpuLoad={99}
+                memLoad={64}
+                alert={{ offsetX: -160, offsetY: -60, align: "left" }}
+            />
+            <ServerNode
+                ex={460}
+                ey={380}
+                compactOffset={{ x: 30, y: 10 }}
+                zIndex={8}
+                name="SRV-02"
+                subLabel="PROCESSOR"
+                delay="0.4s"
+                status="online"
+                cpuLoad={38}
+                memLoad={51}
+            />
+            <DatabaseNode
+                ex={330}
+                ey={520}
+                compactOffset={{ x: 0, y: 40 }}
+                zIndex={7}
+                name="PG-DB"
+                subLabel="PRIMARY"
+                color="#ff8c00"
+                status="online"
+                capacity={61}
+            />
+        </Service>
+    );
+}
+
+// ── Auth Service — 2-layer topology ─────────────────────────────────────
+
+function AuthService({ name }: { name: string }) {
+    return (
+        <Service
+            name={name}
+            status="online"
+            connections={[
+                { from: [200, 200], to: [200, 380], visibleAtPhase: 3 },
+                { from: [460, 200], to: [460, 380], visibleAtPhase: 3 },
+                { from: [200, 380], to: [330, 520], visibleAtPhase: 4, color: "#ff8c00" },
+                { from: [460, 380], to: [330, 520], visibleAtPhase: 4, color: "#ff8c00" },
+            ]}
+        >
+            <ServerNode
+                ex={200}
+                ey={380}
+                compactOffset={{ x: -30, y: -20 }}
+                zIndex={8}
+                name="AUTH-01"
+                subLabel="IDENTITY"
+                status="online"
+                cpuLoad={34}
+                memLoad={48}
+            />
+            <ServerNode
+                ex={460}
+                ey={380}
+                compactOffset={{ x: 30, y: -20 }}
+                zIndex={8}
+                name="AUTH-02"
+                subLabel="SESSION"
+                delay="0.4s"
+                status="online"
+                cpuLoad={29}
+                memLoad={42}
+            />
+            <DatabaseNode
+                ex={330}
+                ey={520}
+                compactOffset={{ x: 0, y: 20 }}
+                zIndex={7}
+                name="AUTH-DB"
+                subLabel="PRIMARY"
+                color="#ff8c00"
+                status="online"
+                capacity={37}
+            />
+        </Service>
+    );
+}
+
+// ── Dashboard ───────────────────────────────────────────────────────────
+
+export default function App() {
+    return (
+        <AIOPsDashboard brandName="DASHSTREAM" brandTag="EXAMPLE" services={services}>
+            <PaymentGateway name="Payment Gateway" />
+            <AuthService name="Auth Service" />
+        </AIOPsDashboard>
+    );
+}
+```
+
+---
+
+## Components
+
+### Layout
+
+| Component        | Description                                                                                                    |
+| ---------------- | -------------------------------------------------------------------------------------------------------------- |
+| `AIOPsDashboard` | Full dashboard shell — header, carousel, and state management. Drop services in as children.                   |
+| `Service`        | Service container — positions child nodes on a 3D orbit and draws connection lines between them.               |
+| `ServiceNode`    | Low-level positioned wrapper with floating animation, scan line, and labels. Used by the compound nodes below. |
+
+### Compound nodes (recommended)
+
+These combine `ServiceNode` + 3D model + `componentInfo` into a single element:
+
+| Component           | Key props                                         | Description                                             |
+| ------------------- | ------------------------------------------------- | ------------------------------------------------------- |
+| `ServerNode`        | `status`, `cpuLoad`, `memLoad`, `brandLabel`      | Application server tower with LEDs and CPU/memory bars. |
+| `DatabaseNode`      | `status`, `capacity`                              | Three-platter database cylinder with capacity bar.      |
+| `WebDispatcherNode` | `status`, `traffic`, `activeRoutes`               | Network appliance with 8 port LEDs and traffic metrics. |
+| `MessageServerNode` | `status`, `queueDepth`, `msgsPerSec`, `instances` | Message server with instance LEDs and queue metrics.    |
+| `HumanNode`         | `status`, `scale`                                 | SVG wireframe person icon for user/actor nodes.         |
+
+All compound nodes share: `ex`, `ey`, `compactOffset`, `zIndex`, `name`, `subLabel`, `color`, `delay`, `visibleAtPhase`, `alert`.
+
+### 3D models (low-level)
+
+If you need full control, use the raw 3D models inside a `ServiceNode`:
+
+`Server3D`, `Database3D`, `WebDispatcher3D`, `MessageServer3D`, `Human3D`
+
+All 3D models accept: `rotateX`, `rotateY`, `rotateZ`, `scale`, `autoRotate`.
+
+### Status indicators
+
+| Component       | Props                                | Description                                                      |
+| --------------- | ------------------------------------ | ---------------------------------------------------------------- |
+| `SyncBridge`    | `synced`, `latencyMs`                | Database replication bridge between primary and standby.         |
+| `NodeCallout`   | `status`, `title`, `msg`, `ex`, `ey` | Alert callout with leader line (auto-rendered by `ServiceNode`). |
+| `HoloBase`      | `size`, `color`, `widthRatio`        | Neon holographic base platform (auto-rendered by `Service`).     |
+| `SvgConnection` | `x1`, `y1`, `x2`, `y2`, `show`       | Animated dashed SVG connection line.                             |
+
+### Dialogs
+
+| Component         | Description                                                                                     |
+| ----------------- | ----------------------------------------------------------------------------------------------- |
+| `ServiceDialog`   | Service-level stats panel — shows metrics and alerts. Auto-rendered when a service is expanded. |
+| `ComponentDialog` | Component drill-down with sub-component internals and sparkline graphs.                         |
+
+### Drill-down internals
+
+Rendered inside `ComponentDialog` when a component is inspected:
+
+`CPU3D`, `Memory3D`, `DriveBay3D`, `NetworkBlock3D`, `ThreadPool3D`, `Platter3D`, `Port3D`, `HistoricalGraphPanel`, `ComponentDrillView`
+
+### Pre-built services
+
+| Component         | Topology                                                                          |
+| ----------------- | --------------------------------------------------------------------------------- |
+| `SAPService`      | Users → Web Dispatcher + Message Server → 3 App Servers → Primary DB + Standby DB |
+| `ExchangeService` | Users → Dispatcher → 3 App Servers → Primary DB + Standby DB                      |
+
+---
+
+## Building a custom service
+
+Compose compound nodes inside a `Service` container. Each node needs:
+
+- **`ex`, `ey`** — Position in the expanded topology (pixels from top-left of scene).
+- **`compactOffset`** — Offset from the service center in the compact carousel view.
+- **`zIndex`** — Stacking order (higher tiers get higher values).
+- **`visibleAtPhase`** — When the node fades in during expansion (0–6). Use `2` for top-tier nodes, `3` for middle, etc.
+
+Define connection lines between nodes via the `connections` prop on `Service`:
+
+```tsx
+connections={[
+  { from: [x1, y1], to: [x2, y2], visibleAtPhase: 3 },
+  { from: [x1, y1], to: [x2, y2], visibleAtPhase: 4, color: "#ff8c00" },
+]}
+```
+
+### Alerts
+
+Nodes automatically detect threshold breaches and render alert callouts. Default thresholds:
+
+- **Warning** at 70%
+- **Critical** at 85%
+
+Position the callout with the `alert` prop:
+
+```tsx
+<ServerNode
+  alert={{ offsetX: -160, offsetY: -60, align: "left" }}
+  cpuLoad={99}
+  ...
+/>
+```
+
+### Service dialog
+
+Pass `ServiceMeta` objects to `AIOPsDashboard` via the `services` prop to populate the stats panel that appears when a service is expanded:
+
+```tsx
+const services: ServiceMeta[] = [
+    {
+        name: "My Service",
+        status: "online",
+        metrics: [
+            { label: "Service Health", value: "99.9%", color: "#00ff88" },
+            { label: "Avg Response Time", value: "14ms", color: "#00e5ff" },
+        ],
+        alerts: [{ level: "info", message: "All Systems Nominal" }],
+    },
+];
+```
+
+---
+
+## Status types
+
+```ts
+type ComponentStatus = "online" | "warning" | "critical" | "offline";
+```
+
+| Status     | Color     | Glow     |
+| ---------- | --------- | -------- |
+| `online`   | `#00e5ff` | cyan     |
+| `warning`  | `#ff8c00` | orange   |
+| `critical` | `#ff2255` | red      |
+| `offline`  | `#1e3a5a` | dim blue |
+
+---
+
+## Theme constants
+
+```ts
+import { STATUS_CFG, HOLO_CYAN, HOLO_BLUE, HOLO_SURFACE, HOLO_GLASS, makeFaceStyles } from "dashstream";
+```
+
+- `STATUS_CFG` — status-to-color lookup table
+- `HOLO_CYAN` / `HOLO_BLUE` — accent colors
+- `HOLO_SURFACE` / `HOLO_GLASS` — CSS gradient backgrounds for 3D faces
+- `makeFaceStyles(W, H, D)` — generates CSS transforms for the 6 faces of a 3D box
+
+---
+
+## License
+
+MIT

package/dist/AIOPsDashboard.d.ts

@@ -0,0 +1,131 @@
+import { default as React } from 'react';
+import { DataBindings } from './data/DataProvider';
+import { ComponentStatus } from './types';
+import { ServiceDialogMetric, ServiceDialogAlert } from './components/ServiceDialog';
+/**
+ * Minimal metadata for each service in the carousel.
+ * Used to populate the {@link ServiceDialog} when a service is selected.
+ */
+export interface ServiceMeta {
+    /** Service display name (must match the service component's `name`). */
+    name: string;
+    /** Overall health status of this service. */
+    status: ComponentStatus;
+    /** Whether the service's databases are in sync. Defaults to `true`. */
+    dbSync?: boolean;
+    /** Service-level KPI metrics for the stats dialog. */
+    metrics?: ServiceDialogMetric[];
+    /** System alerts for the stats dialog. */
+    alerts?: ServiceDialogAlert[];
+}
+/**
+ * Binds a single ServiceDialog metric row to a PromQL query.
+ * Resolved values are displayed in the service stats panel.
+ */
+export interface ServiceMetricBinding {
+    label: string;
+    query: string;
+    unit?: string;
+    color?: string;
+    transform?: (raw: unknown) => string;
+}
+export interface AIOPsDashboardProps {
+    /** Dashboard title displayed in the header. */
+    title?: string;
+    /** Brand name shown with the pulse indicator. Defaults to `"BUSAUD AIOps"`. */
+    brandName?: string;
+    /** Tag badge in the header corner. Defaults to `"3D MONITOR"`. */
+    brandTag?: string;
+    /**
+     * Metadata for each service — used for the service-level stats dialog.
+     * Each entry should match a child service component by `name`.
+     */
+    services?: ServiceMeta[];
+    /** Optional background image URL. */
+    backgroundImage?: string;
+    /** Optional logo/image URL displayed in the center of the carousel orbit. */
+    logoUrl?: string;
+    /** Angular speed of the carousel rotation (radians per frame). Defaults to `0.006`. */
+    carouselSpeed?: number;
+    /** Font family applied to the entire dashboard. Defaults to the library default. */
+    fontFamily?: string;
+    /**
+     * Enables the live-data pipeline.
+     *
+     * When `true` (and `dataEndpoint` + `dataBindings` are provided),
+     * the dashboard wraps itself in a {@link DataProvider}, shows the
+     * credentials modal on first load, and begins polling for live
+     * metric values.
+     *
+     * Without this flag the dashboard renders with static / default
+     * data only — no network requests, no credentials prompt.
+     *
+     * @default false
+     */
+    liveData?: boolean;
+    /**
+     * Base URL of the PromQL-compatible endpoint.
+     * Only used when `liveData` is `true`.
+     *
+     * Queries are sent as `GET <endpoint>?query=<promQL>`.
+     */
+    dataEndpoint?: string;
+    /**
+     * Maps **service name → prop name → PromQL query**.
+     *
+     * Each binding is either a bare query string (uses the global
+     * `dataTransform`) or `{ query, transform }` for per-binding control.
+     *
+     * The package automatically injects resolved values as props into
+     * the matching child service component (matched by `name`).
+     *
+     * @example
+     * ```tsx
+     * dataBindings={{
+     *   "Service Alpha": {
+     *     cpuLoad: 'cpu_usage{instance="srv-01"}',
+     *     status: {
+     *       query: 'up{instance="srv-01"}',
+     *       transform: (v) => (v > 0 ? "online" : "offline"),
+     *     },
+     *   },
+     * }}
+     * ```
+     */
+    dataBindings?: DataBindings;
+    /**
+     * Global transform applied to every raw endpoint response before it is
+     * injected as a prop. Individual bindings can override this with their
+     * own `transform`.
+     *
+     * Defaults to a Prometheus-aware extractor that returns the scalar
+     * value from instant-vector or scalar responses.
+     */
+    dataTransform?: (raw: unknown) => unknown;
+    /** Override the default 60 s polling interval (in milliseconds). */
+    dataRefreshInterval?: number;
+    /**
+     * Maps **service name → array of metric bindings** for the service
+     * stats dialog. Each binding fetches a PromQL value and displays
+     * it as a KPI row in the {@link ServiceDialog}.
+     *
+     * @example
+     * ```tsx
+     * serviceDataBindings={{
+     *   "ServiceX": [
+     *     { label: "Uptime", query: 'uptime{svc="x"}', unit: "%", color: "#00ff88" },
+     *     { label: "Latency", query: 'latency{svc="x"}', unit: "ms", color: "#00e5ff" },
+     *   ],
+     * }}
+     * ```
+     */
+    serviceDataBindings?: Record<string, ServiceMetricBinding[]>;
+    /**
+     * Service components to display in the carousel.
+     * Each child should be a service component (e.g. `<SAPService>`)
+     * that internally renders the library `<Service>` container.
+     */
+    children: React.ReactNode;
+}
+export default function AIOPsDashboard(props: AIOPsDashboardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AIOPsDashboard.d.ts.map

package/dist/AIOPsDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIOPsDashboard.d.ts","sourceRoot":"","sources":["../src/AIOPsDashboard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAgC,eAAe,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC1F,OAAO,aAAa,CAAC;AAMrB;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,MAAM,EAAE,eAAe,CAAC;IACxB,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAChC,0CAA0C;IAC1C,MAAM,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACjC;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC;CACxC;AAED,MAAM,WAAW,mBAAmB;IAChC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oFAAoF;IACpF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC;IAC1C,oEAAoE;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;;;;;;;;;;;OAcG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC;IAC7D;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CA4BhE"}

package/dist/components/Carousel.d.ts

@@ -0,0 +1,64 @@
+import { default as React } from 'react';
+import { ViewState, SelectedComponent, ComponentStatus } from '../types';
+import { ServiceDialogMetric, ServiceDialogAlert } from './ServiceDialog';
+export interface CarouselProps {
+    /** Service components to display in the carousel. Each must be a `<Service>`. */
+    children: React.ReactNode;
+    /** Optional logo URL displayed in the center of the carousel. */
+    logoUrl?: string;
+    /** Current view state of the carousel. */
+    viewState: ViewState;
+    /** Current expansion animation phase (0–6). */
+    animPhase: number;
+    /** Name of the currently selected/expanded system, or `null`. */
+    selectedSystem: string | null;
+    /** Currently selected component for drill-down, or `null`. */
+    selectedComponent: SelectedComponent | null;
+    /** Drill-down animation phase (0–1). */
+    drillAnimPhase: number;
+    /** Y-axis rotation for all 3D components (degrees). */
+    rotateY?: number;
+    /** Whether 3D components auto-rotate around the Y axis. */
+    autoRotateComponents?: boolean;
+    /** Scale factor for components in expanded view (0.3–1.5). */
+    componentScale?: number;
+    /** Zoom factor when drilling into a component (1.5–6). Defaults to `3.3`. */
+    drillZoom?: number;
+    /** Whether the carousel auto-rotates when in compact view. Defaults to `true`. */
+    autoRotateCarousel?: boolean;
+    /** Angular speed of the carousel rotation (radians per frame). Defaults to `0.006`. */
+    carouselSpeed?: number;
+    /** Width of the scene container in pixels. Defaults to `660`. */
+    width?: number;
+    /** Height of the scene container in pixels. Defaults to `600`. */
+    height?: number;
+    /** Called when a service is clicked in compact view. */
+    onSelectSystem: (name: string) => void;
+    /** Called when the background is clicked (collapse or close drill). */
+    onBackgroundClick: () => void;
+    /** Called when a component node is clicked for drill-down. */
+    onComponentClick: (info: SelectedComponent) => void;
+    /** Called when a selected component's live data updates (no animation reset). */
+    onComponentDataUpdate?: (info: SelectedComponent) => void;
+    /** Called when the drill-down view close button is clicked. */
+    onCloseDrill: () => void;
+    /**
+     * Overall status of the currently selected system.
+     * Used to populate the {@link ServiceDialog}. Defaults to `"online"`.
+     */
+    selectedSystemStatus?: ComponentStatus;
+    /** Whether the selected system's databases are in sync. Defaults to `true`. */
+    selectedSystemDbSync?: boolean;
+    /** Service-level KPI metrics for the stats dialog. */
+    selectedSystemMetrics?: ServiceDialogMetric[];
+    /** System alerts for the stats dialog. */
+    selectedSystemAlerts?: ServiceDialogAlert[];
+}
+/**
+ * Grand carousel container.
+ *
+ * Positions child services on a 3D elliptical orbit, manages the
+ * rotation animation, and renders overlay dialogs.
+ */
+export default function Carousel({ children, logoUrl, viewState, animPhase, selectedSystem, selectedComponent, drillAnimPhase, rotateY, autoRotateComponents, componentScale, drillZoom, autoRotateCarousel, carouselSpeed, width, height, onSelectSystem, onBackgroundClick: _onBackgroundClick, onComponentClick, onComponentDataUpdate, onCloseDrill, selectedSystemStatus, selectedSystemDbSync, selectedSystemMetrics, selectedSystemAlerts, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Carousel.d.ts.map

package/dist/components/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/components/Carousel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAI/E,MAAM,WAAW,aAAa;IAC1B,iFAAiF;IACjF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,CAAC;IAIjB,0CAA0C;IAC1C,SAAS,EAAE,SAAS,CAAC;IACrB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,8DAA8D;IAC9D,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,wCAAwC;IACxC,cAAc,EAAE,MAAM,CAAC;IAIvB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,8DAA8D;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IAInB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uFAAuF;IACvF,aAAa,CAAC,EAAE,MAAM,CAAC;IAIvB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAIhB,wDAAwD;IACxD,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,uEAAuE;IACvE,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,8DAA8D;IAC9D,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,iFAAiF;IACjF,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1D,+DAA+D;IAC/D,YAAY,EAAE,MAAM,IAAI,CAAC;IAIzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC,+EAA+E;IAC/E,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,sDAAsD;IACtD,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9C,0CAA0C;IAC1C,oBAAoB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC/C;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC7B,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,OAAY,EACZ,oBAA2B,EAC3B,cAAqB,EACrB,SAAe,EACf,kBAAyB,EACzB,aAAqB,EACrB,KAAW,EACX,MAAY,EACZ,cAAc,EACd,iBAAiB,EAAE,kBAAkB,EACrC,gBAAgB,EAChB,qBAAqB,EACrB,YAAY,EACZ,oBAA+B,EAC/B,oBAA2B,EAC3B,qBAAqB,EACrB,oBAAoB,GACvB,EAAE,aAAa,2CAiJf"}

package/dist/components/CarouselContext.d.ts

@@ -0,0 +1,27 @@
+import { ViewState, SelectedComponent } from '../types';
+import { ServiceDialogAlert } from './ServiceDialog';
+export interface CarouselContextValue {
+    totalSystems: number;
+    carouselRotation: number;
+    viewState: ViewState;
+    animPhase: number;
+    selectedSystem: string | null;
+    selectedComponent: SelectedComponent | null;
+    rotateY: number;
+    autoRotateComponents: boolean;
+    componentScale: number;
+    drillZoom: number;
+    onSelectSystem: (name: string) => void;
+    onComponentClick: (info: SelectedComponent) => void;
+    onComponentDataUpdate?: (info: SelectedComponent) => void;
+    containerWidth: number;
+    onNodeAlertsChange?: (serviceName: string, alerts: ServiceDialogAlert[]) => void;
+}
+export interface CarouselItemContextValue {
+    index: number;
+}
+export declare const CarouselContext: import('react').Context<CarouselContextValue | null>;
+export declare const CarouselItemContext: import('react').Context<CarouselItemContextValue>;
+export declare function useCarouselContext(): CarouselContextValue | null;
+export declare function useCarouselItemContext(): CarouselItemContextValue;
+//# sourceMappingURL=CarouselContext.d.ts.map

package/dist/components/CarouselContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselContext.d.ts","sourceRoot":"","sources":["../../src/components/CarouselContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,WAAW,oBAAoB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,iBAAiB,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,CAAC;IAChB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CACpF;AAED,MAAM,WAAW,wBAAwB;IACrC,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAC;AAChF,eAAO,MAAM,mBAAmB,mDAAwD,CAAC;AAEzF,wBAAgB,kBAAkB,gCAEjC;AAED,wBAAgB,sBAAsB,6BAErC"}

package/dist/components/ComponentDialog.d.ts

@@ -0,0 +1,10 @@
+import { SelectedComponent } from '../types';
+export interface ComponentDialogProps {
+    component: SelectedComponent;
+    onClose: () => void;
+    visible: boolean;
+    sceneWidth?: number;
+    sceneHeight?: number;
+}
+export default function ComponentDialog({ component, onClose, visible, sceneWidth, sceneHeight, }: ComponentDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ComponentDialog.d.ts.map

package/dist/components/ComponentDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentDialog.d.ts","sourceRoot":"","sources":["../../src/components/ComponentDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAyB,MAAM,UAAU,CAAC;AAIzE,MAAM,WAAW,oBAAoB;IACjC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AA2BD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAgB,EAChB,WAAiB,GACpB,EAAE,oBAAoB,2CAoVtB"}