react-aiops 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,270 @@
+# react-aiops
+
+Holographic 3D infrastructure monitoring dashboard for React. Pure CSS-3D components — no WebGL, no canvas, no dependencies beyond React.
+
+```
+npm install react-aiops
+```
+
+```tsx
+import "react-aiops/dist/index.css";
+```
+
+---
+
+## Quickstart (absolute minimum)
+
+A single server on screen in 5 lines:
+
+```tsx
+import "react-aiops/dist/index.css";
+import { Server3D } from "react-aiops";
+
+export default function App() {
+  return <Server3D status="online" cpuLoad={42} memLoad={60} />;
+}
+```
+
+---
+
+## Minimal dashboard
+
+A full rotating carousel with one service — no config objects, no state management:
+
+```tsx
+import "react-aiops/dist/index.css";
+import { AIOPsDashboard, SAPService } from "react-aiops";
+
+export default function App() {
+  return (
+    <AIOPsDashboard>
+      <SAPService
+        config={{
+          name: "SAP HR",
+          wdStatus: "online",
+          msStatus: "online",
+          srv1Status: "online",
+          srv2Status: "online",
+          srv3Status: "online",
+          pdbStatus: "online",
+          sdbStatus: "online",
+          dbSync: true,
+        }}
+      />
+    </AIOPsDashboard>
+  );
+}
+```
+
+Click a service to expand its topology. Click a component to drill into its internals.
+
+---
+
+## Full-featured dashboard
+
+Multiple services, mixed statuses, service dialog metadata:
+
+```tsx
+import "react-aiops/dist/index.css";
+import {
+  AIOPsDashboard,
+  SAPService,
+  ExchangeService,
+  computeSAPServiceStatus,
+  computeSAPDialogMetrics,
+  computeSAPDialogAlerts,
+  computeExchangeServiceStatus,
+  computeExchangeDialogMetrics,
+  computeExchangeDialogAlerts,
+} from "react-aiops";
+import type { SAPServiceConfig, ExchangeServiceConfig, ServiceMeta } from "react-aiops";
+
+const sapHR: SAPServiceConfig = {
+  name: "SAP HR",
+  wdStatus: "online",
+  msStatus: "online",
+  srv1Status: "online",
+  srv2Status: "warning",
+  srv3Status: "online",
+  pdbStatus: "online",
+  sdbStatus: "online",
+  dbSync: true,
+};
+
+const exchange: ExchangeServiceConfig = {
+  name: "Exchange",
+  dispStatus: "critical",
+  srv1Status: "online",
+  srv2Status: "online",
+  srv3Status: "offline",
+  pdbStatus: "online",
+  sdbStatus: "warning",
+  dbSync: false,
+};
+
+const services: ServiceMeta[] = [
+  {
+    name: sapHR.name,
+    status: computeSAPServiceStatus(sapHR),
+    dbSync: sapHR.dbSync,
+    metrics: computeSAPDialogMetrics(sapHR),
+    alerts: computeSAPDialogAlerts(sapHR),
+  },
+  {
+    name: exchange.name,
+    status: computeExchangeServiceStatus(exchange),
+    dbSync: exchange.dbSync,
+    metrics: computeExchangeDialogMetrics(exchange),
+    alerts: computeExchangeDialogAlerts(exchange),
+  },
+];
+
+export default function App() {
+  return (
+    <AIOPsDashboard services={services} brandName="MY AIOPS" brandTag="LIVE">
+      <SAPService config={sapHR} />
+      <ExchangeService config={exchange} />
+    </AIOPsDashboard>
+  );
+}
+```
+
+---
+
+## Components
+
+### Layout
+
+| Component | Description |
+|---|---|
+| `AIOPsDashboard` | Full dashboard shell with header, carousel, and state management. Drop services in as children. |
+| `Carousel` | Low-level carousel container. Use this if you want to manage view state yourself. |
+| `Service` | Service container — positions child nodes on a 3D orbit and draws connection lines. |
+| `ServiceNode` | Positions a 3D component in the topology with floating animation, scan line, and labels. |
+
+### 3D Hardware Models
+
+| Component | Props | Description |
+|---|---|---|
+| `Server3D` | `status`, `cpuLoad`, `memLoad`, `name` | Vertical server tower with LEDs, drive bays, CPU/memory bars. |
+| `Database3D` | `status`, `capacity`, `name` | Three-platter database cylinder with status LEDs and capacity bar. |
+| `WebDispatcher3D` | `status`, `traffic`, `activeRoutes`, `name` | Flat network appliance with 8 port LEDs and traffic metrics. |
+| `MessageServer3D` | `status`, `queueDepth`, `msgsPerSec`, `instances`, `name` | Message server with ABAP instance LEDs and queue metrics. |
+| `Human3D` | `status`, `scale` | SVG wireframe person icon for user/actor nodes. |
+
+All 3D components share these optional props: `rotateX`, `rotateY`, `rotateZ`, `scale`, `autoRotate`.
+
+### Status Indicators
+
+| Component | Props | Description |
+|---|---|---|
+| `SyncBridge` | `synced`, `latencyMs` | Database replication status bridge (synced/lag with latency). |
+| `NodeCallout` | `status`, `title`, `msg`, `ex`, `ey`, `offsetX`, `offsetY` | Alert callout with leader line for unhealthy nodes. |
+| `HoloBase` | `size`, `color`, `widthRatio` | Neon holographic base platform. |
+| `SvgConnection` | `x1`, `y1`, `x2`, `y2`, `show` | Animated dashed SVG connection line. |
+
+### Dialogs
+
+| Component | Description |
+|---|---|
+| `ServiceDialog` | Service-level statistics panel (auto-rendered by Carousel). |
+| `ComponentDialog` | Component drill-down with sub-component internals and sparkline graphs. |
+
+### Drill-down Internals
+
+These render inside `ComponentDialog` when a component is drilled into:
+
+`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 library primitives to create any topology:
+
+```tsx
+import {
+  Service,
+  ServiceNode,
+  Server3D,
+  Database3D,
+  NodeCallout,
+  SyncBridge,
+} from "react-aiops";
+
+function MyService() {
+  return (
+    <Service
+      name="My Service"
+      status="online"
+      connections={[
+        { from: [330, 200], to: [200, 350], visibleAtPhase: 3 },
+        { from: [330, 200], to: [460, 350], visibleAtPhase: 3 },
+      ]}
+    >
+      <ServiceNode
+        ex={200} ey={350}
+        compactOffset={{ x: -30, y: -20 }}
+        zIndex={8}
+        label="SRV-01" subLabel="APP SERVER"
+        componentInfo={{ type: "server", name: "SRV-01", status: "online" }}
+      >
+        <Server3D status="online" cpuLoad={42} memLoad={60} />
+      </ServiceNode>
+
+      <ServiceNode
+        ex={460} ey={350}
+        compactOffset={{ x: 30, y: -20 }}
+        zIndex={7}
+        label="DB-01" subLabel="PRIMARY"
+        componentInfo={{ type: "database", name: "DB-01", status: "online" }}
+      >
+        <Database3D status="online" capacity={55} />
+      </ServiceNode>
+    </Service>
+  );
+}
+```
+
+---
+
+## Status types
+
+```ts
+type ComponentStatus = "online" | "warning" | "critical" | "offline";
+```
+
+Each status maps to a color/glow pair via `STATUS_CFG`:
+
+| 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 "react-aiops";
+```
+
+- `STATUS_CFG` — status-to-color lookup
+- `HOLO_CYAN` / `HOLO_BLUE` — accent colors
+- `HOLO_SURFACE` / `HOLO_GLASS` — CSS gradient backgrounds
+- `makeFaceStyles(W, H, D)` — generates CSS transforms for 6 faces of a 3D box
+
+---
+
+## License
+
+MIT

package/dist/AIOPsDashboard.d.ts

@@ -29,6 +29,8 @@ export interface AIOPsDashboardProps {
      * Each entry should match a child service component by `name`.
      */
     services?: ServiceMeta[];
+    /** Optional background image URL. */
+    backgroundImage?: string;
     /**
      * Service components to display in the carousel.
      * Each child should be a service component (e.g. `<SAPService>`)
@@ -42,5 +44,5 @@ export interface AIOPsDashboardProps {
  * Renders a branded header, a 3D carousel of services, and a
  * controls footer. All interaction state is self-contained.
  */
-export default function AIOPsDashboard({ brandName, brandTag, services, children, }: AIOPsDashboardProps): import("react/jsx-runtime").JSX.Element;
+export default function AIOPsDashboard({ brandName, brandTag, services, backgroundImage, children, }: AIOPsDashboardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AIOPsDashboard.d.ts.map

package/dist/AIOPsDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AIOPsDashboard.d.ts","sourceRoot":"","sources":["../src/AIOPsDashboard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAgC,eAAe,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAO1F;;;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,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;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAMD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,SAA0B,EAC1B,QAAuB,EACvB,QAAa,EACb,QAAQ,GACX,EAAE,mBAAmB,2CAiJrB"}
+{"version":3,"file":"AIOPsDashboard.d.ts","sourceRoot":"","sources":["../src/AIOPsDashboard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAgC,eAAe,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAM1F;;;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,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;;;;OAIG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAMD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,SAA0B,EAC1B,QAAuB,EACvB,QAAa,EACb,eAAe,EACf,QAAQ,GACX,EAAE,mBAAmB,2CAkJrB"}

package/dist/components/Carousel.d.ts

@@ -4,6 +4,8 @@ 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). */
@@ -56,5 +58,5 @@ export interface CarouselProps {
  * Positions child services on a 3D elliptical orbit, manages the
  * rotation animation, and renders overlay dialogs.
  */
-export default function Carousel({ children, viewState, animPhase, selectedSystem, selectedComponent, drillAnimPhase, rotateY, autoRotateComponents, componentScale, drillZoom, autoRotateCarousel, carouselSpeed, width, height, onSelectSystem, onBackgroundClick: _onBackgroundClick, onComponentClick, onCloseDrill, selectedSystemStatus, selectedSystemDbSync, selectedSystemMetrics, selectedSystemAlerts, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export default function Carousel({ children, logoUrl, viewState, animPhase, selectedSystem, selectedComponent, drillAnimPhase, rotateY, autoRotateComponents, componentScale, drillZoom, autoRotateCarousel, carouselSpeed, width, height, onSelectSystem, onBackgroundClick: _onBackgroundClick, onComponentClick, onCloseDrill, selectedSystemStatus, selectedSystemDbSync, selectedSystemMetrics, selectedSystemAlerts, }: CarouselProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Carousel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/components/Carousel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,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;IAI1B,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,+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,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,YAAY,EACZ,oBAA+B,EAC/B,oBAA2B,EAC3B,qBAAqB,EACrB,oBAAoB,GACvB,EAAE,aAAa,2CAmGf"}
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/components/Carousel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/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,+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,YAAY,EACZ,oBAA+B,EAC/B,oBAA2B,EAC3B,qBAAqB,EACrB,oBAAoB,GACvB,EAAE,aAAa,2CAmGf"}

package/dist/index.css

@@ -0,0 +1 @@
+@keyframes holo-ring-pulse{0%,to{transform:scaleY(.22) scale(1)}50%{transform:scaleY(.22) scale(.965)}}@keyframes holo-beam-pulse{0%{opacity:.75;filter:brightness(1)}40%{opacity:1;filter:brightness(1.35)}70%{opacity:.55;filter:brightness(.7)}to{opacity:.75;filter:brightness(1)}}@keyframes holo-scan{0%{top:-3px;opacity:0}6%{opacity:1}90%{opacity:.6}to{top:110%;opacity:0}}@keyframes holo-led-blink{0%,88%,to{opacity:1}93%{opacity:.15}}@keyframes holo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes holo-base-spin{0%{transform:translate(-50%) scaleY(.22) rotate(0)}to{transform:translate(-50%) scaleY(.22) rotate(360deg)}}@keyframes component-drill-pulse{0%,to{box-shadow:0 0 #f253}50%{box-shadow:0 0 12px 2px #ff225526}}@keyframes comp-dialog-border-glow{0%,to{border-color:var(--dialog-color, #00e5ff)33;box-shadow:0 0 30px var(--dialog-color, #00e5ff) 18,0 12px 60px #000000bf,inset 0 0 40px #0006}50%{border-color:var(--dialog-color, #00e5ff)66;box-shadow:0 0 50px var(--dialog-color, #00e5ff) 30,0 12px 60px #000000bf,inset 0 0 40px #0006}}@keyframes comp-dialog-icon-pop{0%{opacity:0;transform:scale(.3) translateY(14px)}60%{opacity:1;transform:scale(1.08) translateY(-3px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes comp-dialog-metric-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.app{display:grid;grid-template-rows:52px 1fr;width:100%;height:100vh;overflow:hidden;position:relative;background:#020810;color:#c8dff0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.app-header{display:flex;align-items:center;gap:18px;padding:0 24px;border-bottom:1px solid rgba(0,229,255,.08);background:#020810eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;z-index:10}.hdr-brand{display:flex;align-items:center;gap:8px}.brand-pulse{width:7px;height:7px;border-radius:50%;background:#00e5ff;box-shadow:0 0 8px #00e5ff,0 0 18px #00e5ff80;animation:holo-led-blink 2s linear infinite}.brand-text{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#00e5ff;opacity:.7}.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto}.hdr-tag{font-size:9px;letter-spacing:.2em;color:#00e5ff59;border:1px solid rgba(0,229,255,.15);padding:3px 8px;border-radius:2px}.scene{display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:0;position:relative;z-index:1;gap:0;background:transparent}.float-node{display:flex;flex-direction:column;align-items:center;position:relative}.float-node--interactive:before{content:"";position:absolute;inset:-40px -35px -15px}.float-body{position:relative;animation:holo-float 4s ease-in-out infinite}.scan-line{position:absolute;top:0;left:0;right:0;height:1.5px;animation:holo-scan 3.5s linear infinite;pointer-events:none;z-index:10}.node-tag{font-size:24px;letter-spacing:.2em;text-transform:uppercase;font-family:Courier New,monospace;margin-top:14px;text-align:center;text-shadow:0 0 6px currentColor}.node-subtag{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-family:Courier New,monospace;margin-top:4px;text-align:center}.sync-bridge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:110px;gap:6px;flex-shrink:0;font-family:Courier New,monospace}.sync-arrows{display:flex;align-items:center;width:100%;gap:4px}.sync-line{flex:1;height:2px;border-radius:1px;animation:holo-beam-pulse 1.8s ease-in-out infinite}.sync-status{font-size:8px;letter-spacing:.18em;text-transform:uppercase;text-align:center}.sync-latency{font-size:6.5px;letter-spacing:.1em;text-align:center;font-family:Courier New,monospace}.base-ring{position:absolute;top:50%;left:50%;border-style:solid;border-radius:50%;transform:translate(-50%,-50%) scaleY(.22);animation:holo-ring-pulse 2.5s ease-in-out infinite}.base-hotspot{position:absolute;top:50%;left:50%;width:8%;height:8%;border-radius:50%;transform:translate(-50%,-50%) scaleY(.22);background:radial-gradient(circle,#ffffff 0%,#ff8c00 35%,transparent 70%);box-shadow:0 0 20px #ff8c00,0 0 40px #ff8c0080}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export { default as AIOPsDashboard } from './AIOPsDashboard';
+export type { AIOPsDashboardProps, ServiceMeta } from './AIOPsDashboard';
 export * from './components';
 export * from './services';
 export * from './types';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,OAAO,EACH,UAAU,EACV,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EACV,cAAc,GACjB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACzE,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,OAAO,EACH,UAAU,EACV,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EACV,cAAc,GACjB,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}