@kwirthmagnify/kwirth-homepage-avicii 0.1.1

package/front.js

@@ -0,0 +1,312 @@
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // kwirth-globals:react
+  var require_react = __commonJS({
+    "kwirth-globals:react"(exports, module) {
+      var _m = window.__kwirth__.React;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:@mui/material
+  var require_material = __commonJS({
+    "kwirth-globals:@mui/material"(exports, module) {
+      var _m = window.__kwirth__.MUI.material;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // kwirth-globals:@mui/icons-material
+  var require_icons_material = __commonJS({
+    "kwirth-globals:@mui/icons-material"(exports, module) {
+      var _m = window.__kwirth__.MUI.icons;
+      var _d = _m != null && "default" in Object(_m) ? _m.default : _m;
+      if (typeof _d !== "function" && _d != null && typeof _d.default !== "undefined") _d = _d.default;
+      module.exports = Object.assign({}, typeof _m === "object" && _m !== null ? _m : {}, { default: _d, __esModule: true });
+    }
+  });
+
+  // src/front/Avicii.tsx
+  var import_react = __toESM(require_react(), 1);
+  var import_material = __toESM(require_material(), 1);
+  var import_icons_material = __toESM(require_icons_material(), 1);
+  var AV_GOLD = "#c9a227";
+  var AV_GOLD_DIM = "#5c4810";
+  var AV_GOLD_GLOW = "rgba(201,162,39,0.45)";
+  var AV_BG = "#050505";
+  var AV_CARD = "#0b0907";
+  var AV_TEXT = "#f0ede6";
+  var AV_MUTED = "#4a443c";
+  var AV_FONT = "'Oswald', 'Barlow Condensed', 'Arial Narrow', sans-serif";
+  var POLL_MS = 1e4;
+  var EVENTS_LIMIT = 25;
+  var TRIANGLE_BG = `url("data:image/svg+xml,%3Csvg width='160' height='60' viewBox='0 0 160 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(15,15)' opacity='0.045'%3E%3Cg transform='translate(0,30) scale(0.1,-0.1)' fill='%23c9a227' stroke='none'%3E%3Cpath d='M132 167 l-132 -132 0 -18 0 -17 17 0 18 0 112 112 113 113 0 -113 0 -112 25 0 25 0 0 150 0 150 -23 0 -22 0 -133 -133z'/%3E%3Cpath d='M360 150 l0 -150 38 0 37 0 113 113 112 112 0 35 0 35 -125 -125 -125 -125 0 128 0 127 -25 0 -25 0 0 -150z'/%3E%3Cpath d='M710 150 l0 -150 25 0 25 0 0 150 0 150 -25 0 -25 0 0 -150z'/%3E%3Cpath d='M1150 150 l0 -150 25 0 25 0 0 150 0 150 -25 0 -25 0 0 -150z'/%3E%3Cpath d='M1250 150 l0 -150 25 0 25 0 0 150 0 150 -25 0 -25 0 0 -150z'/%3E%3C/g%3E%3Cpath d='M106.64,17.40 A12.0,12.0 0 1 1 106.88,12.83' fill='none' stroke='%23c9a227' stroke-width='5' stroke-linecap='butt'/%3E%3C/g%3E%3C/svg%3E")`;
+  var AviciiLogo = ({ size = 48 }) => /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 37 18",
+      fill: AV_TEXT,
+      width: size,
+      height: Math.round(size * 18 / 37)
+    },
+    /* @__PURE__ */ import_react.default.createElement("polygon", { points: "17,0 17,18 0,18" }),
+    /* @__PURE__ */ import_react.default.createElement("polygon", { points: "19,0 37,0 19,18" })
+  );
+  var AviciiWordmark = () => /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 308.0 30",
+      height: "19",
+      style: { display: "block" }
+    },
+    /* @__PURE__ */ import_react.default.createElement("g", { fill: AV_TEXT, stroke: "none" }, /* @__PURE__ */ import_react.default.createElement("g", { transform: "translate(37.0,30) scale(0.1,-0.1)" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M132 167 l-132 -132 0 -18 0 -17 17 0 18 0 112 112 113 113 0 -113 0 -112 25 0 25 0 0 150 0 150 -23 0 -22 0 -133 -133z" })), /* @__PURE__ */ import_react.default.createElement("g", { transform: "translate(206.0,30) scale(0.1,-0.1)" }, /* @__PURE__ */ import_react.default.createElement("path", { d: "M132 167 l-132 -132 0 -18 0 -17 17 0 18 0 112 112 113 113 0 -113 0 -112 25 0 25 0 0 150 0 150 -23 0 -22 0 -133 -133z" }))),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M 5.5 27.5 L 5.5 2.5 L 20.5 2.5 A 11 12.5 0 0 1 20.5 27.5 L 5.5 27.5", fill: "none", stroke: AV_TEXT, strokeWidth: "5", strokeLinecap: "butt", strokeLinejoin: "miter" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M 99.5 2.5 L 79.75 2.5 A 6.25 6.25 0 0 0 79.75 15 L 93.25 15 A 6.25 6.25 0 0 1 93.25 27.5 L 73.5 27.5", fill: "none", stroke: AV_TEXT, strokeWidth: "5", strokeLinecap: "butt", strokeLinejoin: "miter" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M 107.5 0 L 107.5 30 M 133.5 0 L 133.5 30 M 107.5 15.0 L 133.5 15.0", fill: "none", stroke: AV_TEXT, strokeWidth: "5", strokeLinecap: "butt", strokeLinejoin: "miter" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M 141.5 0 L 141.5 30 M 141.5 2.5 L 161.5 2.5 A 6 6.25 0 0 1 161.5 15.0 L 141.5 15.0 M 141.5 15.0 L 160.0 15.0 A 7.5 6.25 0 0 1 160.0 27.5 L 141.5 27.5", fill: "none", stroke: AV_TEXT, strokeWidth: "5", strokeLinecap: "butt", strokeLinejoin: "miter" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M 188.0 2.5 A 12.5 12.5 0 0 1 188.0 27.5 A 12.5 12.5 0 0 1 188.0 2.5", fill: "none", stroke: AV_TEXT, strokeWidth: "5", strokeLinecap: "butt", strokeLinejoin: "miter" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M 242.5 30 L 242.5 2.5 L 259.5 2.5 A 9 6.25 0 0 1 259.5 15.0 L 242.5 15.0", fill: "none", stroke: AV_TEXT, strokeWidth: "5", strokeLinecap: "butt", strokeLinejoin: "miter" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M 251.42 16.94 L 254.58 13.06 L 271.00 26.45 L 271.00 30.00 L 267.44 30.00 Z", fill: AV_TEXT, stroke: "none" }),
+    /* @__PURE__ */ import_react.default.createElement("path", { d: "M 276.5 27.5 L 276.5 2.5 L 291.5 2.5 A 11 12.5 0 0 1 291.5 27.5 L 276.5 27.5", fill: "none", stroke: AV_TEXT, strokeWidth: "5", strokeLinecap: "butt", strokeLinejoin: "miter" })
+  );
+  var DiamondIndicator = ({ online, delay = "0s" }) => /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: online ? "Online" : "Offline" }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: {
+    width: 10,
+    height: 10,
+    flexShrink: 0,
+    bgcolor: online ? AV_GOLD : AV_MUTED,
+    transform: "rotate(45deg)",
+    boxShadow: online ? `0 0 8px 2px ${AV_GOLD_GLOW}` : "none",
+    transition: "all 0.3s",
+    animation: online ? "avicii-pulse 2.8s ease-in-out infinite" : "none",
+    animationDelay: delay,
+    cursor: "default"
+  } }));
+  var MetricBar = ({ label, value }) => {
+    const barRef = (0, import_react.useRef)(null);
+    const [cols, setCols] = (0, import_react.useState)(20);
+    (0, import_react.useEffect)(() => {
+      if (!barRef.current) return;
+      const obs = new ResizeObserver(() => {
+        if (barRef.current) setCols(Math.max(5, Math.floor(barRef.current.offsetWidth / 8) - 1));
+      });
+      obs.observe(barRef.current);
+      return () => obs.disconnect();
+    }, []);
+    const filled = Math.round(value * cols / 100);
+    const bar = "\u25B0".repeat(filled) + "\u25B1".repeat(cols - filled);
+    const color = value > 90 ? "#e84040" : AV_GOLD;
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { display: "grid", gridTemplateColumns: "30px 1fr 36px", alignItems: "center", paddingRight: "8px" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: AV_FONT, fontSize: "0.62rem", fontWeight: 600, color: AV_MUTED, letterSpacing: "1px", textTransform: "uppercase" } }, label), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { ref: barRef, sx: { fontFamily: "monospace", fontSize: "0.62rem", color, overflow: "hidden", whiteSpace: "nowrap" } }, bar), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: AV_FONT, fontSize: "0.62rem", fontWeight: 600, color, pl: 0.5, textAlign: "right" } }, Math.round(value), "%"));
+  };
+  var MiniCard = ({ label, value }) => /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: {
+    border: `1px solid ${AV_GOLD_DIM}`,
+    borderTop: `2px solid ${AV_GOLD}`,
+    px: 1.5,
+    py: 0.75,
+    minWidth: 70,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: AV_FONT, fontSize: "1rem", fontWeight: 700, color: AV_TEXT, lineHeight: 1.2 } }, value), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: AV_FONT, fontSize: "0.58rem", fontWeight: 600, color: AV_MUTED, letterSpacing: "1.5px", textTransform: "uppercase", lineHeight: 1.3 } }, label));
+  var Avicii = (props) => {
+    (0, import_react.useEffect)(() => {
+      const fontId = "avicii-oswald-font";
+      if (!document.getElementById(fontId)) {
+        const link = document.createElement("link");
+        link.id = fontId;
+        link.rel = "stylesheet";
+        link.href = "https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap";
+        document.head.appendChild(link);
+      }
+      const kfId = "avicii-keyframes";
+      if (!document.getElementById(kfId)) {
+        const style = document.createElement("style");
+        style.id = kfId;
+        style.textContent = `@keyframes avicii-pulse {
+                0%, 100% { opacity: 0.25; box-shadow: none; }
+                50% { opacity: 1; box-shadow: 0 0 10px 3px rgba(201,162,39,0.5); }
+            }`;
+        document.head.appendChild(style);
+      }
+      return () => {
+        document.getElementById("avicii-keyframes")?.remove();
+      };
+    }, []);
+    const containerRef = (0, import_react.useRef)(null);
+    const [containerHeight, setContainerHeight] = (0, import_react.useState)(0);
+    (0, import_react.useEffect)(() => {
+      const obs = new ResizeObserver(() => {
+        if (!containerRef.current) return;
+        const { top } = containerRef.current.getBoundingClientRect();
+        setContainerHeight(window.innerHeight - top);
+      });
+      obs.observe(document.body);
+      return () => obs.disconnect();
+    }, [containerRef.current]);
+    const [clusterMetrics, setClusterMetrics] = (0, import_react.useState)({});
+    (0, import_react.useEffect)(() => {
+      if (!props.getClusterMetrics) return;
+      const fetchAll = () => props.clusters.forEach(
+        (c) => props.getClusterMetrics(c.name).then((m) => {
+          if (m) setClusterMetrics((p) => ({ ...p, [c.name]: m }));
+        })
+      );
+      fetchAll();
+      const t = setInterval(fetchAll, POLL_MS);
+      return () => clearInterval(t);
+    }, [props.clusters, props.getClusterMetrics]);
+    const [clusterEvents, setClusterEvents] = (0, import_react.useState)({});
+    (0, import_react.useEffect)(() => {
+      if (!props.getClusterEvents) return;
+      const fetchAll = () => props.clusters.forEach(
+        (c) => props.getClusterEvents(c.name, EVENTS_LIMIT).then((evts) => setClusterEvents((p) => ({ ...p, [c.name]: evts })))
+      );
+      fetchAll();
+      const t = setInterval(fetchAll, POLL_MS);
+      return () => clearInterval(t);
+    }, [props.clusters, props.getClusterEvents]);
+    const launchMagnify = (name) => props.onHomepageSelectTab({ name, description: "", channel: "magnify", channelObject: { clusterName: name, view: "cluster", namespace: "", group: "", pod: "", container: "" } });
+    const launchTopology = (name) => props.onHomepageSelectTab({ name, description: "", channel: "topology", channelObject: { clusterName: name, view: "cluster", namespace: "", group: "", pod: "", container: "" } });
+    const hasMagnify = props.frontChannels.has("magnify");
+    const hasTopology = props.frontChannels.has("topology");
+    const magnifyClass = props.frontChannels.get("magnify");
+    const magnifyIcon = magnifyClass ? new magnifyClass().getChannelIcon() : null;
+    const topologyClass = props.frontChannels.get("topology");
+    const topologyIcon = topologyClass ? new topologyClass().getChannelIcon() : /* @__PURE__ */ import_react.default.createElement(import_icons_material.AccountTree, null);
+    const cardHeight = containerHeight > 0 ? Math.floor((containerHeight - 72 - 24 * 2 - 24) / 2) - 4 : 280;
+    const avBtnSx = {
+      borderRadius: 0,
+      fontFamily: AV_FONT,
+      fontWeight: 700,
+      fontSize: "0.65rem",
+      letterSpacing: "2px",
+      textTransform: "uppercase",
+      borderColor: AV_GOLD_DIM,
+      color: AV_MUTED,
+      "&:not(.Mui-disabled)": { borderColor: AV_GOLD_DIM, color: AV_TEXT },
+      "&:not(.Mui-disabled):hover": {
+        borderColor: AV_GOLD,
+        color: AV_GOLD,
+        bgcolor: "rgba(201,162,39,0.06)",
+        boxShadow: `0 0 10px ${AV_GOLD_GLOW}`
+      }
+    };
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { ref: containerRef, sx: {
+      position: "relative",
+      width: "100%",
+      height: `${containerHeight}px`,
+      overflow: "hidden",
+      bgcolor: AV_BG,
+      backgroundImage: TRIANGLE_BG,
+      backgroundSize: "160px 60px"
+    } }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { position: "absolute", inset: 0, overflowY: "auto" } }, /* @__PURE__ */ import_react.default.createElement(
+      import_material.Stack,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        spacing: 2.5,
+        sx: { pt: 2, pb: 1.5, pl: 3, borderBottom: `1px solid ${AV_GOLD_DIM}`, bgcolor: AV_BG }
+      },
+      /* @__PURE__ */ import_react.default.createElement(AviciiLogo, { size: 40 }),
+      /* @__PURE__ */ import_react.default.createElement(AviciiWordmark, null)
+    ), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { p: 3, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 3 } }, props.clusters.map((cluster, idx) => {
+      const metrics = clusterMetrics[cluster.name];
+      const clusterChannelIds = new Set((cluster.kwirthData?.channels ?? []).map((ch) => ch.id));
+      const clusterHasMagnify = hasMagnify && clusterChannelIds.has("magnify");
+      const clusterHasTopology = hasTopology && clusterChannelIds.has("topology");
+      return /* @__PURE__ */ import_react.default.createElement(import_material.Card, { key: cluster.name, sx: {
+        bgcolor: AV_CARD,
+        borderRadius: 0,
+        border: `1px solid ${AV_GOLD_DIM}`,
+        borderTop: `2px solid ${AV_GOLD}`,
+        height: cardHeight,
+        overflow: "hidden",
+        backgroundImage: "none",
+        position: "relative",
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          right: 0,
+          width: 0,
+          height: 0,
+          borderStyle: "solid",
+          borderWidth: "0 22px 22px 0",
+          borderColor: `transparent ${AV_GOLD} transparent transparent`
+        }
+      } }, /* @__PURE__ */ import_react.default.createElement(import_material.CardContent, { sx: { height: "100%", p: "12px !important" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", justifyContent: "space-between", sx: { height: "100%" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.75 }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", alignItems: "center", spacing: 1 }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: {
+        fontFamily: AV_FONT,
+        fontWeight: 700,
+        fontSize: "0.9rem",
+        letterSpacing: "3px",
+        textTransform: "uppercase",
+        color: AV_TEXT,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        flex: 1
+      } }, cluster.name), /* @__PURE__ */ import_react.default.createElement(DiamondIndicator, { online: !!metrics, delay: `${idx * 0.7 % 2.5}s` })), /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: {
+        fontFamily: AV_FONT,
+        fontSize: "0.7rem",
+        color: AV_MUTED,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      } }, cluster.url), metrics && /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.25 }, /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "CPU", value: metrics.cpu }), /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "MEM", value: metrics.memory }), /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "POD", value: metrics.maxPods > 0 ? metrics.pods / metrics.maxPods * 100 : 0 }))), metrics && /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1, sx: { justifyContent: "center" } }, /* @__PURE__ */ import_react.default.createElement(MiniCard, { label: "vCPUs", value: metrics.vcpus != null ? String(metrics.vcpus) : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniCard, { label: "RAM", value: metrics.totalMemoryBytes != null ? `${(metrics.totalMemoryBytes / 1073741824).toFixed(0)}G` : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniCard, { label: "Pods", value: metrics.pods ? String(metrics.pods) : "--" })), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, (cluster.kwirthData?.channels ?? []).map((ch) => {
+        const cls = props.frontChannels.get(ch.id);
+        if (!cls) return null;
+        const icon = new cls().getChannelIcon();
+        return /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { key: ch.id, title: ch.id }, import_react.default.cloneElement(icon, { fontSize: "small", sx: { color: AV_GOLD, opacity: 0.55 } }));
+      })), /* @__PURE__ */ import_react.default.createElement(
+        import_material.Button,
+        {
+          variant: "outlined",
+          size: "small",
+          disabled: !clusterHasMagnify,
+          startIcon: magnifyIcon,
+          onClick: () => launchMagnify(cluster.name),
+          sx: avBtnSx
+        },
+        "EXPLORE"
+      )))));
+    }), props.clusters.length === 0 && /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: AV_FONT, fontSize: "1rem", fontWeight: 600, color: AV_GOLD, letterSpacing: "4px", textTransform: "uppercase", p: 2, opacity: 0.6 } }, "\u25B2 No clusters connected"))));
+  };
+
+  // src/front/index.ts
+  window.__kwirth_homepages__["avicii"] = {
+    homepageId: "avicii",
+    displayName: "Avicii",
+    Component: Avicii
+  };
+})();

package/package.json

@@ -0,0 +1,7 @@
+{
+  "id": "avicii",
+  "name": "@kwirthmagnify/kwirth-homepage-avicii",
+  "displayName": "Avicii",
+  "version": "0.1.1",
+  "description": "Avicii-inspired homepage — warm gold on black, geometric triangle motifs, sharp Oswald typography, and live cluster metrics."
+}