@steez-ui/ui 0.1.5 → 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.5`
-- `@steez-ui/icons@0.1.5`
-- `@steez-ui/ui@0.1.5`
+- `@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"]}