@steez-ui/ui 0.1.6 → 0.1.7

package/README.md

@@ -101,9 +101,9 @@ GitHub Actions mirror the same CI, npm publish, and Cloudflare Pages deploy path
 
 ## Current Packages
 
-- `@steez-ui/theme@0.1.6`
-- `@steez-ui/icons@0.1.6`
-- `@steez-ui/ui@0.1.6`
+- `@steez-ui/theme@0.1.7`
+- `@steez-ui/icons@0.1.7`
+- `@steez-ui/ui@0.1.7`
 
 ## External Setup
 

package/dist/components/LoadingOverlayCrystalline.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface LoadingOverlayCrystallineProps {
+    message: string;
+    subtext?: string;
+    icon?: React.ReactNode;
+    showEffect?: boolean;
+}
+export declare function LoadingOverlayCrystalline({ message, subtext, icon, showEffect, }: LoadingOverlayCrystallineProps): import("react/jsx-runtime").JSX.Element;
+export default LoadingOverlayCrystalline;
+//# sourceMappingURL=LoadingOverlayCrystalline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlayCrystalline.d.ts","sourceRoot":"","sources":["../../src/components/LoadingOverlayCrystalline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,OAAO,EACP,IAAI,EACJ,UAAkB,GACnB,EAAE,8BAA8B,2CAYhC;AAED,eAAe,yBAAyB,CAAC"}

package/dist/components/LoadingOverlayCrystalline.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./LoadingOverlayCrystalline.module.css";
+export function LoadingOverlayCrystalline({ message, subtext, icon, showEffect = false, }) {
+    return (_jsx("div", { className: `${styles.root} ${showEffect ? "" : styles.noEffect}`.trim(), children: _jsxs("div", { className: styles.card, children: [icon ? _jsx("span", { className: styles.icon, children: icon }) : null, _jsxs("div", { children: [_jsx("div", { children: message }), subtext ? _jsx("div", { className: styles.subtext, children: subtext }) : null] })] }) }));
+}
+export default LoadingOverlayCrystalline;
+//# sourceMappingURL=LoadingOverlayCrystalline.js.map

package/dist/components/LoadingOverlayCrystalline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlayCrystalline.js","sourceRoot":"","sources":["../../src/components/LoadingOverlayCrystalline.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,wCAAwC,CAAC;AAS5D,MAAM,UAAU,yBAAyB,CAAC,EACxC,OAAO,EACP,OAAO,EACP,IAAI,EACJ,UAAU,GAAG,KAAK,GACa;IAC/B,OAAO,CACL,cAAK,SAAS,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,YAC1E,eAAK,SAAS,EAAE,MAAM,CAAC,IAAI,aACxB,IAAI,CAAC,CAAC,CAAC,eAAM,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,IAAI,GAAQ,CAAC,CAAC,CAAC,IAAI,EAC1D,0BACE,wBAAM,OAAO,GAAO,EACnB,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAO,CAAC,CAAC,CAAC,IAAI,IAC7D,IACF,GACF,CACP,CAAC;AACJ,CAAC;AAED,eAAe,yBAAyB,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./LoadingOverlayCrystalline.module.css\";\n\nexport interface LoadingOverlayCrystallineProps {\n  message: string;\n  subtext?: string;\n  icon?: React.ReactNode;\n  showEffect?: boolean;\n}\n\nexport function LoadingOverlayCrystalline({\n  message,\n  subtext,\n  icon,\n  showEffect = false,\n}: LoadingOverlayCrystallineProps) {\n  return (\n    <div className={`${styles.root} ${showEffect ? \"\" : styles.noEffect}`.trim()}>\n      <div className={styles.card}>\n        {icon ? <span className={styles.icon}>{icon}</span> : null}\n        <div>\n          <div>{message}</div>\n          {subtext ? <div className={styles.subtext}>{subtext}</div> : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default LoadingOverlayCrystalline;\n"]}

package/dist/components/LoadingOverlayCrystalline.module.css

@@ -0,0 +1,39 @@
+.root {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-viewer-quick-tools);
+  background: transparent;
+}
+
+.noEffect {
+  background: transparent;
+}
+
+.card {
+  position: relative;
+  z-index: 20;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
+  border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
+  border-radius: 10px;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.icon {
+  opacity: 0.9;
+}
+
+.subtext {
+  margin-top: 2px;
+  color: color-mix(in srgb, var(--text-secondary) 92%, transparent);
+  font-size: 12px;
+  font-weight: 500;
+}

package/dist/components/LoadingScreen.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface LoadingScreenProps {
+    progress: number;
+    message?: string;
+    logo?: React.ReactNode;
+    title?: React.ReactNode;
+    audioFeedback?: boolean;
+    fullscreen?: boolean;
+    themeMode?: "auto" | "light" | "dark";
+}
+export declare function LoadingScreen({ progress, message, logo, title, audioFeedback, fullscreen, themeMode, }: LoadingScreenProps): import("react/jsx-runtime").JSX.Element;
+export type LoadingStage = "init" | "auth" | "agent" | "config" | "ready";
+export declare function useLoadingProgress(isLoading: boolean, _phase?: string, stage?: LoadingStage): {
+    progress: number;
+    message: string;
+};
+//# sourceMappingURL=LoadingScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingScreen.d.ts","sourceRoot":"","sources":["../../src/components/LoadingScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;CACvC;AAmCD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAiB,EACjB,aAAqB,EACrB,UAAiB,EACjB,SAAkB,GACnB,EAAE,kBAAkB,2CAmPpB;AAED,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAkB1E,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,OAAO,EAClB,MAAM,CAAC,EAAE,MAAM,EACf,KAAK,GAAE,YAAqB;;;EAgD7B"}

package/dist/components/LoadingScreen.js

@@ -0,0 +1,246 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { LightCrossIcon } from "@steez-ui/icons";
+import { LoadingProgressBar, LOADING_PROGRESS_SEGMENT_COUNT, } from "./LoadingProgressBar.js";
+import styles from "./LoadingScreen.module.css";
+function randomFloat() {
+    return Math.random();
+}
+function resolveIsLightMode(themeMode) {
+    if (themeMode === "light") {
+        return true;
+    }
+    if (themeMode === "dark") {
+        return false;
+    }
+    if (typeof window === "undefined") {
+        return false;
+    }
+    return (document.documentElement.getAttribute("data-theme") === "light" ||
+        window.localStorage.getItem("theme") === "light");
+}
+export function LoadingScreen({ progress, message, logo, title = "LOADING", audioFeedback = false, fullscreen = true, themeMode = "auto", }) {
+    const [displayProgress, setDisplayProgress] = React.useState(0);
+    const [ellipsisCount, setEllipsisCount] = React.useState(0);
+    const [crosses, setCrosses] = React.useState([]);
+    const [bounds, setBounds] = React.useState({ width: 0, height: 0 });
+    const prevFilledBars = React.useRef(0);
+    const crossIdRef = React.useRef(0);
+    const isLoadingRef = React.useRef(true);
+    const audioCtxRef = React.useRef(null);
+    const audioEnabledRef = React.useRef(false);
+    const containerRef = React.useRef(null);
+    const updateBounds = React.useCallback(() => {
+        const nextWidth = containerRef.current?.clientWidth || window.innerWidth || 0;
+        const nextHeight = containerRef.current?.clientHeight || window.innerHeight || 0;
+        setBounds((current) => {
+            if (current.width === nextWidth && current.height === nextHeight) {
+                return current;
+            }
+            return {
+                width: nextWidth,
+                height: nextHeight,
+            };
+        });
+    }, []);
+    const spawnCross = React.useCallback(() => {
+        if (!isLoadingRef.current || typeof window === "undefined") {
+            return;
+        }
+        const tilt = (randomFloat() - 0.5) * 6;
+        const availableWidth = Math.max(bounds.width || window.innerWidth, 160);
+        const nextCross = {
+            id: crossIdRef.current += 1,
+            x: randomFloat() * Math.max(availableWidth - 120, 24),
+            rotation: tilt,
+            scale: 0.4 + randomFloat() * 0.4,
+            groundOffset: randomFloat() * 30,
+            delay: 0,
+            opacity: 0.4 + randomFloat() * 0.3,
+        };
+        setCrosses((current) => [...current.slice(-17), nextCross]);
+    }, [bounds.width]);
+    React.useEffect(() => {
+        if (typeof window === "undefined") {
+            return undefined;
+        }
+        updateBounds();
+        window.addEventListener("resize", updateBounds);
+        const observer = typeof ResizeObserver === "undefined" || !containerRef.current
+            ? null
+            : new ResizeObserver(() => {
+                updateBounds();
+            });
+        if (observer && containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+        return () => {
+            window.removeEventListener("resize", updateBounds);
+            observer?.disconnect();
+        };
+    }, [updateBounds]);
+    React.useEffect(() => {
+        isLoadingRef.current = true;
+        const scheduleNextCross = () => {
+            const delay = 400 + randomFloat() * 300;
+            return setTimeout(() => {
+                spawnCross();
+                if (isLoadingRef.current) {
+                    scheduleNextCross();
+                }
+            }, delay);
+        };
+        const timeoutId = scheduleNextCross();
+        return () => {
+            clearTimeout(timeoutId);
+            isLoadingRef.current = false;
+        };
+    }, [spawnCross]);
+    React.useEffect(() => {
+        if (!audioFeedback) {
+            return undefined;
+        }
+        const enableAudio = async () => {
+            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+            if (!AudioContextClass) {
+                return;
+            }
+            try {
+                const ctx = audioCtxRef.current ?? new AudioContextClass();
+                audioCtxRef.current = ctx;
+                if (ctx.state === "suspended") {
+                    await ctx.resume();
+                }
+                audioEnabledRef.current = ctx.state === "running";
+            }
+            catch {
+                audioEnabledRef.current = false;
+            }
+        };
+        window.addEventListener("pointerdown", enableAudio, {
+            once: true,
+            passive: true,
+        });
+        window.addEventListener("keydown", enableAudio, { once: true });
+        return () => {
+            window.removeEventListener("pointerdown", enableAudio);
+            window.removeEventListener("keydown", enableAudio);
+            if (audioCtxRef.current) {
+                void audioCtxRef.current.close().catch(() => undefined);
+                audioCtxRef.current = null;
+            }
+            audioEnabledRef.current = false;
+        };
+    }, [audioFeedback]);
+    React.useEffect(() => {
+        if (!audioFeedback) {
+            return undefined;
+        }
+        const playBeep = () => {
+            const audioCtx = audioCtxRef.current;
+            if (!audioCtx || !audioEnabledRef.current) {
+                return;
+            }
+            const osc = audioCtx.createOscillator();
+            const gain = audioCtx.createGain();
+            osc.type = "triangle";
+            osc.frequency.value = 523.25;
+            gain.gain.setValueAtTime(0.15, audioCtx.currentTime);
+            gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.08);
+            osc.connect(gain);
+            gain.connect(audioCtx.destination);
+            osc.start();
+            osc.stop(audioCtx.currentTime + 0.08);
+        };
+        const filledBars = Math.round((displayProgress / 100) * LOADING_PROGRESS_SEGMENT_COUNT);
+        if (filledBars > prevFilledBars.current) {
+            playBeep();
+            prevFilledBars.current = filledBars;
+        }
+        return undefined;
+    }, [audioFeedback, displayProgress]);
+    React.useEffect(() => {
+        const ellipsisInterval = setInterval(() => {
+            setEllipsisCount((count) => (count + 1) % 4);
+        }, 400);
+        return () => clearInterval(ellipsisInterval);
+    }, []);
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            setDisplayProgress(progress);
+        }, 50);
+        return () => clearTimeout(timeout);
+    }, [progress]);
+    const ellipsis = ".".repeat(ellipsisCount);
+    const cleanMessage = message ? message.replace(/\.+$/, "") : "";
+    const isLightMode = resolveIsLightMode(themeMode);
+    const screenWidth = bounds.width || (typeof window === "undefined" ? 0 : window.innerWidth);
+    const screenHeight = bounds.height || (typeof window === "undefined" ? 0 : window.innerHeight);
+    return (_jsxs("div", { ref: containerRef, className: `${styles.screen} ${fullscreen ? styles.fullscreen : styles.contained} ${isLightMode ? styles.lightTheme : styles.darkTheme}`.trim(), style: {
+            "--screen-height": `${screenHeight}px`,
+            "--screen-width": `${screenWidth}px`,
+        }, children: [crosses.map((cross) => (_jsx("div", { className: styles.crossContainer, style: {
+                    "--cross-left": `${cross.x}px`,
+                    "--cross-delay": `${cross.delay}ms`,
+                    "--rotation": `${cross.rotation}deg`,
+                    "--ground": `${cross.groundOffset}%`,
+                    "--cross-scale": String(cross.scale),
+                    "--cross-opacity": String(cross.opacity),
+                }, onAnimationEnd: (event) => {
+                    if (event.animationName === "crossFall") {
+                        event.currentTarget.classList.add(styles.crossLanded);
+                    }
+                }, children: _jsx("div", { className: styles.crossSvg, children: _jsx(LightCrossIcon, { className: styles.crossShape }) }) }, cross.id))), _jsxs("div", { className: styles.centerStack, children: [logo ? _jsx("div", { className: styles.logoWrap, children: logo }) : null, _jsx("div", { className: styles.title, children: title })] }), _jsx(LoadingProgressBar, { progress: displayProgress, className: styles.progressRow }), _jsxs("div", { className: styles.footerMessage, children: [cleanMessage, ellipsis] })] }));
+}
+const STAGE_PROGRESS = {
+    init: 0,
+    auth: 25,
+    agent: 50,
+    config: 75,
+    ready: 100,
+};
+const STAGE_MESSAGES = {
+    init: "Initializing...",
+    auth: "Authenticating...",
+    agent: "Loading agent...",
+    config: "Loading configuration...",
+    ready: "Preparing interface...",
+};
+export function useLoadingProgress(isLoading, _phase, stage = "init") {
+    const [progress, setProgress] = React.useState(0);
+    const [currentMessage, setCurrentMessage] = React.useState("Initializing...");
+    const progressRef = React.useRef(0);
+    React.useEffect(() => {
+        progressRef.current = progress;
+    }, [progress]);
+    React.useEffect(() => {
+        if (!isLoading) {
+            setProgress(100);
+            progressRef.current = 100;
+            setCurrentMessage("Complete!");
+            return undefined;
+        }
+        const targetProgress = STAGE_PROGRESS[stage];
+        const targetMessage = STAGE_MESSAGES[stage];
+        setCurrentMessage(targetMessage);
+        const currentProgressSnapshot = progressRef.current;
+        const diff = targetProgress - currentProgressSnapshot;
+        const steps = 20;
+        const stepDuration = 100;
+        let step = 0;
+        const interval = setInterval(() => {
+            step += 1;
+            const easedStep = step / steps;
+            const easedProgress = diff * easedStep;
+            const nextProgress = Math.min(currentProgressSnapshot + easedProgress, targetProgress);
+            progressRef.current = nextProgress;
+            setProgress(nextProgress);
+            if (step >= steps) {
+                clearInterval(interval);
+            }
+        }, stepDuration);
+        return () => clearInterval(interval);
+    }, [isLoading, stage]);
+    return { progress, message: currentMessage };
+}
+//# sourceMappingURL=LoadingScreen.js.map

package/dist/components/LoadingScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingScreen.js","sourceRoot":"","sources":["../../src/components/LoadingScreen.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport { LightCrossIcon } from \"@steez-ui/icons\";\n\nimport {\n  LoadingProgressBar,\n  LOADING_PROGRESS_SEGMENT_COUNT,\n} from \"./LoadingProgressBar.js\";\nimport styles from \"./LoadingScreen.module.css\";\n\nexport interface LoadingScreenProps {\n  progress: number;\n  message?: string;\n  logo?: React.ReactNode;\n  title?: React.ReactNode;\n  audioFeedback?: boolean;\n  fullscreen?: boolean;\n  themeMode?: \"auto\" | \"light\" | \"dark\";\n}\n\ninterface Cross {\n  id: number;\n  x: number;\n  rotation: number;\n  scale: number;\n  groundOffset: number;\n  delay: number;\n  opacity: number;\n}\n\nfunction randomFloat() {\n  return Math.random();\n}\n\nfunction resolveIsLightMode(themeMode: LoadingScreenProps[\"themeMode\"]) {\n  if (themeMode === \"light\") {\n    return true;\n  }\n\n  if (themeMode === \"dark\") {\n    return false;\n  }\n\n  if (typeof window === \"undefined\") {\n    return false;\n  }\n\n  return (\n    document.documentElement.getAttribute(\"data-theme\") === \"light\" ||\n    window.localStorage.getItem(\"theme\") === \"light\"\n  );\n}\n\nexport function LoadingScreen({\n  progress,\n  message,\n  logo,\n  title = \"LOADING\",\n  audioFeedback = false,\n  fullscreen = true,\n  themeMode = \"auto\",\n}: LoadingScreenProps) {\n  const [displayProgress, setDisplayProgress] = React.useState(0);\n  const [ellipsisCount, setEllipsisCount] = React.useState(0);\n  const [crosses, setCrosses] = React.useState<Cross[]>([]);\n  const [bounds, setBounds] = React.useState({ width: 0, height: 0 });\n  const prevFilledBars = React.useRef(0);\n  const crossIdRef = React.useRef(0);\n  const isLoadingRef = React.useRef(true);\n  const audioCtxRef = React.useRef<AudioContext | null>(null);\n  const audioEnabledRef = React.useRef(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  const updateBounds = React.useCallback(() => {\n    const nextWidth =\n      containerRef.current?.clientWidth || window.innerWidth || 0;\n    const nextHeight =\n      containerRef.current?.clientHeight || window.innerHeight || 0;\n\n    setBounds((current) => {\n      if (current.width === nextWidth && current.height === nextHeight) {\n        return current;\n      }\n\n      return {\n        width: nextWidth,\n        height: nextHeight,\n      };\n    });\n  }, []);\n\n  const spawnCross = React.useCallback(() => {\n    if (!isLoadingRef.current || typeof window === \"undefined\") {\n      return;\n    }\n\n    const tilt = (randomFloat() - 0.5) * 6;\n    const availableWidth = Math.max(bounds.width || window.innerWidth, 160);\n    const nextCross: Cross = {\n      id: crossIdRef.current += 1,\n      x: randomFloat() * Math.max(availableWidth - 120, 24),\n      rotation: tilt,\n      scale: 0.4 + randomFloat() * 0.4,\n      groundOffset: randomFloat() * 30,\n      delay: 0,\n      opacity: 0.4 + randomFloat() * 0.3,\n    };\n    setCrosses((current) => [...current.slice(-17), nextCross]);\n  }, [bounds.width]);\n\n  React.useEffect(() => {\n    if (typeof window === \"undefined\") {\n      return undefined;\n    }\n\n    updateBounds();\n    window.addEventListener(\"resize\", updateBounds);\n\n    const observer =\n      typeof ResizeObserver === \"undefined\" || !containerRef.current\n        ? null\n        : new ResizeObserver(() => {\n            updateBounds();\n          });\n\n    if (observer && containerRef.current) {\n      observer.observe(containerRef.current);\n    }\n\n    return () => {\n      window.removeEventListener(\"resize\", updateBounds);\n      observer?.disconnect();\n    };\n  }, [updateBounds]);\n\n  React.useEffect(() => {\n    isLoadingRef.current = true;\n\n    const scheduleNextCross = () => {\n      const delay = 400 + randomFloat() * 300;\n      return setTimeout(() => {\n        spawnCross();\n        if (isLoadingRef.current) {\n          scheduleNextCross();\n        }\n      }, delay);\n    };\n\n    const timeoutId = scheduleNextCross();\n    return () => {\n      clearTimeout(timeoutId);\n      isLoadingRef.current = false;\n    };\n  }, [spawnCross]);\n\n  React.useEffect(() => {\n    if (!audioFeedback) {\n      return undefined;\n    }\n\n    const enableAudio = async () => {\n      const AudioContextClass =\n        window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;\n      if (!AudioContextClass) {\n        return;\n      }\n\n      try {\n        const ctx = audioCtxRef.current ?? new AudioContextClass();\n        audioCtxRef.current = ctx;\n        if (ctx.state === \"suspended\") {\n          await ctx.resume();\n        }\n        audioEnabledRef.current = ctx.state === \"running\";\n      } catch {\n        audioEnabledRef.current = false;\n      }\n    };\n\n    window.addEventListener(\"pointerdown\", enableAudio, {\n      once: true,\n      passive: true,\n    });\n    window.addEventListener(\"keydown\", enableAudio, { once: true });\n\n    return () => {\n      window.removeEventListener(\"pointerdown\", enableAudio);\n      window.removeEventListener(\"keydown\", enableAudio);\n      if (audioCtxRef.current) {\n        void audioCtxRef.current.close().catch(() => undefined);\n        audioCtxRef.current = null;\n      }\n      audioEnabledRef.current = false;\n    };\n  }, [audioFeedback]);\n\n  React.useEffect(() => {\n    if (!audioFeedback) {\n      return undefined;\n    }\n\n    const playBeep = () => {\n      const audioCtx = audioCtxRef.current;\n      if (!audioCtx || !audioEnabledRef.current) {\n        return;\n      }\n\n      const osc = audioCtx.createOscillator();\n      const gain = audioCtx.createGain();\n      osc.type = \"triangle\";\n      osc.frequency.value = 523.25;\n      gain.gain.setValueAtTime(0.15, audioCtx.currentTime);\n      gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.08);\n      osc.connect(gain);\n      gain.connect(audioCtx.destination);\n      osc.start();\n      osc.stop(audioCtx.currentTime + 0.08);\n    };\n\n    const filledBars = Math.round(\n      (displayProgress / 100) * LOADING_PROGRESS_SEGMENT_COUNT,\n    );\n    if (filledBars > prevFilledBars.current) {\n      playBeep();\n      prevFilledBars.current = filledBars;\n    }\n\n    return undefined;\n  }, [audioFeedback, displayProgress]);\n\n  React.useEffect(() => {\n    const ellipsisInterval = setInterval(() => {\n      setEllipsisCount((count) => (count + 1) % 4);\n    }, 400);\n    return () => clearInterval(ellipsisInterval);\n  }, []);\n\n  React.useEffect(() => {\n    const timeout = setTimeout(() => {\n      setDisplayProgress(progress);\n    }, 50);\n    return () => clearTimeout(timeout);\n  }, [progress]);\n\n  const ellipsis = \".\".repeat(ellipsisCount);\n  const cleanMessage = message ? message.replace(/\\.+$/, \"\") : \"\";\n  const isLightMode = resolveIsLightMode(themeMode);\n  const screenWidth =\n    bounds.width || (typeof window === \"undefined\" ? 0 : window.innerWidth);\n  const screenHeight =\n    bounds.height || (typeof window === \"undefined\" ? 0 : window.innerHeight);\n\n  return (\n    <div\n      ref={containerRef}\n      className={`${styles.screen} ${fullscreen ? styles.fullscreen : styles.contained} ${\n        isLightMode ? styles.lightTheme : styles.darkTheme\n      }`.trim()}\n      style={\n        {\n          \"--screen-height\": `${screenHeight}px`,\n          \"--screen-width\": `${screenWidth}px`,\n        } as React.CSSProperties\n      }\n    >\n      {crosses.map((cross) => (\n        <div\n          key={cross.id}\n          className={styles.crossContainer}\n          style={\n            {\n              \"--cross-left\": `${cross.x}px`,\n              \"--cross-delay\": `${cross.delay}ms`,\n              \"--rotation\": `${cross.rotation}deg`,\n              \"--ground\": `${cross.groundOffset}%`,\n              \"--cross-scale\": String(cross.scale),\n              \"--cross-opacity\": String(cross.opacity),\n            } as React.CSSProperties\n          }\n          onAnimationEnd={(event) => {\n            if (event.animationName === \"crossFall\") {\n              event.currentTarget.classList.add(styles.crossLanded);\n            }\n          }}\n        >\n          <div className={styles.crossSvg}>\n            <LightCrossIcon className={styles.crossShape} />\n          </div>\n        </div>\n      ))}\n\n      <div className={styles.centerStack}>\n        {logo ? <div className={styles.logoWrap}>{logo}</div> : null}\n        <div className={styles.title}>{title}</div>\n      </div>\n\n      <LoadingProgressBar progress={displayProgress} className={styles.progressRow} />\n\n      <div className={styles.footerMessage}>\n        {cleanMessage}\n        {ellipsis}\n      </div>\n    </div>\n  );\n}\n\nexport type LoadingStage = \"init\" | \"auth\" | \"agent\" | \"config\" | \"ready\";\n\nconst STAGE_PROGRESS: Record<LoadingStage, number> = {\n  init: 0,\n  auth: 25,\n  agent: 50,\n  config: 75,\n  ready: 100,\n};\n\nconst STAGE_MESSAGES: Record<LoadingStage, string> = {\n  init: \"Initializing...\",\n  auth: \"Authenticating...\",\n  agent: \"Loading agent...\",\n  config: \"Loading configuration...\",\n  ready: \"Preparing interface...\",\n};\n\nexport function useLoadingProgress(\n  isLoading: boolean,\n  _phase?: string,\n  stage: LoadingStage = \"init\",\n) {\n  const [progress, setProgress] = React.useState(0);\n  const [currentMessage, setCurrentMessage] = React.useState(\"Initializing...\");\n  const progressRef = React.useRef(0);\n\n  React.useEffect(() => {\n    progressRef.current = progress;\n  }, [progress]);\n\n  React.useEffect(() => {\n    if (!isLoading) {\n      setProgress(100);\n      progressRef.current = 100;\n      setCurrentMessage(\"Complete!\");\n      return undefined;\n    }\n\n    const targetProgress = STAGE_PROGRESS[stage];\n    const targetMessage = STAGE_MESSAGES[stage];\n    setCurrentMessage(targetMessage);\n\n    const currentProgressSnapshot = progressRef.current;\n    const diff = targetProgress - currentProgressSnapshot;\n    const steps = 20;\n    const stepDuration = 100;\n    let step = 0;\n\n    const interval = setInterval(() => {\n      step += 1;\n      const easedStep = step / steps;\n      const easedProgress = diff * easedStep;\n      const nextProgress = Math.min(\n        currentProgressSnapshot + easedProgress,\n        targetProgress,\n      );\n      progressRef.current = nextProgress;\n      setProgress(nextProgress);\n\n      if (step >= steps) {\n        clearInterval(interval);\n      }\n    }, stepDuration);\n\n    return () => clearInterval(interval);\n  }, [isLoading, stage]);\n\n  return { progress, message: currentMessage };\n}\n"]}

package/dist/components/LoadingScreen.module.css

@@ -0,0 +1,108 @@
+.screen {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  overflow: hidden;
+  font-family: var(--font-primary);
+}
+
+.fullscreen {
+  position: fixed;
+}
+
+.contained {
+  position: absolute;
+  border: 1px solid var(--border-color);
+}
+
+.lightTheme {
+  background: #fafbfc;
+  color: #1a1a1a;
+}
+
+.darkTheme {
+  background: #0a0a0a;
+  color: #cbcbcc;
+}
+
+@keyframes crossFall {
+  0% {
+    transform: translateY(-450px) rotate(var(--rotation));
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateY(calc(var(--screen-height, 100vh) - var(--ground) - 50px))
+      rotate(var(--rotation));
+    opacity: 1;
+  }
+}
+
+.crossContainer {
+  position: absolute;
+  top: 0;
+  left: var(--cross-left, 0px);
+  z-index: 1;
+  will-change: transform;
+  animation: crossFall 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  animation-delay: var(--cross-delay, 0ms);
+}
+
+.crossSvg {
+  transform: scale(var(--cross-scale, 1));
+  transform-origin: center top;
+  opacity: var(--cross-opacity, 0.6);
+}
+
+.crossLanded .crossSvg {
+  opacity: 1 !important;
+}
+
+.crossShape {
+  color: currentColor;
+}
+
+.centerStack {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.logoWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  font-size: clamp(24px, 8vw, 48px);
+  font-weight: 700;
+  letter-spacing: 8px;
+}
+
+.progressRow {
+  position: relative;
+  z-index: 10;
+}
+
+.footerMessage {
+  position: absolute;
+  right: 40px;
+  bottom: 40px;
+  z-index: 10;
+  opacity: 0.5;
+  font-family: var(--font-mono);
+  font-size: 14px;
+}

package/dist/components/OverlayButton.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface OverlayButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+}
+export declare function OverlayButton({ active, className, ...props }: OverlayButtonProps): import("react/jsx-runtime").JSX.Element;
+export default OverlayButton;
+//# sourceMappingURL=OverlayButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayButton.d.ts","sourceRoot":"","sources":["../../src/components/OverlayButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,SAAc,EACd,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAKpB;AAED,eAAe,aAAa,CAAC"}

package/dist/components/OverlayButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from "./OverlayButton.module.css";
+export function OverlayButton({ active, className = "", ...props }) {
+    const classes = `${styles.overlayBtn} ${active ? styles.overlayBtnActive : ""} ${className}`.trim();
+    return _jsx("button", { type: "button", className: classes, ...props });
+}
+export default OverlayButton;
+//# sourceMappingURL=OverlayButton.js.map

package/dist/components/OverlayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayButton.js","sourceRoot":"","sources":["../../src/components/OverlayButton.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAOhD,MAAM,UAAU,aAAa,CAAC,EAC5B,MAAM,EACN,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACW;IACnB,MAAM,OAAO,GAAG,GAAG,MAAM,CAAC,UAAU,IAClC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACrC,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC;IACvB,OAAO,iBAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACjE,CAAC;AAED,eAAe,aAAa,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./OverlayButton.module.css\";\n\nexport interface OverlayButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  active?: boolean;\n}\n\nexport function OverlayButton({\n  active,\n  className = \"\",\n  ...props\n}: OverlayButtonProps) {\n  const classes = `${styles.overlayBtn} ${\n    active ? styles.overlayBtnActive : \"\"\n  } ${className}`.trim();\n  return <button type=\"button\" className={classes} {...props} />;\n}\n\nexport default OverlayButton;\n"]}

package/dist/components/OverlayButton.module.css

@@ -0,0 +1,32 @@
+.overlayBtn {
+  width: var(--overlay-btn-size, 2rem);
+  height: var(--overlay-btn-size, 2rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-color);
+  border-radius: var(--overlay-btn-radius, 0.5rem);
+  background: color-mix(in srgb, var(--bg-primary) 72%, transparent);
+  backdrop-filter: blur(2px);
+  color: var(--text-secondary);
+  cursor: pointer;
+  opacity: 0.8;
+  transition:
+    opacity 150ms ease,
+    background-color 150ms ease,
+    color 150ms ease,
+    border-color 150ms ease;
+}
+
+.overlayBtn:hover {
+  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
+  color: var(--text-primary);
+  opacity: 1;
+}
+
+.overlayBtnActive,
+.overlayBtnActive:hover {
+  background: var(--text-primary);
+  border-color: var(--text-primary);
+  color: var(--bg-primary);
+}

package/dist/components/PixelTooltip.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface PixelTooltipProps {
+    content: string;
+    children: React.ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+}
+export declare function PixelTooltip({ content, children, position, delay, }: PixelTooltipProps): import("react/jsx-runtime").JSX.Element;
+export default PixelTooltip;
+//# sourceMappingURL=PixelTooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PixelTooltip.d.ts","sourceRoot":"","sources":["../../src/components/PixelTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,KAAW,GACZ,EAAE,iBAAiB,2CAgEnB;AAED,eAAe,YAAY,CAAC"}

package/dist/components/PixelTooltip.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import styles from "./PixelTooltip.module.css";
+export function PixelTooltip({ content, children, position = "top", delay = 200, }) {
+    const [isVisible, setIsVisible] = React.useState(false);
+    const [coords, setCoords] = React.useState({ x: 0, y: 0, width: 0 });
+    const timeoutRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const handleMouseEnter = React.useCallback(() => {
+        timeoutRef.current = setTimeout(() => {
+            if (triggerRef.current) {
+                const rect = triggerRef.current.getBoundingClientRect();
+                setCoords({
+                    x: rect.left,
+                    y: rect.bottom,
+                    width: rect.width,
+                });
+            }
+            setIsVisible(true);
+        }, delay);
+    }, [delay]);
+    const handleMouseLeave = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsVisible(false);
+    }, []);
+    React.useEffect(() => () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: styles.trigger, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: children }), isVisible ? (_jsx("div", { className: `${styles.tooltip} ${styles[position]} ${styles.show}`.trim(), style: {
+                    left: `${coords.x + 5}px`,
+                    top: `${coords.y + 8}px`,
+                    width: `${Math.max(coords.width - 20, 60)}px`,
+                }, children: _jsx("div", { className: styles.pixelContainer, children: _jsx("div", { className: styles.content, children: content }) }) })) : null] }));
+}
+export default PixelTooltip;
+//# sourceMappingURL=PixelTooltip.js.map

package/dist/components/PixelTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelTooltip.js","sourceRoot":"","sources":["../../src/components/PixelTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAS/C,MAAM,UAAU,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,GAAG,GACO;IAClB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IACrE,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAuC,IAAI,CAAC,CAAC;IAC5E,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEtD,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC9C,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACnC,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;gBACvB,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;gBACxD,SAAS,CAAC;oBACR,CAAC,EAAE,IAAI,CAAC,IAAI;oBACZ,CAAC,EAAE,IAAI,CAAC,MAAM;oBACd,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,CAAC,CAAC;YACL,CAAC;YACD,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,EAAE,KAAK,CAAC,CAAC;IACZ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC9C,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YACjC,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,CAAC;QACD,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,KAAK,CAAC,SAAS,CACb,GAAG,EAAE,CAAC,GAAG,EAAE;QACT,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC;IACH,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CACL,8BACE,cACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,YAE7B,QAAQ,GACL,EAEL,SAAS,CAAC,CAAC,CAAC,CACX,cACE,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,EACxE,KAAK,EAAE;oBACL,IAAI,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI;oBACzB,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,IAAI;oBACxB,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,EAAE,CAAC,IAAI;iBAC9C,YAED,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YACnC,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAAG,OAAO,GAAO,GAC3C,GACF,CACP,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,YAAY,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./PixelTooltip.module.css\";\n\nexport interface PixelTooltipProps {\n  content: string;\n  children: React.ReactNode;\n  position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  delay?: number;\n}\n\nexport function PixelTooltip({\n  content,\n  children,\n  position = \"top\",\n  delay = 200,\n}: PixelTooltipProps) {\n  const [isVisible, setIsVisible] = React.useState(false);\n  const [coords, setCoords] = React.useState({ x: 0, y: 0, width: 0 });\n  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n  const triggerRef = React.useRef<HTMLDivElement>(null);\n\n  const handleMouseEnter = React.useCallback(() => {\n    timeoutRef.current = setTimeout(() => {\n      if (triggerRef.current) {\n        const rect = triggerRef.current.getBoundingClientRect();\n        setCoords({\n          x: rect.left,\n          y: rect.bottom,\n          width: rect.width,\n        });\n      }\n      setIsVisible(true);\n    }, delay);\n  }, [delay]);\n\n  const handleMouseLeave = React.useCallback(() => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n      timeoutRef.current = null;\n    }\n    setIsVisible(false);\n  }, []);\n\n  React.useEffect(\n    () => () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    },\n    [],\n  );\n\n  return (\n    <>\n      <div\n        ref={triggerRef}\n        className={styles.trigger}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n      >\n        {children}\n      </div>\n\n      {isVisible ? (\n        <div\n          className={`${styles.tooltip} ${styles[position]} ${styles.show}`.trim()}\n          style={{\n            left: `${coords.x + 5}px`,\n            top: `${coords.y + 8}px`,\n            width: `${Math.max(coords.width - 20, 60)}px`,\n          }}\n        >\n          <div className={styles.pixelContainer}>\n            <div className={styles.content}>{content}</div>\n          </div>\n        </div>\n      ) : null}\n    </>\n  );\n}\n\nexport default PixelTooltip;\n"]}

package/dist/components/PixelTooltip.module.css

@@ -0,0 +1,81 @@
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  cursor: help;
+}
+
+.tooltip {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  pointer-events: none;
+  opacity: 0;
+  transition:
+    opacity 250ms ease-in-out,
+    transform 250ms ease-in-out;
+}
+
+.tooltip.show {
+  opacity: 1;
+  animation: tooltipFadeIn 250ms ease-out forwards;
+}
+
+.pixelContainer {
+  position: relative;
+  width: fit-content;
+  max-width: 150px;
+  padding: 6px 10px;
+  background: var(--accent-primary);
+  border: 1px solid var(--accent-primary);
+  white-space: normal;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  color: #fff;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.3;
+  text-align: left;
+}
+
+.tooltip.top {
+  margin-top: -8px;
+  transform: translateY(-100%);
+}
+
+.tooltip.bottom {
+  margin-top: 0;
+  transform: translateY(0);
+}
+
+.tooltip.left {
+  margin-left: -8px;
+  transform: translateX(-100%) translateY(-50%);
+}
+
+.tooltip.right {
+  margin-left: 8px;
+  transform: translateY(-50%);
+}
+
+@keyframes tooltipFadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.95);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (max-width: 768px) {
+  .tooltip {
+    display: none;
+  }
+}

package/dist/components/WidgetCard.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type WidgetSize = "xs-a" | "xs-b" | "sm-a" | "sm-b";
+export interface WidgetCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    size?: WidgetSize | "sm" | "md" | "lg";
+    overlay?: React.ReactNode;
+}
+export declare function WidgetCard({ title, icon, children, size, className, overlay, style, ...props }: WidgetCardProps): import("react/jsx-runtime").JSX.Element;
+export default WidgetCard;
+//# sourceMappingURL=WidgetCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetCard.d.ts","sourceRoot":"","sources":["../../src/components/WidgetCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAa,EACb,SAAc,EACd,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACT,EAAE,eAAe,2CA+BjB;AAED,eAAe,UAAU,CAAC"}

package/dist/components/WidgetCard.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from "./WidgetCard.module.css";
+export function WidgetCard({ title, icon, children, size = "sm-b", className = "", overlay, style, ...props }) {
+    const sizeClassMap = {
+        "xs-a": styles.widgetXsA,
+        "xs-b": styles.widgetXsB,
+        "sm-a": styles.widgetSmA,
+        "sm-b": styles.widgetSmB,
+        sm: styles.widgetSmA,
+        md: styles.widgetSmB,
+        lg: styles.widgetSmB,
+    };
+    const sizeClass = sizeClassMap[size] || styles.widgetSmB;
+    return (_jsxs("div", { className: `${sizeClass} ${className}`.trim(), style: { position: "relative", ...style }, ...props, children: [title ? (_jsx("div", { className: styles.header, children: _jsxs("div", { className: styles.titleRow, children: [icon ? _jsx("div", { className: styles.icon, children: icon }) : null, _jsx("h3", { className: styles.title, children: title })] }) })) : null, _jsx("div", { className: styles.body, children: children }), overlay] }));
+}
+export default WidgetCard;
+//# sourceMappingURL=WidgetCard.js.map

package/dist/components/WidgetCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetCard.js","sourceRoot":"","sources":["../../src/components/WidgetCard.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAY7C,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,EAAE,EACd,OAAO,EACP,KAAK,EACL,GAAG,KAAK,EACQ;IAChB,MAAM,YAAY,GAChB;QACE,MAAM,EAAE,MAAM,CAAC,SAAS;QACxB,MAAM,EAAE,MAAM,CAAC,SAAS;QACxB,MAAM,EAAE,MAAM,CAAC,SAAS;QACxB,MAAM,EAAE,MAAM,CAAC,SAAS;QACxB,EAAE,EAAE,MAAM,CAAC,SAAS;QACpB,EAAE,EAAE,MAAM,CAAC,SAAS;QACpB,EAAE,EAAE,MAAM,CAAC,SAAS;KACrB,CAAC;IACJ,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,SAAS,CAAC;IAEzD,OAAO,CACL,eACE,SAAS,EAAE,GAAG,SAAS,IAAI,SAAS,EAAE,CAAC,IAAI,EAAE,EAC7C,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,KACrC,KAAK,aAER,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,SAAS,EAAE,MAAM,CAAC,MAAM,YAC3B,eAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,aAC5B,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,IAAI,GAAO,CAAC,CAAC,CAAC,IAAI,EACxD,aAAI,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,IACrC,GACF,CACP,CAAC,CAAC,CAAC,IAAI,EACR,cAAK,SAAS,EAAE,MAAM,CAAC,IAAI,YAAG,QAAQ,GAAO,EAC5C,OAAO,IACJ,CACP,CAAC;AACJ,CAAC;AAED,eAAe,UAAU,CAAC","sourcesContent":["import React from \"react\";\n\nimport styles from \"./WidgetCard.module.css\";\n\nexport type WidgetSize = \"xs-a\" | \"xs-b\" | \"sm-a\" | \"sm-b\";\n\nexport interface WidgetCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  icon?: React.ReactNode;\n  children: React.ReactNode;\n  size?: WidgetSize | \"sm\" | \"md\" | \"lg\";\n  overlay?: React.ReactNode;\n}\n\nexport function WidgetCard({\n  title,\n  icon,\n  children,\n  size = \"sm-b\",\n  className = \"\",\n  overlay,\n  style,\n  ...props\n}: WidgetCardProps) {\n  const sizeClassMap: Record<Exclude<WidgetCardProps[\"size\"], undefined>, string> =\n    {\n      \"xs-a\": styles.widgetXsA,\n      \"xs-b\": styles.widgetXsB,\n      \"sm-a\": styles.widgetSmA,\n      \"sm-b\": styles.widgetSmB,\n      sm: styles.widgetSmA,\n      md: styles.widgetSmB,\n      lg: styles.widgetSmB,\n    };\n  const sizeClass = sizeClassMap[size] || styles.widgetSmB;\n\n  return (\n    <div\n      className={`${sizeClass} ${className}`.trim()}\n      style={{ position: \"relative\", ...style }}\n      {...props}\n    >\n      {title ? (\n        <div className={styles.header}>\n          <div className={styles.titleRow}>\n            {icon ? <div className={styles.icon}>{icon}</div> : null}\n            <h3 className={styles.title}>{title}</h3>\n          </div>\n        </div>\n      ) : null}\n      <div className={styles.body}>{children}</div>\n      {overlay}\n    </div>\n  );\n}\n\nexport default WidgetCard;\n"]}

package/dist/components/WidgetCard.module.css

@@ -0,0 +1,75 @@
+.widgetXsA,
+.widgetXsB,
+.widgetSmA,
+.widgetSmB {
+  background: var(--border-color);
+  border: none;
+  border-radius: 2px;
+  overflow: hidden;
+  transition: background 200ms ease;
+}
+
+.widgetXsA:hover,
+.widgetXsB:hover,
+.widgetSmA:hover,
+.widgetSmB:hover {
+  background: var(--text-primary);
+}
+
+.widgetXsA {
+  grid-column: span 1;
+  grid-row: span 1;
+  min-height: 180px;
+}
+
+.widgetXsB {
+  grid-column: span 1;
+  grid-row: span 2;
+  min-height: 360px;
+}
+
+.widgetSmA {
+  grid-column: span 2;
+  grid-row: span 1;
+  min-height: 180px;
+}
+
+.widgetSmB {
+  grid-column: span 2;
+  grid-row: span 2;
+  min-height: 360px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.titleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.title {
+  margin: 0;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.body {
+  padding: 12px 16px;
+}

package/dist/index.d.ts

@@ -13,10 +13,14 @@ export { CornerBracketCard, type CornerBracketCardProps } from "./components/Cor
 export { ErrorMessage, type ErrorMessageProps } from "./components/ErrorMessage.js";
 export { HeartbeatIndicator, HeartbeatPulse, type HeartbeatIndicatorProps, type HeartbeatPulseProps, } from "./components/HeartbeatPulse.js";
 export { HexagonGrid, type HexagonGridProps } from "./components/HexagonGrid.js";
+export { LoadingOverlayCrystalline, type LoadingOverlayCrystallineProps, } from "./components/LoadingOverlayCrystalline.js";
 export { LOADING_PROGRESS_SEGMENT_COUNT, LoadingProgressBar, type LoadingProgressBarProps, } from "./components/LoadingProgressBar.js";
+export { LoadingScreen, type LoadingScreenProps, type LoadingStage, useLoadingProgress, } from "./components/LoadingScreen.js";
 export { MarqueeStrip, type MarqueeStripProps } from "./components/MarqueeStrip.js";
+export { OverlayButton, type OverlayButtonProps, } from "./components/OverlayButton.js";
 export { PageHeader, type PageHeaderProps } from "./components/PageHeader.js";
 export { PageTemplate, type PageTemplateProps } from "./components/PageTemplate.js";
+export { PixelTooltip, type PixelTooltipProps, } from "./components/PixelTooltip.js";
 export { QuickInfoCard, type QuickInfoCardProps, type QuickInfoItem, type StorageProgress, } from "./components/QuickInfoCard.js";
 export { RuntimeOrbitDiagram, type RuntimeOrbitDiagramProps, type RuntimeOrbitNode, } from "./components/RuntimeOrbitDiagram.js";
 export { Section, type SectionProps } from "./components/Section.js";
@@ -28,4 +32,5 @@ export { StrokedText, type StrokedTextProps } from "./components/StrokedText.js"
 export { TabbedPanel, type TabbedPanelProps, type TabbedPanelTab } from "./components/TabbedPanel.js";
 export { ThemedCard, type ThemedCardProps } from "./components/ThemedCard.js";
 export { ThemeToggle, type ThemeToggleProps } from "./components/ThemeToggle.js";
+export { WidgetCard, type WidgetCardProps, type WidgetSize } from "./components/WidgetCard.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,eAAe,EACf,KAAK,qBAAqB,EAC1B,KAAK,oBAAoB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAAE,KAAK,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,KAAK,uBAAuB,EAC5B,KAAK,mBAAmB,GACzB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,eAAe,GACrB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,GACtB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,gBAAgB,EAChB,KAAK,sBAAsB,EAC3B,KAAK,qBAAqB,GAC3B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -13,10 +13,14 @@ export { CornerBracketCard } from "./components/CornerBracketCard.js";
 export { ErrorMessage } from "./components/ErrorMessage.js";
 export { HeartbeatIndicator, HeartbeatPulse, } from "./components/HeartbeatPulse.js";
 export { HexagonGrid } from "./components/HexagonGrid.js";
+export { LoadingOverlayCrystalline, } from "./components/LoadingOverlayCrystalline.js";
 export { LOADING_PROGRESS_SEGMENT_COUNT, LoadingProgressBar, } from "./components/LoadingProgressBar.js";
+export { LoadingScreen, useLoadingProgress, } from "./components/LoadingScreen.js";
 export { MarqueeStrip } from "./components/MarqueeStrip.js";
+export { OverlayButton, } from "./components/OverlayButton.js";
 export { PageHeader } from "./components/PageHeader.js";
 export { PageTemplate } from "./components/PageTemplate.js";
+export { PixelTooltip, } from "./components/PixelTooltip.js";
 export { QuickInfoCard, } from "./components/QuickInfoCard.js";
 export { RuntimeOrbitDiagram, } from "./components/RuntimeOrbitDiagram.js";
 export { Section } from "./components/Section.js";
@@ -28,4 +32,5 @@ export { StrokedText } from "./components/StrokedText.js";
 export { TabbedPanel } from "./components/TabbedPanel.js";
 export { ThemedCard } from "./components/ThemedCard.js";
 export { ThemeToggle } from "./components/ThemeToggle.js";
+export { WidgetCard } from "./components/WidgetCard.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAA+B,MAAM,mCAAmC,CAAC;AACnG,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,cAAc,EACd,mBAAmB,GAGpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,eAAe,GAGhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAA+B,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,kBAAkB,EAClB,cAAc,GAGf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,GAEnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,aAAa,GAId,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,mBAAmB,GAGpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,aAAa,GAEd,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,gBAAgB,GAGjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,WAAW,EAA8C,MAAM,6BAA6B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC","sourcesContent":["export { AvatarStage, type AvatarStageProps } from \"./components/AvatarStage.js\";\nexport { BlinkText, type BlinkTextProps } from \"./components/BlinkText.js\";\nexport { Button, type ButtonProps } from \"./components/Button.js\";\nexport { CopyButton, type CopyButtonProps } from \"./components/CopyButton.js\";\nexport { CyberpunkCheckbox, type CyberpunkCheckboxProps } from \"./components/CyberpunkCheckbox.js\";\nexport {\n  CyberpunkInput,\n  type CyberpunkInputProps,\n} from \"./components/CyberpunkInput.js\";\nexport {\n  CyberpunkRadio,\n  CyberpunkRadioGroup,\n  type CyberpunkRadioGroupProps,\n  type CyberpunkRadioProps,\n} from \"./components/CyberpunkRadio.js\";\nexport {\n  CyberpunkSelect,\n  type CyberpunkSelectOption,\n  type CyberpunkSelectProps,\n} from \"./components/CyberpunkSelect.js\";\nexport {\n  CyberpunkSlider,\n  type CyberpunkSliderProps,\n} from \"./components/CyberpunkSlider.js\";\nexport {\n  CyberpunkTextarea,\n  type CyberpunkTextareaProps,\n} from \"./components/CyberpunkTextarea.js\";\nexport { CyberpunkTile, type CyberpunkTileProps } from \"./components/CyberpunkTile.js\";\nexport { CornerBracketCard, type CornerBracketCardProps } from \"./components/CornerBracketCard.js\";\nexport { ErrorMessage, type ErrorMessageProps } from \"./components/ErrorMessage.js\";\nexport {\n  HeartbeatIndicator,\n  HeartbeatPulse,\n  type HeartbeatIndicatorProps,\n  type HeartbeatPulseProps,\n} from \"./components/HeartbeatPulse.js\";\nexport { HexagonGrid, type HexagonGridProps } from \"./components/HexagonGrid.js\";\nexport {\n  LOADING_PROGRESS_SEGMENT_COUNT,\n  LoadingProgressBar,\n  type LoadingProgressBarProps,\n} from \"./components/LoadingProgressBar.js\";\nexport { MarqueeStrip, type MarqueeStripProps } from \"./components/MarqueeStrip.js\";\nexport { PageHeader, type PageHeaderProps } from \"./components/PageHeader.js\";\nexport { PageTemplate, type PageTemplateProps } from \"./components/PageTemplate.js\";\nexport {\n  QuickInfoCard,\n  type QuickInfoCardProps,\n  type QuickInfoItem,\n  type StorageProgress,\n} from \"./components/QuickInfoCard.js\";\nexport {\n  RuntimeOrbitDiagram,\n  type RuntimeOrbitDiagramProps,\n  type RuntimeOrbitNode,\n} from \"./components/RuntimeOrbitDiagram.js\";\nexport { Section, type SectionProps } from \"./components/Section.js\";\nexport {\n  SectionHeader,\n  type SectionHeaderProps,\n} from \"./components/SectionHeader.js\";\nexport {\n  SegmentedControl,\n  type SegmentedControlOption,\n  type SegmentedControlProps,\n} from \"./components/SegmentedControl.js\";\nexport { StatCard, type StatCardProps } from \"./components/StatCard.js\";\nexport { StatusMessage, type StatusMessageProps } from \"./components/StatusMessage.js\";\nexport { StrokedText, type StrokedTextProps } from \"./components/StrokedText.js\";\nexport { TabbedPanel, type TabbedPanelProps, type TabbedPanelTab } from \"./components/TabbedPanel.js\";\nexport { ThemedCard, type ThemedCardProps } from \"./components/ThemedCard.js\";\nexport { ThemeToggle, type ThemeToggleProps } from \"./components/ThemeToggle.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAA+B,MAAM,mCAAmC,CAAC;AACnG,OAAO,EACL,cAAc,GAEf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,cAAc,EACd,mBAAmB,GAGpB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,eAAe,GAGhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,eAAe,GAEhB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EACL,iBAAiB,GAElB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,iBAAiB,EAA+B,MAAM,mCAAmC,CAAC;AACnG,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,kBAAkB,EAClB,cAAc,GAGf,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EACL,yBAAyB,GAE1B,MAAM,2CAA2C,CAAC;AACnD,OAAO,EACL,8BAA8B,EAC9B,kBAAkB,GAEnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,aAAa,EAGb,kBAAkB,GACnB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,aAAa,GAEd,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,YAAY,EAA0B,MAAM,8BAA8B,CAAC;AACpF,OAAO,EACL,YAAY,GAEb,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,aAAa,GAId,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,mBAAmB,GAGpB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAqB,MAAM,yBAAyB,CAAC;AACrE,OAAO,EACL,aAAa,GAEd,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,gBAAgB,GAGjB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAsB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,aAAa,EAA2B,MAAM,+BAA+B,CAAC;AACvF,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,WAAW,EAA8C,MAAM,6BAA6B,CAAC;AACtG,OAAO,EAAE,UAAU,EAAwB,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAyB,MAAM,6BAA6B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAyC,MAAM,4BAA4B,CAAC","sourcesContent":["export { AvatarStage, type AvatarStageProps } from \"./components/AvatarStage.js\";\nexport { BlinkText, type BlinkTextProps } from \"./components/BlinkText.js\";\nexport { Button, type ButtonProps } from \"./components/Button.js\";\nexport { CopyButton, type CopyButtonProps } from \"./components/CopyButton.js\";\nexport { CyberpunkCheckbox, type CyberpunkCheckboxProps } from \"./components/CyberpunkCheckbox.js\";\nexport {\n  CyberpunkInput,\n  type CyberpunkInputProps,\n} from \"./components/CyberpunkInput.js\";\nexport {\n  CyberpunkRadio,\n  CyberpunkRadioGroup,\n  type CyberpunkRadioGroupProps,\n  type CyberpunkRadioProps,\n} from \"./components/CyberpunkRadio.js\";\nexport {\n  CyberpunkSelect,\n  type CyberpunkSelectOption,\n  type CyberpunkSelectProps,\n} from \"./components/CyberpunkSelect.js\";\nexport {\n  CyberpunkSlider,\n  type CyberpunkSliderProps,\n} from \"./components/CyberpunkSlider.js\";\nexport {\n  CyberpunkTextarea,\n  type CyberpunkTextareaProps,\n} from \"./components/CyberpunkTextarea.js\";\nexport { CyberpunkTile, type CyberpunkTileProps } from \"./components/CyberpunkTile.js\";\nexport { CornerBracketCard, type CornerBracketCardProps } from \"./components/CornerBracketCard.js\";\nexport { ErrorMessage, type ErrorMessageProps } from \"./components/ErrorMessage.js\";\nexport {\n  HeartbeatIndicator,\n  HeartbeatPulse,\n  type HeartbeatIndicatorProps,\n  type HeartbeatPulseProps,\n} from \"./components/HeartbeatPulse.js\";\nexport { HexagonGrid, type HexagonGridProps } from \"./components/HexagonGrid.js\";\nexport {\n  LoadingOverlayCrystalline,\n  type LoadingOverlayCrystallineProps,\n} from \"./components/LoadingOverlayCrystalline.js\";\nexport {\n  LOADING_PROGRESS_SEGMENT_COUNT,\n  LoadingProgressBar,\n  type LoadingProgressBarProps,\n} from \"./components/LoadingProgressBar.js\";\nexport {\n  LoadingScreen,\n  type LoadingScreenProps,\n  type LoadingStage,\n  useLoadingProgress,\n} from \"./components/LoadingScreen.js\";\nexport { MarqueeStrip, type MarqueeStripProps } from \"./components/MarqueeStrip.js\";\nexport {\n  OverlayButton,\n  type OverlayButtonProps,\n} from \"./components/OverlayButton.js\";\nexport { PageHeader, type PageHeaderProps } from \"./components/PageHeader.js\";\nexport { PageTemplate, type PageTemplateProps } from \"./components/PageTemplate.js\";\nexport {\n  PixelTooltip,\n  type PixelTooltipProps,\n} from \"./components/PixelTooltip.js\";\nexport {\n  QuickInfoCard,\n  type QuickInfoCardProps,\n  type QuickInfoItem,\n  type StorageProgress,\n} from \"./components/QuickInfoCard.js\";\nexport {\n  RuntimeOrbitDiagram,\n  type RuntimeOrbitDiagramProps,\n  type RuntimeOrbitNode,\n} from \"./components/RuntimeOrbitDiagram.js\";\nexport { Section, type SectionProps } from \"./components/Section.js\";\nexport {\n  SectionHeader,\n  type SectionHeaderProps,\n} from \"./components/SectionHeader.js\";\nexport {\n  SegmentedControl,\n  type SegmentedControlOption,\n  type SegmentedControlProps,\n} from \"./components/SegmentedControl.js\";\nexport { StatCard, type StatCardProps } from \"./components/StatCard.js\";\nexport { StatusMessage, type StatusMessageProps } from \"./components/StatusMessage.js\";\nexport { StrokedText, type StrokedTextProps } from \"./components/StrokedText.js\";\nexport { TabbedPanel, type TabbedPanelProps, type TabbedPanelTab } from \"./components/TabbedPanel.js\";\nexport { ThemedCard, type ThemedCardProps } from \"./components/ThemedCard.js\";\nexport { ThemeToggle, type ThemeToggleProps } from \"./components/ThemeToggle.js\";\nexport { WidgetCard, type WidgetCardProps, type WidgetSize } from \"./components/WidgetCard.js\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steez-ui/ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "React primitives authored with CSS modules for Steez UI.",
   "license": "MIT",
   "type": "module",
@@ -12,8 +12,8 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@steez-ui/icons": "^0.1.6",
-    "@steez-ui/theme": "^0.1.6"
+    "@steez-ui/icons": "^0.1.7",
+    "@steez-ui/theme": "^0.1.7"
   },
   "exports": {
     ".": {