@msqd/lydia 0.0.0-stage → 0.6.0

package/dist/Elements/Http/CacheBadge.js

@@ -0,0 +1,34 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Badge as n } from "../../Components/Badges/Badge.js";
+import "react";
+import { twMerge as u } from "tailwind-merge";
+function C({ cacheStatus: r, cached: t, className: l, ...o }) {
+  if (!r && (t === void 0 || t === !1))
+    return null;
+  let e, s, a;
+  if (r)
+    switch (r) {
+      case "hit":
+        e = "HIT", s = "success", a = "Cache HIT";
+        break;
+      case "miss":
+        e = "MISS", s = "default", a = "Cache MISS";
+        break;
+      case "stale":
+        e = "STALE", s = "warning", a = "Cache STALE";
+        break;
+      case "bypass":
+        e = "BYPASS", s = "blue", a = "Cache BYPASS";
+        break;
+      default:
+        e = "UNKNOWN", s = "default", a = "Cache status unknown";
+    }
+  else if (t)
+    e = "HIT", s = "success", a = "Cached";
+  else
+    return null;
+  return /* @__PURE__ */ i(n, { color: s, className: u("font-mono", l), title: a, ...o, children: e });
+}
+export {
+  C as CacheBadge
+};

package/dist/Elements/Http/CacheIndicator.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentProps } from "react";
+export interface CacheIndicatorProps extends ComponentProps<"span"> {
+    /** Cache status from the server */
+    cacheStatus?: "hit" | "miss" | "stale" | "bypass";
+    /** Whether the request was cached (legacy support) */
+    cached?: boolean;
+    /** Size of the indicator */
+    size?: "xs" | "sm" | "base" | "lg";
+}
+/**
+ * CacheIndicator component that displays cache status using icons.
+ * - No icon for cache miss (default behavior)
+ * - Green database icon for cache hit
+ * - Red crossed-out database icon for cache bypass
+ * - Yellow database icon for stale cache
+ */
+export declare function CacheIndicator({ cacheStatus, cached, size, className, ...props }: CacheIndicatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Elements/Http/CacheIndicator.js

@@ -0,0 +1,47 @@
+import { jsxs as f, jsx as c } from "react/jsx-runtime";
+import { XMarkIcon as u } from "@heroicons/react/20/solid";
+import { CircleStackIcon as d } from "@heroicons/react/24/outline";
+import "react";
+import { twMerge as a } from "tailwind-merge";
+function g({ cacheStatus: r, cached: l, size: i = "xs", className: m, ...h }) {
+  let e = null;
+  if (r ? e = r : l === !0 ? e = "hit" : l === !1 && (e = "miss"), !e || e === "miss")
+    return null;
+  let s, t, n = !1;
+  switch (e) {
+    case "hit":
+      s = "text-success-600", t = "Cache HIT - Response served from cache";
+      break;
+    case "stale":
+      s = "text-warning-600", t = "Cache STALE - Served stale content while revalidating";
+      break;
+    case "bypass":
+      s = "text-danger-600", t = "Cache BYPASS - Cache was intentionally bypassed", n = !0;
+      break;
+    default:
+      return null;
+  }
+  const o = {
+    xs: "h-3 w-3",
+    sm: "h-3.5 w-3.5",
+    base: "h-4 w-4",
+    lg: "h-5 w-5"
+  };
+  return /* @__PURE__ */ f(
+    "span",
+    {
+      className: a("inline-flex items-center cursor-help relative", m),
+      title: t,
+      role: "img",
+      "aria-label": t,
+      ...h,
+      children: [
+        /* @__PURE__ */ c(d, { className: a(o[i], s), "aria-hidden": "true" }),
+        n && /* @__PURE__ */ c(u, { className: a("absolute inset-0", o[i], s), "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  g as CacheIndicator
+};

package/dist/Elements/Http/RequestMethodBadge.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from "react";
+export interface RequestMethodBadgeProps {
+    method: string;
+}
+export declare const RequestMethodBadge: FC<RequestMethodBadgeProps>;

package/dist/Elements/Http/RequestMethodBadge.js

@@ -0,0 +1,13 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Badge as r } from "../../Components/Badges/Badge.js";
+const t = {
+  GET: "green",
+  DELETE: "red",
+  PUT: "yellow",
+  POST: "orange",
+  PATCH: "purple",
+  OPTIONS: "blue"
+}, a = ({ method: e }) => /* @__PURE__ */ o(r, { "data-testid": `method-badge-${e}`, color: t[e], children: e });
+export {
+  a as RequestMethodBadge
+};

package/dist/Elements/Http/ResponseStatusBadge.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+export interface ResponseStatusBadgeProps {
+    statusCode: number;
+    /**
+     * Whether to spell the reason phrase out beside the code.
+     *
+     * On by default, so nothing that renders this today changes. Turn it off
+     * where the badge appears once per row of a list: the colour already says
+     * the class and the number already says the code, so "Internal Server Error"
+     * spelled out on every row of a kind is the same words repeated down the
+     * page, and it costs the width a consumer would rather give to whatever
+     * identifies the row.
+     *
+     * Keep it on where there is one of them — a detail panel — since that is
+     * where a reader may genuinely not know what 422 means.
+     */
+    showReason?: boolean;
+}
+export declare const ResponseStatusBadge: FC<ResponseStatusBadgeProps>;

package/dist/Elements/Http/ResponseStatusBadge.js

@@ -0,0 +1,20 @@
+import { jsx as i, jsxs as t, Fragment as c } from "react/jsx-runtime";
+import { Badge as f } from "../../Components/Badges/Badge.js";
+import { getReasonPhrase as g } from "http-status-codes";
+const o = (r) => r >= 200 && r < 300 ? "success" : r >= 300 && r < 400 ? "blue" : r >= 400 && r < 500 ? "warning" : r >= 500 && r < 600 ? "danger" : r >= 600 ? "purple" : "default", m = (r) => {
+  try {
+    return g(r);
+  } catch {
+    return "Unknown";
+  }
+}, u = ({ statusCode: r, showReason: n = !0 }) => {
+  const e = o(r);
+  return /* @__PURE__ */ i(f, { "data-testid": `status-badge-${r}`, color: e, children: n ? /* @__PURE__ */ t(c, { children: [
+    r,
+    " ",
+    m(r)
+  ] }) : r });
+};
+export {
+  u as ResponseStatusBadge
+};

package/dist/Elements/Http/index.d.ts

@@ -0,0 +1,4 @@
+export { RequestMethodBadge, type RequestMethodBadgeProps } from "./RequestMethodBadge.js";
+export { ResponseStatusBadge, type ResponseStatusBadgeProps } from "./ResponseStatusBadge.js";
+export { CacheBadge, type CacheBadgeProps } from "./CacheBadge.js";
+export { CacheIndicator, type CacheIndicatorProps } from "./CacheIndicator.js";

package/dist/Elements/Http/index.js

@@ -0,0 +1,10 @@
+import { RequestMethodBadge as r } from "./RequestMethodBadge.js";
+import { ResponseStatusBadge as a } from "./ResponseStatusBadge.js";
+import { CacheBadge as p } from "./CacheBadge.js";
+import { CacheIndicator as m } from "./CacheIndicator.js";
+export {
+  p as CacheBadge,
+  m as CacheIndicator,
+  r as RequestMethodBadge,
+  a as ResponseStatusBadge
+};

package/dist/Elements/System/CircuitBreakerStatus.d.ts

@@ -0,0 +1,11 @@
+import { type CircuitBreakerState } from "../../Models/System/index.js";
+export interface CircuitBreakerStatusProps {
+    circuitBreaker: {
+        status: CircuitBreakerState;
+        failureRate: number;
+    };
+    compact?: boolean;
+    editable?: boolean;
+    onChange?: (status: CircuitBreakerState) => void;
+}
+export declare function CircuitBreakerStatus({ circuitBreaker, compact, editable, onChange, }: CircuitBreakerStatusProps): import("react/jsx-runtime").JSX.Element;

package/dist/Elements/System/CircuitBreakerStatus.js

@@ -0,0 +1,98 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { ChevronDownIcon as p, CheckIcon as h } from "@heroicons/react/20/solid";
+import { useClickOutside as y } from "../../Components/Utilities/useClickOutside.js";
+import { useState as g } from "react";
+import { circuitBreakerStatusMap as i } from "../../Models/System/types.js";
+import { Badge as o } from "../../Components/Badges/Badge.js";
+function j({
+  circuitBreaker: s,
+  compact: f = !1,
+  editable: d = !1,
+  onChange: b
+}) {
+  const [c, n] = g(!1), x = y({ onClickOutside: () => n(!1), enabled: c }), t = i[s.status], m = (l) => {
+    n(!1), b?.(l);
+  };
+  return f ? d ? /* @__PURE__ */ e("div", { ref: x, className: "relative", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => n(!c),
+        className: "flex items-center space-x-1 bg-white border border-gray-200 rounded px-1.5 py-0.5 hover:bg-gray-50 transition-colors cursor-pointer",
+        children: [
+          /* @__PURE__ */ r(o, { color: t.color, className: "text-xs px-1 py-0", children: t.icon }),
+          /* @__PURE__ */ e("span", { className: "text-xs text-gray-600", children: [
+            s.failureRate.toFixed(1),
+            "%"
+          ] }),
+          /* @__PURE__ */ r(p, { className: "w-3 h-3 text-gray-400" })
+        ]
+      }
+    ),
+    c && /* @__PURE__ */ r("div", { className: "absolute top-full mt-1 left-0 z-50 w-36 bg-white border border-gray-200 rounded overflow-hidden", children: Object.entries(i).map(([l, a]) => /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => m(l),
+        className: `w-full flex items-center justify-between px-2 py-1.5 text-xs hover:bg-gray-50 transition-colors cursor-pointer ${l === s.status ? "bg-gray-50" : ""} ${Object.keys(i).indexOf(l) > 0 ? "border-t border-gray-100" : ""}`,
+        children: [
+          /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ r(o, { color: a.color, className: "text-xs px-1 py-0", children: a.icon }),
+            /* @__PURE__ */ r("span", { className: "text-gray-700", children: a.label })
+          ] }),
+          l === s.status && /* @__PURE__ */ r(h, { className: "w-3 h-3 text-gray-600" })
+        ]
+      },
+      l
+    )) })
+  ] }) : /* @__PURE__ */ e("div", { className: "flex items-center space-x-1", children: [
+    /* @__PURE__ */ r(o, { color: t.color, className: "text-xs px-1 py-0", children: t.icon }),
+    /* @__PURE__ */ e("span", { className: "text-xs text-gray-600", children: [
+      s.failureRate.toFixed(1),
+      "%"
+    ] })
+  ] }) : /* @__PURE__ */ e("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ r("span", { className: "text-sm font-medium text-gray-700", children: "Circuit Breaker" }),
+      d ? /* @__PURE__ */ e("div", { ref: x, className: "relative", children: [
+        /* @__PURE__ */ e("button", { onClick: () => n(!c), className: "flex items-center space-x-1 cursor-pointer", children: [
+          /* @__PURE__ */ e(o, { color: t.color, children: [
+            t.icon,
+            " ",
+            t.label
+          ] }),
+          /* @__PURE__ */ r(p, { className: "w-4 h-4 text-gray-400" })
+        ] }),
+        c && /* @__PURE__ */ r("div", { className: "absolute top-full mt-1 left-0 z-50 w-36 bg-white border border-gray-200 rounded overflow-hidden", children: Object.entries(i).map(([l, a]) => /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => m(l),
+            className: `w-full flex items-center justify-between px-2 py-1.5 text-xs hover:bg-gray-50 transition-colors cursor-pointer ${l === s.status ? "bg-gray-50" : ""} ${Object.keys(i).indexOf(l) > 0 ? "border-t border-gray-100" : ""}`,
+            children: [
+              /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ r(o, { color: a.color, className: "text-xs px-1 py-0", children: a.icon }),
+                /* @__PURE__ */ r("span", { className: "text-gray-700", children: a.label })
+              ] }),
+              l === s.status && /* @__PURE__ */ r(h, { className: "w-3 h-3 text-gray-600" })
+            ]
+          },
+          l
+        )) })
+      ] }) : /* @__PURE__ */ e(o, { color: t.color, children: [
+        t.icon,
+        " ",
+        t.label
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "text-xs text-gray-500", children: [
+      /* @__PURE__ */ r("div", { children: t.description }),
+      /* @__PURE__ */ e("div", { children: [
+        "Failure rate: ",
+        s.failureRate.toFixed(1),
+        "%"
+      ] })
+    ] })
+  ] });
+}
+export {
+  j as CircuitBreakerStatus
+};

package/dist/Elements/System/EndpointNode.d.ts

@@ -0,0 +1,10 @@
+import { type HealthStatus } from "../../Models/System/index.js";
+export interface EndpointNodeProps {
+    endpoint: {
+        id: string;
+        name: string;
+        url: string;
+        health: HealthStatus;
+    };
+}
+export declare function EndpointNode({ endpoint }: EndpointNodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Elements/System/EndpointNode.js

@@ -0,0 +1,19 @@
+import { jsx as t } from "react/jsx-runtime";
+import { NetworkNode as r, NetworkNodeDetail as l } from "./NetworkNode.js";
+import { healthStatusMap as a } from "../../Models/System/types.js";
+import { Badge as h } from "../../Components/Badges/Badge.js";
+function f({ endpoint: o }) {
+  const e = a[o.health];
+  return /* @__PURE__ */ t(
+    r,
+    {
+      tone: "green",
+      title: o.name,
+      action: /* @__PURE__ */ t(h, { color: e.color, className: "text-xs px-1 py-0", children: o.health }),
+      children: /* @__PURE__ */ t(l, { children: o.url })
+    }
+  );
+}
+export {
+  f as EndpointNode
+};

package/dist/Elements/System/EntrypointNode.d.ts

@@ -0,0 +1,9 @@
+export interface EntrypointNodeProps {
+    entrypoint: {
+        id: string;
+        name: string;
+        port: number;
+        path: string;
+    };
+}
+export declare function EntrypointNode({ entrypoint }: EntrypointNodeProps): import("react/jsx-runtime").JSX.Element;

package/dist/Elements/System/EntrypointNode.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import { NetworkNode as r, NetworkNodeDetail as t } from "./NetworkNode.js";
+import { Badge as i } from "../../Components/Badges/Badge.js";
+function c({ entrypoint: e }) {
+  return /* @__PURE__ */ o(
+    r,
+    {
+      tone: "blue",
+      title: e.name,
+      action: /* @__PURE__ */ o(i, { color: "blue", className: "text-xs px-1 py-0", children: e.port }),
+      children: /* @__PURE__ */ o(t, { children: e.path })
+    }
+  );
+}
+export {
+  c as EntrypointNode
+};

package/dist/Elements/System/NetworkEdges.d.ts

@@ -0,0 +1,37 @@
+import type { CircuitBreakerState } from "../../Models/System/index.js";
+export interface NetworkEdgesProps {
+    connections: Array<{
+        from: string;
+        to: string;
+        type: "entrypoint-proxy" | "proxy-endpoint";
+        circuitBreaker?: {
+            status: CircuitBreakerState;
+            failureRate: number;
+        };
+    }>;
+    positions: {
+        entrypoints: Array<{
+            id: string;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }>;
+        proxies: Array<{
+            id: string;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }>;
+        endpoints: Array<{
+            id: string;
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }>;
+    };
+    onCircuitBreakerChange?: (from: string, to: string, status: CircuitBreakerState) => void;
+}
+export declare function NetworkEdges({ connections, positions, onCircuitBreakerChange }: NetworkEdgesProps): import("react/jsx-runtime").JSX.Element;

package/dist/Elements/System/NetworkEdges.js

@@ -0,0 +1,52 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { CircuitBreakerStatus as w } from "./CircuitBreakerStatus.js";
+function v({ connections: m, positions: a, onCircuitBreakerChange: c }) {
+  const u = [...a.entrypoints, ...a.proxies, ...a.endpoints], d = (r) => u.find((t) => t.id === r);
+  return /* @__PURE__ */ h("svg", { className: "absolute inset-0 pointer-events-none", style: { zIndex: 1, overflow: "visible" }, children: [
+    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e(
+      "marker",
+      {
+        id: "arrowhead",
+        markerWidth: "12",
+        markerHeight: "8",
+        refX: "11",
+        refY: "4",
+        orient: "auto",
+        markerUnits: "strokeWidth",
+        children: /* @__PURE__ */ e("polygon", { points: "0 0, 12 4, 0 8", fill: "#6366f1" })
+      }
+    ) }),
+    m.map((r) => {
+      const t = d(r.from), o = d(r.to);
+      if (!t || !o)
+        return console.warn(`Missing node for connection: ${r.from} -> ${r.to}`), null;
+      const s = t.x + t.width, n = t.y + t.height / 2, i = o.x, l = o.y + o.height / 2, f = Math.abs(i - s) * 0.5, k = s + f, p = i - f, g = `M ${s} ${n} C ${k} ${n}, ${p} ${l}, ${i} ${l}`;
+      return /* @__PURE__ */ h("g", { children: [
+        /* @__PURE__ */ e("path", { d: g, stroke: "#6366f1", strokeWidth: "2", fill: "none", markerEnd: "url(#arrowhead)", opacity: "0.8" }),
+        r.circuitBreaker && /* @__PURE__ */ e(
+          "foreignObject",
+          {
+            x: (s + i) / 2 - 50,
+            y: (n + l) / 2 - 12,
+            width: "100",
+            height: "24",
+            className: "pointer-events-auto",
+            style: { overflow: "visible" },
+            children: /* @__PURE__ */ e(
+              w,
+              {
+                circuitBreaker: r.circuitBreaker,
+                compact: !0,
+                editable: !0,
+                onChange: ($) => c?.(r.from, r.to, $)
+              }
+            )
+          }
+        )
+      ] }, `${r.from}-${r.to}`);
+    })
+  ] });
+}
+export {
+  v as NetworkEdges
+};

package/dist/Elements/System/NetworkMap.d.ts

@@ -0,0 +1,33 @@
+import type { CircuitBreakerState } from "../../Models/System/index.js";
+import { type EndpointNodeProps } from "./EndpointNode.js";
+import { type EntrypointNodeProps } from "./EntrypointNode.js";
+import { type ProxyNodeProps } from "./ProxyNode.js";
+export type NetworkEntrypoint = EntrypointNodeProps["entrypoint"];
+export type NetworkProxy = ProxyNodeProps["proxy"];
+export type NetworkEndpoint = EndpointNodeProps["endpoint"];
+export type NetworkConnection = {
+    from: string;
+    to: string;
+    type: "entrypoint-proxy";
+} | {
+    from: string;
+    to: string;
+    type: "proxy-endpoint";
+    circuitBreaker: {
+        status: CircuitBreakerState;
+        failureRate: number;
+    };
+};
+/** Network topology: the nodes and connections rendered by the map. */
+export interface NetworkTopology {
+    entrypoints: NetworkEntrypoint[];
+    proxies: NetworkProxy[];
+    endpoints: NetworkEndpoint[];
+    connections: NetworkConnection[];
+}
+export interface NetworkMapProps {
+    /** The topology to render. */
+    topology: NetworkTopology;
+    className?: string;
+}
+export declare function NetworkMap({ topology, className }: NetworkMapProps): import("react/jsx-runtime").JSX.Element;

package/dist/Elements/System/NetworkMap.js

@@ -0,0 +1,121 @@
+import { jsx as o, jsxs as N } from "react/jsx-runtime";
+import { useState as b, useMemo as w } from "react";
+import { EndpointNode as B } from "./EndpointNode.js";
+import { EntrypointNode as P } from "./EntrypointNode.js";
+import { NetworkEdges as W } from "./NetworkEdges.js";
+import { ProxyNode as k } from "./ProxyNode.js";
+import { Card as C } from "../../Components/Cards/Card.js";
+function E(c, m) {
+  const g = (c - 60) / 3, n = Math.min(220, g - 20), r = 70, l = 25, p = 30 + 20, t = m.entrypoints.map((a, s) => ({
+    id: a.id,
+    x: 30,
+    y: p + s * (r + l),
+    width: n,
+    height: r
+  })), d = m.proxies.map((a, s) => {
+    const f = m.connections.filter((i) => i.to === a.id && i.type === "entrypoint-proxy").map((i) => t.find((h) => h.id === i.from)).filter(Boolean), x = f.length > 0 ? f.reduce((i, h) => i + h.y + h.height / 2, 0) / f.length - r / 2 : p + s * (r + l * 3);
+    return {
+      id: a.id,
+      x: 30 + g,
+      y: Math.max(p, x),
+      // Ensure it doesn't go above header
+      width: n,
+      height: r
+    };
+  }), e = m.endpoints.map((a, s) => {
+    const f = m.connections.filter((i) => i.to === a.id && i.type === "proxy-endpoint").map((i) => d.find((h) => h.id === i.from)).filter(Boolean), x = f.length > 0 ? f.reduce((i, h) => i + h.y + h.height / 2, 0) / f.length - r / 2 : p + s * (r + l);
+    return {
+      id: a.id,
+      x: 30 + g * 2,
+      y: Math.max(p, x),
+      // Ensure it doesn't go above header
+      width: n,
+      height: r
+    };
+  });
+  return {
+    entrypoints: t,
+    proxies: d,
+    endpoints: e
+  };
+}
+function z({ topology: c, className: m = "" }) {
+  const [y, v] = b(c.connections), g = 1200, n = w(() => E(g, c), [c]), r = w(
+    () => Math.max(
+      ...n.entrypoints.map((t) => t.y + t.height),
+      ...n.proxies.map((t) => t.y + t.height),
+      ...n.endpoints.map((t) => t.y + t.height)
+    ) + 50,
+    [n]
+  ), l = 30, u = (g - l * 2) / 3, p = (t, d, e) => {
+    v(
+      (a) => a.map((s) => s.from === t && s.to === d && s.type === "proxy-endpoint" ? { ...s, circuitBreaker: { ...s.circuitBreaker, status: e } } : s)
+    );
+  };
+  return /* @__PURE__ */ o(C, { className: `p-6 ${m} overflow-visible`, children: /* @__PURE__ */ o(
+    "div",
+    {
+      className: "relative w-full overflow-x-auto overflow-y-visible",
+      style: { minHeight: r, paddingBottom: "120px" },
+      children: /* @__PURE__ */ N("div", { className: "relative", style: { minWidth: 800, width: "100%", minHeight: r }, children: [
+        /* @__PURE__ */ o("div", { className: "absolute top-2 text-sm font-semibold text-gray-700", style: { left: l }, children: "Entrypoints" }),
+        /* @__PURE__ */ o("div", { className: "absolute top-2 text-sm font-semibold text-gray-700", style: { left: l + u }, children: "Proxies" }),
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: "absolute top-2 text-sm font-semibold text-gray-700",
+            style: { left: l + u * 2 },
+            children: "Endpoints"
+          }
+        ),
+        c.entrypoints.map((t, d) => {
+          const e = n.entrypoints[d];
+          return /* @__PURE__ */ o(
+            "div",
+            {
+              className: "absolute",
+              style: { left: e.x, top: e.y, width: e.width, height: e.height },
+              children: /* @__PURE__ */ o(P, { entrypoint: t })
+            },
+            t.id
+          );
+        }),
+        c.proxies.map((t, d) => {
+          const e = n.proxies[d];
+          return /* @__PURE__ */ o(
+            "div",
+            {
+              className: "absolute",
+              style: { left: e.x, top: e.y, width: e.width, height: e.height },
+              children: /* @__PURE__ */ o(k, { proxy: t })
+            },
+            t.id
+          );
+        }),
+        c.endpoints.map((t, d) => {
+          const e = n.endpoints[d];
+          return /* @__PURE__ */ o(
+            "div",
+            {
+              className: "absolute",
+              style: { left: e.x, top: e.y, width: e.width, height: e.height },
+              children: /* @__PURE__ */ o(B, { endpoint: t })
+            },
+            t.id
+          );
+        }),
+        /* @__PURE__ */ o(
+          W,
+          {
+            connections: y,
+            positions: n,
+            onCircuitBreakerChange: p
+          }
+        )
+      ] })
+    }
+  ) });
+}
+export {
+  z as NetworkMap
+};

package/dist/Elements/System/NetworkNode.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ReactNode } from "react";
+/** Tones a node can take. Written out rather than composed, because Tailwind scans for whole class names. */
+declare const toneClassName: {
+    readonly blue: "bg-blue-50 border-blue-200";
+    readonly green: "bg-green-50 border-green-200";
+    readonly purple: "bg-purple-50 border-purple-200";
+};
+export interface NetworkNodeProps extends ComponentProps<"div"> {
+    /** Which kind of node this is. Carries the tone only; the map's legend carries the meaning. */
+    tone: keyof typeof toneClassName;
+    /** Name of the node, truncated rather than wrapped, since a node has a fixed height */
+    title: string;
+    /** Optional element on the title row, such as a health or port badge */
+    action?: ReactNode;
+    /** Body of the node, under the title row */
+    children?: ReactNode;
+}
+/**
+ * Shell every node in the network map is drawn in.
+ *
+ * The three node kinds differ in what they show, not in how they are framed, and the frame is one
+ * design decision: box, border, radius, height and title row. It lived in three copies that had to
+ * be changed together and nothing said so.
+ */
+export declare function NetworkNode({ tone, title, action, children, className, ...props }: NetworkNodeProps): import("react/jsx-runtime").JSX.Element;
+/** A node's secondary line: a URL or a path, monospaced and truncated. */
+export type NetworkNodeDetailProps = ComponentProps<"div">;
+export declare function NetworkNodeDetail({ className, children, ...props }: NetworkNodeDetailProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Elements/System/NetworkNode.js

@@ -0,0 +1,31 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { Subheading as a } from "../../Components/Typography/HeadingLevel.js";
+import { twMerge as l } from "tailwind-merge";
+const d = {
+  blue: "bg-blue-50 border-blue-200",
+  green: "bg-green-50 border-green-200",
+  purple: "bg-purple-50 border-purple-200"
+};
+function f({ tone: e, title: r, action: t, children: s, className: i, ...u }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: l("border rounded-lg p-3 h-full flex flex-col justify-center", d[e], i),
+      ...u,
+      children: [
+        /* @__PURE__ */ o("div", { className: "flex items-center justify-between mb-1", children: [
+          /* @__PURE__ */ n(a, { className: "font-semibold text-gray-900 text-sm truncate", children: r }),
+          t
+        ] }),
+        s
+      ]
+    }
+  );
+}
+function g({ className: e, children: r, ...t }) {
+  return /* @__PURE__ */ n("div", { className: l("text-xs text-gray-600 font-mono truncate", e), ...t, children: r });
+}
+export {
+  f as NetworkNode,
+  g as NetworkNodeDetail
+};