waitroom 0.0.1

package/dist/chunk-R5V2UBE7.js

@@ -0,0 +1,88 @@
+import { __publicField } from './chunk-V6TY7KAL.js';
+
+// src/facts/dev-tips.ts
+var TIPS = [
+  {
+    id: "1",
+    text: "Ctrl+Shift+P opens command palette in VS Code",
+    category: "vscode"
+  },
+  { id: "2", text: "Use git reflog to find lost commits", category: "git" },
+  {
+    id: "3",
+    text: "Console.table() displays data in a table format",
+    category: "js"
+  },
+  { id: "4", text: "Alt+Click to use multiple cursors", category: "vscode" }
+];
+var SimpleFactsRenderer = class {
+  constructor(container, facts, config) {
+    __publicField(this, "container");
+    __publicField(this, "facts");
+    __publicField(this, "currentIndex", 0);
+    __publicField(this, "timer");
+    __publicField(this, "config");
+    this.container = container;
+    this.facts = facts;
+    this.config = config || {};
+    this.container.style.display = "flex";
+    this.container.style.flexDirection = "column";
+    this.container.style.alignItems = "center";
+    this.container.style.justifyContent = "center";
+    this.container.style.padding = "20px";
+    this.container.style.textAlign = "center";
+    this.showCurrent();
+    this.startRotation();
+  }
+  showCurrent() {
+    const fact = this.facts[this.currentIndex];
+    this.container.innerHTML = `
+            <div style="font-weight: bold; margin-bottom: 8px;">Tip #${this.currentIndex + 1}</div>
+            <div style="font-size: 1.1em;">${fact.text}</div>
+            ${fact.category ? `<div style="font-size: 0.8em; color: #888; margin-top: 5px;">${fact.category}</div>` : ""}
+        `;
+    const timerBar = document.createElement("div");
+    timerBar.style.width = "0%";
+    timerBar.style.height = "2px";
+    timerBar.style.background = "#22c55e";
+    timerBar.style.marginTop = "10px";
+    timerBar.style.transition = `width ${this.config.rotationInterval || 4e3}ms linear`;
+    void this.container.offsetWidth;
+    this.container.appendChild(timerBar);
+    requestAnimationFrame(() => {
+      timerBar.style.width = "100%";
+    });
+  }
+  startRotation() {
+    if (this.timer) clearInterval(this.timer);
+    const interval = this.config.rotationInterval || 4e3;
+    this.timer = setInterval(() => this.next(), interval);
+  }
+  next() {
+    this.currentIndex = (this.currentIndex + 1) % this.facts.length;
+    this.showCurrent();
+  }
+  previous() {
+    this.currentIndex = (this.currentIndex - 1 + this.facts.length) % this.facts.length;
+    this.showCurrent();
+  }
+  favorite(id) {
+    console.log("Fav:", id);
+  }
+  destroy() {
+    if (this.timer) clearInterval(this.timer);
+    this.container.innerHTML = "";
+  }
+};
+var DevTipsFacts = {
+  id: "dev-tips",
+  name: "Developer Tips",
+  category: "coding",
+  facts: TIPS,
+  renderMini: (c, cfg) => new SimpleFactsRenderer(c, TIPS, cfg),
+  renderFull: (c, cfg) => new SimpleFactsRenderer(c, TIPS, cfg)
+};
+
+export { DevTipsFacts };
+//# sourceMappingURL=chunk-R5V2UBE7.js.map
+//# sourceMappingURL=chunk-R5V2UBE7.js.map

package/dist/chunk-R5V2UBE7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/facts/dev-tips.ts"],"names":[],"mappings":"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","file":"chunk-R5V2UBE7.js","sourcesContent":["import { FactsPlugin, FactsInstance, Fact, FactsConfig } from \"../core/types\";\n\nconst TIPS: Fact[] = [\n  {\n    id: \"1\",\n    text: \"Ctrl+Shift+P opens command palette in VS Code\",\n    category: \"vscode\",\n  },\n  { id: \"2\", text: \"Use git reflog to find lost commits\", category: \"git\" },\n  {\n    id: \"3\",\n    text: \"Console.table() displays data in a table format\",\n    category: \"js\",\n  },\n  { id: \"4\", text: \"Alt+Click to use multiple cursors\", category: \"vscode\" },\n];\n\nclass SimpleFactsRenderer implements FactsInstance {\n  private container: HTMLElement;\n  private facts: Fact[];\n  private currentIndex = 0;\n  private timer: any;\n  private config: FactsConfig;\n\n  constructor(container: HTMLElement, facts: Fact[], config?: FactsConfig) {\n    this.container = container;\n    this.facts = facts;\n    this.config = config || {};\n\n    this.container.style.display = \"flex\";\n    this.container.style.flexDirection = \"column\";\n    this.container.style.alignItems = \"center\";\n    this.container.style.justifyContent = \"center\";\n    this.container.style.padding = \"20px\";\n    this.container.style.textAlign = \"center\";\n\n    this.showCurrent();\n    this.startRotation();\n  }\n\n  private showCurrent() {\n    const fact = this.facts[this.currentIndex];\n    this.container.innerHTML = `\n            <div style=\"font-weight: bold; margin-bottom: 8px;\">Tip #${\n              this.currentIndex + 1\n            }</div>\n            <div style=\"font-size: 1.1em;\">${fact.text}</div>\n            ${\n              fact.category\n                ? `<div style=\"font-size: 0.8em; color: #888; margin-top: 5px;\">${fact.category}</div>`\n                : \"\"\n            }\n        `;\n\n    // Add timer bar\n    const timerBar = document.createElement(\"div\");\n    timerBar.style.width = \"0%\";\n    timerBar.style.height = \"2px\";\n    timerBar.style.background = \"#22c55e\"; // Green progress\n    timerBar.style.marginTop = \"10px\";\n    timerBar.style.transition = `width ${\n      this.config.rotationInterval || 4000\n    }ms linear`;\n\n    // Reset animation\n    // Force reflow\n    void this.container.offsetWidth;\n\n    this.container.appendChild(timerBar);\n\n    // Trigger animation\n    requestAnimationFrame(() => {\n      timerBar.style.width = \"100%\";\n    });\n  }\n\n  private startRotation() {\n    if (this.timer) clearInterval(this.timer);\n    const interval = this.config.rotationInterval || 4000;\n    this.timer = setInterval(() => this.next(), interval);\n  }\n\n  next() {\n    this.currentIndex = (this.currentIndex + 1) % this.facts.length;\n    this.showCurrent();\n  }\n\n  previous() {\n    this.currentIndex =\n      (this.currentIndex - 1 + this.facts.length) % this.facts.length;\n    this.showCurrent();\n  }\n\n  favorite(id: string) {\n    console.log(\"Fav:\", id);\n  }\n\n  destroy() {\n    if (this.timer) clearInterval(this.timer);\n    this.container.innerHTML = \"\";\n  }\n}\n\nexport const DevTipsFacts: FactsPlugin = {\n  id: \"dev-tips\",\n  name: \"Developer Tips\",\n  category: \"coding\",\n  facts: TIPS,\n  renderMini: (c, cfg) => new SimpleFactsRenderer(c, TIPS, cfg),\n  renderFull: (c, cfg) => new SimpleFactsRenderer(c, TIPS, cfg),\n};\n"]}

package/dist/chunk-SSP4S4NY.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+var chunk4DE2IREA_cjs = require('./chunk-4DE2IREA.cjs');
+
+// src/core/portal.ts
+var PortalSystem = class {
+  constructor() {
+    chunk4DE2IREA_cjs.__publicField(this, "overlay", null);
+  }
+  open(contentRenderer, onClose) {
+    if (this.overlay) return;
+    this.overlay = document.createElement("div");
+    this.overlay.style.position = "fixed";
+    this.overlay.style.top = "0";
+    this.overlay.style.left = "0";
+    this.overlay.style.width = "100vw";
+    this.overlay.style.height = "100vh";
+    this.overlay.style.backgroundColor = "rgba(0,0,0,0.85)";
+    this.overlay.style.zIndex = "9999";
+    this.overlay.style.display = "flex";
+    this.overlay.style.justifyContent = "center";
+    this.overlay.style.alignItems = "center";
+    this.overlay.style.color = "white";
+    const contentContainer = document.createElement("div");
+    contentContainer.style.width = "80%";
+    contentContainer.style.height = "80%";
+    contentContainer.style.position = "relative";
+    const closeBtn = document.createElement("button");
+    closeBtn.innerText = "\xD7";
+    closeBtn.style.position = "absolute";
+    closeBtn.style.top = "-40px";
+    closeBtn.style.right = "0";
+    closeBtn.style.fontSize = "30px";
+    closeBtn.style.background = "transparent";
+    closeBtn.style.border = "none";
+    closeBtn.style.color = "white";
+    closeBtn.style.cursor = "pointer";
+    closeBtn.onclick = () => {
+      this.close();
+      onClose();
+    };
+    this.overlay.appendChild(closeBtn);
+    this.overlay.appendChild(contentContainer);
+    document.body.appendChild(this.overlay);
+    contentRenderer(contentContainer);
+  }
+  close() {
+    if (this.overlay) {
+      document.body.removeChild(this.overlay);
+      this.overlay = null;
+    }
+  }
+};
+
+exports.PortalSystem = PortalSystem;
+//# sourceMappingURL=chunk-SSP4S4NY.cjs.map
+//# sourceMappingURL=chunk-SSP4S4NY.cjs.map

package/dist/chunk-SSP4S4NY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/portal.ts"],"names":["__publicField"],"mappings":";;;;;AAIO,IAAM,eAAN,MAAmB;AAAA,EAGxB,WAAA,GAAc;AAFd,IAAAA,+BAAA,CAAA,IAAA,EAAQ,SAAA,EAA8B,IAAA,CAAA;AAAA,EAEvB;AAAA,EAEf,IAAA,CAAK,iBAAmD,OAAA,EAAqB;AAC3E,IAAA,IAAI,KAAK,OAAA,EAAS;AAElB,IAAA,IAAA,CAAK,OAAA,GAAU,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AAC3C,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,QAAA,GAAW,OAAA;AAC9B,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,GAAA,GAAM,GAAA;AACzB,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,IAAA,GAAO,GAAA;AAC1B,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,KAAA,GAAQ,OAAA;AAC3B,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,MAAA,GAAS,OAAA;AAC5B,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,eAAA,GAAkB,kBAAA;AACrC,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,MAAA,GAAS,MAAA;AAC5B,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,OAAA,GAAU,MAAA;AAC7B,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,cAAA,GAAiB,QAAA;AACpC,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,UAAA,GAAa,QAAA;AAChC,IAAA,IAAA,CAAK,OAAA,CAAQ,MAAM,KAAA,GAAQ,OAAA;AAE3B,IAAA,MAAM,gBAAA,GAAmB,QAAA,CAAS,aAAA,CAAc,KAAK,CAAA;AACrD,IAAA,gBAAA,CAAiB,MAAM,KAAA,GAAQ,KAAA;AAC/B,IAAA,gBAAA,CAAiB,MAAM,MAAA,GAAS,KAAA;AAChC,IAAA,gBAAA,CAAiB,MAAM,QAAA,GAAW,UAAA;AAGlC,IAAA,MAAM,QAAA,GAAW,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AAChD,IAAA,QAAA,CAAS,SAAA,GAAY,MAAA;AACrB,IAAA,QAAA,CAAS,MAAM,QAAA,GAAW,UAAA;AAC1B,IAAA,QAAA,CAAS,MAAM,GAAA,GAAM,OAAA;AACrB,IAAA,QAAA,CAAS,MAAM,KAAA,GAAQ,GAAA;AACvB,IAAA,QAAA,CAAS,MAAM,QAAA,GAAW,MAAA;AAC1B,IAAA,QAAA,CAAS,MAAM,UAAA,GAAa,aAAA;AAC5B,IAAA,QAAA,CAAS,MAAM,MAAA,GAAS,MAAA;AACxB,IAAA,QAAA,CAAS,MAAM,KAAA,GAAQ,OAAA;AACvB,IAAA,QAAA,CAAS,MAAM,MAAA,GAAS,SAAA;AAExB,IAAA,QAAA,CAAS,UAAU,MAAM;AACvB,MAAA,IAAA,CAAK,KAAA,EAAM;AACX,MAAA,OAAA,EAAQ;AAAA,IACV,CAAA;AAEA,IAAA,IAAA,CAAK,OAAA,CAAQ,YAAY,QAAQ,CAAA;AACjC,IAAA,IAAA,CAAK,OAAA,CAAQ,YAAY,gBAAgB,CAAA;AACzC,IAAA,QAAA,CAAS,IAAA,CAAK,WAAA,CAAY,IAAA,CAAK,OAAO,CAAA;AAGtC,IAAA,eAAA,CAAgB,gBAAgB,CAAA;AAAA,EAClC;AAAA,EAEA,KAAA,GAAQ;AACN,IAAA,IAAI,KAAK,OAAA,EAAS;AAChB,MAAA,QAAA,CAAS,IAAA,CAAK,WAAA,CAAY,IAAA,CAAK,OAAO,CAAA;AACtC,MAAA,IAAA,CAAK,OAAA,GAAU,IAAA;AAAA,IACjB;AAAA,EACF;AACF","file":"chunk-SSP4S4NY.cjs","sourcesContent":["// Minimal Portal helper logic\n// In a framework-agnostic way, this would manage creating a fixed overlay\n// and transferring the state/rendering to it.\n\nexport class PortalSystem {\n  private overlay: HTMLElement | null = null;\n\n  constructor() {}\n\n  open(contentRenderer: (container: HTMLElement) => void, onClose: () => void) {\n    if (this.overlay) return;\n\n    this.overlay = document.createElement(\"div\");\n    this.overlay.style.position = \"fixed\";\n    this.overlay.style.top = \"0\";\n    this.overlay.style.left = \"0\";\n    this.overlay.style.width = \"100vw\";\n    this.overlay.style.height = \"100vh\";\n    this.overlay.style.backgroundColor = \"rgba(0,0,0,0.85)\";\n    this.overlay.style.zIndex = \"9999\";\n    this.overlay.style.display = \"flex\";\n    this.overlay.style.justifyContent = \"center\";\n    this.overlay.style.alignItems = \"center\";\n    this.overlay.style.color = \"white\";\n\n    const contentContainer = document.createElement(\"div\");\n    contentContainer.style.width = \"80%\";\n    contentContainer.style.height = \"80%\";\n    contentContainer.style.position = \"relative\";\n\n    // Close button\n    const closeBtn = document.createElement(\"button\");\n    closeBtn.innerText = \"×\";\n    closeBtn.style.position = \"absolute\";\n    closeBtn.style.top = \"-40px\";\n    closeBtn.style.right = \"0\";\n    closeBtn.style.fontSize = \"30px\";\n    closeBtn.style.background = \"transparent\";\n    closeBtn.style.border = \"none\";\n    closeBtn.style.color = \"white\";\n    closeBtn.style.cursor = \"pointer\";\n\n    closeBtn.onclick = () => {\n      this.close();\n      onClose();\n    };\n\n    this.overlay.appendChild(closeBtn);\n    this.overlay.appendChild(contentContainer);\n    document.body.appendChild(this.overlay);\n\n    // Render content\n    contentRenderer(contentContainer);\n  }\n\n  close() {\n    if (this.overlay) {\n      document.body.removeChild(this.overlay);\n      this.overlay = null;\n    }\n  }\n}\n"]}

package/dist/chunk-SUJCEDVR.js

@@ -0,0 +1,251 @@
+import { createLoadingInteraction } from './chunk-3RJ542WD.js';
+import { useRef, useEffect, useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function useLoadingInteraction(ref, config) {
+  const engineRef = useRef(null);
+  useEffect(() => {
+    if (!ref.current || !config.isLoading) {
+      if (engineRef.current) {
+        engineRef.current.destroy();
+        engineRef.current = null;
+      }
+      return;
+    }
+    if (!engineRef.current) {
+      engineRef.current = createLoadingInteraction(ref.current, config);
+    }
+    return () => {
+      if (engineRef.current) {
+        engineRef.current.destroy();
+        engineRef.current = null;
+      }
+    };
+  }, [config.isLoading, config.mode, ref]);
+  return engineRef.current;
+}
+var icons = {
+  game: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "20", height: "12", rx: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M6 12h4m-2-2v4" }),
+        /* @__PURE__ */ jsx("line", { x1: "15", y1: "11", x2: "15", y2: "11" }),
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "13", x2: "18", y2: "13" })
+      ]
+    }
+  ),
+  facts: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 2a6 6 0 0 1 6 6c0 2.97-1 3.5-2 4.5V15h-8v-2.5c-1-1-2-1.53-2-4.5a6 6 0 0 1 6-6z" }),
+        /* @__PURE__ */ jsx("path", { d: "M8.5 18h7" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 21h4" })
+      ]
+    }
+  ),
+  doodle: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "18",
+      height: "18",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 19l7-7 3 3-7 7-3-3z" }),
+        /* @__PURE__ */ jsx("path", { d: "M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 2l7.586 7.586" }),
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "2" })
+      ]
+    }
+  ),
+  none: /* @__PURE__ */ jsx("span", { style: { fontSize: 16 }, children: "\u2715" })
+};
+var tooltips = {
+  game: "Play a Game",
+  facts: "Learn Facts",
+  doodle: "Draw Something",
+  none: "Disable"
+};
+var ModeSwitcher = ({
+  modes,
+  activeMode,
+  onModeChange
+}) => {
+  const [hovered, setHovered] = useState(null);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        padding: "4px"
+      },
+      children: modes.map((mode) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end"
+          },
+          children: [
+            hovered === mode && /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  right: "100%",
+                  marginRight: "8px",
+                  background: "rgba(0,0,0,0.8)",
+                  color: "#fff",
+                  padding: "4px 8px",
+                  borderRadius: "4px",
+                  fontSize: "12px",
+                  whiteSpace: "nowrap",
+                  pointerEvents: "none",
+                  opacity: 0,
+                  animation: "fadeIn 0.2s forwards"
+                },
+                children: tooltips[mode] || mode
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.preventDefault();
+                  onModeChange(mode);
+                },
+                onMouseEnter: () => setHovered(mode),
+                onMouseLeave: () => setHovered(null),
+                style: {
+                  width: "36px",
+                  height: "36px",
+                  borderRadius: "50%",
+                  border: "none",
+                  background: activeMode === mode ? "#333" : "rgba(255,255,255,0.9)",
+                  color: activeMode === mode ? "#fff" : "#555",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  boxShadow: "0 2px 5px rgba(0,0,0,0.1)",
+                  transition: "all 0.2s ease",
+                  transform: activeMode === mode ? "scale(1.1)" : "scale(1)"
+                },
+                "aria-label": mode,
+                children: icons[mode] || mode[0].toUpperCase()
+              }
+            ),
+            /* @__PURE__ */ jsx("style", { children: `
+            @keyframes fadeIn {
+                from { opacity: 0; transform: translateX(5px); }
+                to { opacity: 1; transform: translateX(0); }
+            }
+          ` })
+          ]
+        },
+        mode
+      ))
+    }
+  );
+};
+var LoadingInteraction = (props) => {
+  const {
+    isLoading,
+    children,
+    availableModes = ["game", "facts", "doodle"],
+    showModeSwitcher = true,
+    width = "100%",
+    height = "300px",
+    ...config
+  } = props;
+  const containerRef = useRef(null);
+  const [currentMode, setCurrentMode] = useState(
+    props.mode || availableModes[0] || "none"
+  );
+  useEffect(() => {
+    if (props.mode) setCurrentMode(props.mode);
+  }, [props.mode]);
+  const activeConfig = {
+    ...config,
+    isLoading,
+    mode: currentMode,
+    availableModes,
+    style: props.style,
+    transitionDuration: props.transitionDuration
+  };
+  useLoadingInteraction(containerRef, activeConfig);
+  if (!isLoading) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width, height }, children: [
+    showModeSwitcher && availableModes.length > 1 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: 12,
+          right: 12,
+          width: "auto",
+          zIndex: 20,
+          pointerEvents: "none"
+          // Allow clicks to pass through transparent areas
+        },
+        children: /* @__PURE__ */ jsx("div", { style: { pointerEvents: "auto" }, children: /* @__PURE__ */ jsx(
+          ModeSwitcher,
+          {
+            modes: availableModes,
+            activeMode: currentMode,
+            onModeChange: setCurrentMode
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          width: "100%",
+          height: "100%",
+          background: "#f5f5f5",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "8px",
+          overflow: "hidden"
+        }
+      }
+    )
+  ] });
+};
+
+export { LoadingInteraction, ModeSwitcher, useLoadingInteraction };
+//# sourceMappingURL=chunk-SUJCEDVR.js.map
+//# sourceMappingURL=chunk-SUJCEDVR.js.map

package/dist/chunk-SUJCEDVR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/hooks.ts","../src/react/ModeSwitcher.tsx","../src/react/LoadingInteraction.tsx"],"names":["useRef","useState","useEffect","jsx","jsxs"],"mappings":"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","file":"chunk-SUJCEDVR.js","sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { createLoadingInteraction, LoadingEngine } from \"../core/engine\";\nimport { InteractionConfig } from \"../core/types\";\n\nexport function useLoadingInteraction(\n  ref: React.RefObject<HTMLElement>,\n  config: InteractionConfig\n) {\n  const engineRef = useRef<LoadingEngine | null>(null);\n\n  useEffect(() => {\n    if (!ref.current || !config.isLoading) {\n      if (engineRef.current) {\n        engineRef.current.destroy();\n        engineRef.current = null;\n      }\n      return;\n    }\n\n    if (!engineRef.current) {\n      engineRef.current = createLoadingInteraction(ref.current, config);\n    }\n\n    return () => {\n      if (engineRef.current) {\n        engineRef.current.destroy();\n        engineRef.current = null;\n      }\n    };\n  }, [config.isLoading, config.mode, ref]);\n\n  return engineRef.current;\n}\n","import React, { useState } from \"react\";\nimport { InteractionMode } from \"../core/types\";\n\ninterface ModeSwitcherProps {\n  modes: InteractionMode[];\n  activeMode: InteractionMode;\n  onModeChange: (mode: InteractionMode) => void;\n}\n\nconst icons: Record<string, React.ReactNode> = {\n  game: (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"2\" />\n      <path d=\"M6 12h4m-2-2v4\" />\n      <line x1=\"15\" y1=\"11\" x2=\"15\" y2=\"11\" />\n      <line x1=\"18\" y1=\"13\" x2=\"18\" y2=\"13\" />\n    </svg>\n  ),\n  facts: (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M12 2a6 6 0 0 1 6 6c0 2.97-1 3.5-2 4.5V15h-8v-2.5c-1-1-2-1.53-2-4.5a6 6 0 0 1 6-6z\" />\n      <path d=\"M8.5 18h7\" />\n      <path d=\"M10 21h4\" />\n    </svg>\n  ),\n  doodle: (\n    <svg\n      width=\"18\"\n      height=\"18\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M12 19l7-7 3 3-7 7-3-3z\" />\n      <path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\" />\n      <path d=\"M2 2l7.586 7.586\" />\n      <circle cx=\"11\" cy=\"11\" r=\"2\" />\n    </svg>\n  ),\n  none: <span style={{ fontSize: 16 }}>✕</span>,\n};\n\nconst tooltips: Record<string, string> = {\n  game: \"Play a Game\",\n  facts: \"Learn Facts\",\n  doodle: \"Draw Something\",\n  none: \"Disable\",\n};\n\nexport const ModeSwitcher: React.FC<ModeSwitcherProps> = ({\n  modes,\n  activeMode,\n  onModeChange,\n}) => {\n  const [hovered, setHovered] = useState<InteractionMode | null>(null);\n\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"8px\",\n        padding: \"4px\",\n      }}\n    >\n      {modes.map((mode) => (\n        <div\n          key={mode}\n          style={{\n            position: \"relative\",\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"flex-end\",\n          }}\n        >\n          {/* Tooltip (Left side) */}\n          {hovered === mode && (\n            <div\n              style={{\n                position: \"absolute\",\n                right: \"100%\",\n                marginRight: \"8px\",\n                background: \"rgba(0,0,0,0.8)\",\n                color: \"#fff\",\n                padding: \"4px 8px\",\n                borderRadius: \"4px\",\n                fontSize: \"12px\",\n                whiteSpace: \"nowrap\",\n                pointerEvents: \"none\",\n                opacity: 0,\n                animation: \"fadeIn 0.2s forwards\",\n              }}\n            >\n              {tooltips[mode] || mode}\n            </div>\n          )}\n\n          {/* Icon Button */}\n          <button\n            onClick={(e) => {\n              e.preventDefault();\n              onModeChange(mode);\n            }}\n            onMouseEnter={() => setHovered(mode)}\n            onMouseLeave={() => setHovered(null)}\n            style={{\n              width: \"36px\",\n              height: \"36px\",\n              borderRadius: \"50%\",\n              border: \"none\",\n              background:\n                activeMode === mode ? \"#333\" : \"rgba(255,255,255,0.9)\",\n              color: activeMode === mode ? \"#fff\" : \"#555\",\n              cursor: \"pointer\",\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              boxShadow: \"0 2px 5px rgba(0,0,0,0.1)\",\n              transition: \"all 0.2s ease\",\n              transform: activeMode === mode ? \"scale(1.1)\" : \"scale(1)\",\n            }}\n            aria-label={mode}\n          >\n            {icons[mode] || mode[0].toUpperCase()}\n          </button>\n\n          <style>{`\n            @keyframes fadeIn {\n                from { opacity: 0; transform: translateX(5px); }\n                to { opacity: 1; transform: translateX(0); }\n            }\n          `}</style>\n        </div>\n      ))}\n    </div>\n  );\n};\n","import React, { useRef, useState, useEffect } from \"react\";\nimport { InteractionConfig, InteractionMode } from \"../core/types\";\nimport { useLoadingInteraction } from \"./hooks\";\nimport { ModeSwitcher } from \"./ModeSwitcher\";\n\nexport interface LoadingInteractionProps\n  extends Omit<InteractionConfig, \"isLoading\"> {\n  isLoading: boolean;\n  children?: React.ReactNode;\n  width?: string | number;\n  height?: string | number;\n  style?: Partial<CSSStyleDeclaration>;\n  transitionDuration?: number;\n}\n\nexport const LoadingInteraction: React.FC<LoadingInteractionProps> = (\n  props\n) => {\n  const {\n    isLoading,\n    children,\n    availableModes = [\"game\", \"facts\", \"doodle\"],\n    showModeSwitcher = true,\n    width = \"100%\",\n    height = \"300px\",\n    ...config\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [currentMode, setCurrentMode] = useState<InteractionMode>(\n    props.mode || availableModes[0] || \"none\"\n  );\n\n  // Sync mode prop if changed externally\n  useEffect(() => {\n    if (props.mode) setCurrentMode(props.mode);\n  }, [props.mode]);\n\n  const activeConfig = {\n    ...config,\n    isLoading,\n    mode: currentMode,\n    availableModes,\n    style: props.style,\n    transitionDuration: props.transitionDuration,\n  };\n\n  useLoadingInteraction(containerRef, activeConfig);\n\n  if (!isLoading) {\n    return <>{children}</>;\n  }\n\n  return (\n    <div style={{ position: \"relative\", width, height }}>\n      {showModeSwitcher && availableModes.length > 1 && (\n        <div\n          style={{\n            position: \"absolute\",\n            bottom: 12,\n            right: 12,\n            width: \"auto\",\n            zIndex: 20,\n            pointerEvents: \"none\", // Allow clicks to pass through transparent areas\n          }}\n        >\n          {/* Re-enable pointer events for the switcher items */}\n          <div style={{ pointerEvents: \"auto\" }}>\n            <ModeSwitcher\n              modes={availableModes}\n              activeMode={currentMode}\n              onModeChange={setCurrentMode}\n            />\n          </div>\n        </div>\n      )}\n      <div\n        ref={containerRef}\n        style={{\n          width: \"100%\",\n          height: \"100%\",\n          background: \"#f5f5f5\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          borderRadius: \"8px\",\n          overflow: \"hidden\",\n        }}\n      />\n    </div>\n  );\n};\n"]}

package/dist/chunk-V4RO47V6.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var chunk4DE2IREA_cjs = require('./chunk-4DE2IREA.cjs');
+
+// src/facts/tech-stats.ts
+var STATS = [
+  { id: "1", text: "JavaScript is used by 98% of websites", category: "stats" },
+  {
+    id: "2",
+    text: "There are over 1.3 million npm packages",
+    category: "stats"
+  }
+];
+var StatsRenderer = class {
+  constructor(container, facts) {
+    chunk4DE2IREA_cjs.__publicField(this, "container");
+    this.container = container;
+    this.container.innerText = facts[0].text;
+  }
+  next() {
+  }
+  previous() {
+  }
+  favorite() {
+  }
+  destroy() {
+    this.container.innerHTML = "";
+  }
+};
+var TechStats = {
+  id: "tech-stats",
+  name: "Tech Stats",
+  category: "stats",
+  facts: STATS,
+  renderMini: (c) => new StatsRenderer(c, STATS),
+  renderFull: (c) => new StatsRenderer(c, STATS)
+};
+
+exports.TechStats = TechStats;
+//# sourceMappingURL=chunk-V4RO47V6.cjs.map
+//# sourceMappingURL=chunk-V4RO47V6.cjs.map

package/dist/chunk-V4RO47V6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/facts/tech-stats.ts"],"names":["__publicField"],"mappings":";;;;;AAEA,IAAM,KAAA,GAAgB;AAAA,EACpB,EAAE,EAAA,EAAI,GAAA,EAAK,IAAA,EAAM,uCAAA,EAAyC,UAAU,OAAA,EAAQ;AAAA,EAC5E;AAAA,IACE,EAAA,EAAI,GAAA;AAAA,IACJ,IAAA,EAAM,yCAAA;AAAA,IACN,QAAA,EAAU;AAAA;AAEd,CAAA;AAEA,IAAM,gBAAN,MAA6C;AAAA,EAE3C,WAAA,CAAY,WAAwB,KAAA,EAAe;AADnD,IAAAA,+BAAA,CAAA,IAAA,EAAQ,WAAA,CAAA;AAEN,IAAA,IAAA,CAAK,SAAA,GAAY,SAAA;AACjB,IAAA,IAAA,CAAK,SAAA,CAAU,SAAA,GAAY,KAAA,CAAM,CAAC,CAAA,CAAE,IAAA;AAAA,EACtC;AAAA,EAEA,IAAA,GAAO;AAAA,EAAC;AAAA,EACR,QAAA,GAAW;AAAA,EAAC;AAAA,EACZ,QAAA,GAAW;AAAA,EAAC;AAAA,EACZ,OAAA,GAAU;AACR,IAAA,IAAA,CAAK,UAAU,SAAA,GAAY,EAAA;AAAA,EAC7B;AACF,CAAA;AAEO,IAAM,SAAA,GAAyB;AAAA,EACpC,EAAA,EAAI,YAAA;AAAA,EACJ,IAAA,EAAM,YAAA;AAAA,EACN,QAAA,EAAU,OAAA;AAAA,EACV,KAAA,EAAO,KAAA;AAAA,EACP,YAAY,CAAC,CAAA,KAAM,IAAI,aAAA,CAAc,GAAG,KAAK,CAAA;AAAA,EAC7C,YAAY,CAAC,CAAA,KAAM,IAAI,aAAA,CAAc,GAAG,KAAK;AAC/C","file":"chunk-V4RO47V6.cjs","sourcesContent":["import { FactsPlugin, FactsInstance, Fact } from \"../core/types\";\n\nconst STATS: Fact[] = [\n  { id: \"1\", text: \"JavaScript is used by 98% of websites\", category: \"stats\" },\n  {\n    id: \"2\",\n    text: \"There are over 1.3 million npm packages\",\n    category: \"stats\",\n  },\n];\n\nclass StatsRenderer implements FactsInstance {\n  private container: HTMLElement;\n  constructor(container: HTMLElement, facts: Fact[]) {\n    this.container = container;\n    this.container.innerText = facts[0].text;\n  }\n\n  next() {}\n  previous() {}\n  favorite() {}\n  destroy() {\n    this.container.innerHTML = \"\";\n  }\n}\n\nexport const TechStats: FactsPlugin = {\n  id: \"tech-stats\",\n  name: \"Tech Stats\",\n  category: \"stats\",\n  facts: STATS,\n  renderMini: (c) => new StatsRenderer(c, STATS),\n  renderFull: (c) => new StatsRenderer(c, STATS),\n};\n"]}