@skillpet/circuit 0.5.2 → 0.6.0

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);
@@ -30652,9 +30713,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 +30731,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 +30808,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);
@@ -31038,9 +31100,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 +31118,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 +31196,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,12 +17,18 @@ 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 _showTooltip;

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.0",
   "description": "Circuit diagram library — render electrical schematics from JSON, with interactive SVG, themes, and Vue/React components",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",