@skillpet/circuit 0.5.2 → 0.6.1

package/dist/circuit.esm.js

@@ -30173,15 +30173,37 @@ var BUILTIN_THEMES = {
     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 };
@@ -30402,6 +30424,9 @@ var SchemdrawController = class {
     __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");
@@ -30419,6 +30444,42 @@ var SchemdrawController = class {
     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);
@@ -30466,13 +30527,28 @@ var SchemdrawController = class {
   }
   _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;
@@ -30652,9 +30728,11 @@ var SchemdrawController = class {
     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;
@@ -30668,6 +30746,7 @@ var SchemdrawController = class {
     if (this._destroyed) return;
     this._destroyed = true;
     this._unbindEvents();
+    this._teardownAutoTheme();
     if (this._tooltipEl) {
       this._tooltipEl.remove();
       this._tooltipEl = null;
@@ -30744,6 +30823,7 @@ export {
   BusLine,
   Button,
   CPE,
+  CSS_VARS,
   Capacitor,
   Capacitor2,
   CapacitorTrim,

package/dist/index.cjs

@@ -14380,6 +14380,7 @@ __export(index_exports, {
   BusLine: () => BusLine,
   Button: () => Button,
   CPE: () => CPE,
+  CSS_VARS: () => CSS_VARS,
   Capacitor: () => Capacitor,
   Capacitor2: () => Capacitor2,
   CapacitorTrim: () => CapacitorTrim,
@@ -30559,15 +30560,37 @@ var BUILTIN_THEMES = {
     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 };
@@ -30788,6 +30811,9 @@ var SchemdrawController = class {
     __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");
@@ -30805,6 +30831,42 @@ var SchemdrawController = class {
     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);
@@ -30852,13 +30914,28 @@ var SchemdrawController = class {
   }
   _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;
@@ -31038,9 +31115,11 @@ var SchemdrawController = class {
     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;
@@ -31054,6 +31133,7 @@ var SchemdrawController = class {
     if (this._destroyed) return;
     this._destroyed = true;
     this._unbindEvents();
+    this._teardownAutoTheme();
     if (this._tooltipEl) {
       this._tooltipEl.remove();
       this._tooltipEl = null;
@@ -31131,6 +31211,7 @@ function mountFromJson(container, json, opts) {
   BusLine,
   Button,
   CPE,
+  CSS_VARS,
   Capacitor,
   Capacitor2,
   CapacitorTrim,

package/dist/index.d.ts

@@ -68,7 +68,7 @@ export { OutletA, OutletB, OutletC, OutletD, OutletE, OutletF, OutletG, OutletH,
 export { VacuumTube, DualVacuumTube, NixieTube, TubeDiode, Triode, Tetrode, Pentode, } from "./elements/tubes.js";
 export { ElementImage } from "./elements/image.js";
 export { renderFromJson, type CircuitJson, type DrawingConfig, type ElementObject, type ElementSpec, type LabelSpec, type RenderOptions, } from "./json/render.js";
-export { type Theme, BUILTIN_THEMES, resolveTheme } from "./json/theme.js";
+export { type Theme, BUILTIN_THEMES, resolveTheme, CSS_VARS } from "./json/theme.js";
 export { ELEMENT_REGISTRY, getRegisteredTypes, getAvailableTypes, getAnchors, type ElementFactory } from "./json/registry.js";
 export { resolvePosition, resolvePositionX, resolvePositionY } from "./json/anchor-ref.js";
 export { validateCircuitJson, type ValidationResult, type ValidationError } from "./json/validate.js";

package/dist/json/mount.d.ts

@@ -17,14 +17,21 @@ export declare class SchemdrawController {
     private _theme;
     private _destroyed;
     private _tooltipEl;
+    private _autoObserver;
+    private _mediaQuery;
+    private _mediaHandler;
     private _boundClick;
     private _boundMouseover;
     private _boundMouseout;
     private _boundContextmenu;
     private _boundMousemove;
     constructor(container: HTMLElement, json: CircuitJson, opts: RenderOptions);
+    private _isAutoTheme;
+    private _initAutoTheme;
+    private _teardownAutoTheme;
     private _render;
     private _initTooltip;
+    private _applyTooltipTheme;
     private _showTooltip;
     private _hideTooltip;
     private _bindEvents;

package/dist/json/theme.d.ts

@@ -13,5 +13,14 @@ export interface Theme {
     lw: number;
 }
 export declare const BUILTIN_THEMES: Record<string, Theme>;
+/** CSS variable names used by `theme: "auto"`. Host page defines these to control circuit colors. */
+export declare const CSS_VARS: {
+    readonly bg: "--circuit-bg";
+    readonly stroke: "--circuit-stroke";
+    readonly fill: "--circuit-fill";
+    readonly text: "--circuit-text";
+    readonly font: "--circuit-font";
+    readonly lw: "--circuit-lw";
+};
 export declare function resolveTheme(theme?: string | Partial<Theme>): Theme;
 export declare function applyThemeToDrawingConfig(theme: Theme, drawingConfig?: Record<string, unknown>): Record<string, unknown>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skillpet/circuit",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "description": "Circuit diagram library — render electrical schematics from JSON, with interactive SVG, themes, and Vue/React components",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",