@skillpet/circuit 0.5.2 → 0.6.1

package/dist/circuit.bundle.js

@@ -14387,6 +14387,7 @@ var Circuit = (() => {
     BusLine: () => BusLine,
     Button: () => Button,
     CPE: () => CPE,
+    CSS_VARS: () => CSS_VARS,
     Capacitor: () => Capacitor,
     Capacitor2: () => Capacitor2,
     CapacitorTrim: () => CapacitorTrim,
@@ -30565,15 +30566,37 @@ var Circuit = (() => {
       lw: 1.5
     }
   };
+  var CSS_VARS = {
+    bg: "--circuit-bg",
+    stroke: "--circuit-stroke",
+    fill: "--circuit-fill",
+    text: "--circuit-text",
+    font: "--circuit-font",
+    lw: "--circuit-lw"
+  };
+  function readCssTheme() {
+    if (typeof getComputedStyle === "undefined") return { ...BUILTIN_THEMES.light };
+    const s = getComputedStyle(document.documentElement);
+    const v = (name) => s.getPropertyValue(name).trim();
+    return {
+      bg: v(CSS_VARS.bg) || "transparent",
+      stroke: v(CSS_VARS.stroke) || BUILTIN_THEMES.light.stroke,
+      fill: v(CSS_VARS.fill) || "none",
+      text: v(CSS_VARS.text) || BUILTIN_THEMES.light.text,
+      font: v(CSS_VARS.font) || BUILTIN_THEMES.light.font,
+      lw: parseFloat(v(CSS_VARS.lw)) || BUILTIN_THEMES.light.lw
+    };
+  }
   function resolveTheme(theme2) {
     if (theme2 === void 0) {
       return { ...BUILTIN_THEMES.light };
     }
     if (typeof theme2 === "string") {
+      if (theme2 === "auto") return readCssTheme();
       const found = BUILTIN_THEMES[theme2];
       if (!found) {
         throw new Error(
-          `Unknown theme "${theme2}". Available: ${Object.keys(BUILTIN_THEMES).join(", ")}`
+          `Unknown theme "${theme2}". Available: ${Object.keys(BUILTIN_THEMES).join(", ")}, auto`
         );
       }
       return { ...found };
@@ -30794,6 +30817,9 @@ var Circuit = (() => {
       __publicField(this, "_theme");
       __publicField(this, "_destroyed", false);
       __publicField(this, "_tooltipEl", null);
+      __publicField(this, "_autoObserver", null);
+      __publicField(this, "_mediaQuery", null);
+      __publicField(this, "_mediaHandler", null);
       __publicField(this, "_boundClick");
       __publicField(this, "_boundMouseover");
       __publicField(this, "_boundMouseout");
@@ -30811,6 +30837,42 @@ var Circuit = (() => {
       this._render();
       this._bindEvents();
       this._initTooltip();
+      this._initAutoTheme();
+    }
+    _isAutoTheme() {
+      return (this._opts.theme ?? this._json.theme) === "auto";
+    }
+    _initAutoTheme() {
+      if (!this._isAutoTheme()) return;
+      const rerender = () => {
+        if (this._destroyed) return;
+        this._theme = resolveTheme("auto");
+        this._unbindEvents();
+        this._render();
+        this._bindEvents();
+        this._selectedId = null;
+      };
+      this._autoObserver = new MutationObserver(rerender);
+      this._autoObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class", "data-theme", "data-color-mode", "style"]
+      });
+      if (typeof matchMedia !== "undefined") {
+        this._mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+        this._mediaHandler = rerender;
+        this._mediaQuery.addEventListener("change", this._mediaHandler);
+      }
+    }
+    _teardownAutoTheme() {
+      if (this._autoObserver) {
+        this._autoObserver.disconnect();
+        this._autoObserver = null;
+      }
+      if (this._mediaQuery && this._mediaHandler) {
+        this._mediaQuery.removeEventListener("change", this._mediaHandler);
+        this._mediaQuery = null;
+        this._mediaHandler = null;
+      }
     }
     _render() {
       const svgString = renderFromJson(this._json, this._opts);
@@ -30858,13 +30920,28 @@ var Circuit = (() => {
     }
     _initTooltip() {
       const tip = document.createElement("div");
-      tip.style.cssText = "position:fixed;z-index:99999;pointer-events:none;opacity:0;transition:opacity .12s ease;background:rgba(30,30,30,.92);color:#fff;font-size:12px;line-height:1.4;padding:5px 10px;border-radius:4px;max-width:260px;white-space:pre-wrap;box-shadow:0 2px 8px rgba(0,0,0,.25)";
+      tip.className = "schemdraw-tooltip";
+      tip.style.cssText = "position:fixed;z-index:99999;pointer-events:none;opacity:0;transition:opacity .15s ease;font-size:12px;line-height:1.4;padding:6px 12px;border-radius:6px;max-width:260px;white-space:pre-wrap;";
+      this._applyTooltipTheme(tip);
       document.body.appendChild(tip);
       this._tooltipEl = tip;
     }
+    _applyTooltipTheme(tip) {
+      const isDark = document.documentElement.classList.contains("dark") || document.documentElement.getAttribute("data-theme") === "dark" || typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches && !document.documentElement.classList.contains("light");
+      if (isDark) {
+        tip.style.background = "rgba(250,250,250,.95)";
+        tip.style.color = "#1a1a1a";
+        tip.style.boxShadow = "0 2px 12px rgba(0,0,0,.4)";
+      } else {
+        tip.style.background = "rgba(15,15,15,.92)";
+        tip.style.color = "#fff";
+        tip.style.boxShadow = "0 2px 8px rgba(0,0,0,.2)";
+      }
+    }
     _showTooltip(text2, clientX, clientY) {
       const tip = this._tooltipEl;
       if (!tip) return;
+      this._applyTooltipTheme(tip);
       tip.textContent = text2;
       tip.style.opacity = "1";
       const gap2 = 10;
@@ -31044,9 +31121,11 @@ var Circuit = (() => {
       this._selectedId = null;
     }
     setTheme(theme2) {
+      this._teardownAutoTheme();
       this._opts = { ...this._opts, theme: theme2 };
       this._theme = resolveTheme(theme2);
       this.update(this._json);
+      this._initAutoTheme();
     }
     update(json) {
       const circuit = typeof json === "string" ? JSON.parse(json) : json;
@@ -31060,6 +31139,7 @@ var Circuit = (() => {
       if (this._destroyed) return;
       this._destroyed = true;
       this._unbindEvents();
+      this._teardownAutoTheme();
       if (this._tooltipEl) {
         this._tooltipEl.remove();
         this._tooltipEl = null;