@skillpet/circuit 0.6.2 → 0.6.4

package/README.de.md

@@ -0,0 +1,150 @@
+# @skillpet/circuit
+
+[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md) | [Español](./README.es.md) | [Français](./README.fr.md) | [Deutsch](./README.de.md)
+
+<p align="center">
+  <strong>Schaltplan-Bibliothek — elektrische Schaltpläne aus JSON rendern, mit interaktivem SVG, Themes und Vue / React-Komponenten.</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/v/@skillpet/circuit.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/l/@skillpet/circuit.svg" alt="license"></a>
+  <a href="https://circuit.skill.pet"><img src="https://img.shields.io/badge/docs-circuit.skill.pet-blue" alt="docs"></a>
+</p>
+
+---
+
+**Website & Demos:** [circuit.skill.pet](https://circuit.skill.pet)
+
+## Funktionen
+
+- Schaltpläne aus einer einfachen JSON-Beschreibung rendern
+- Über 200 integrierte elektrische Bauteile (Widerstände, Kondensatoren, Dioden, Transistoren, ICs, Logikgatter usw.)
+- Interaktives SVG: Hover-Hervorhebung, Tooltips, Klick-Events
+- 3 integrierte Themes (Hell, Dunkel, Druck) + benutzerdefinierte Themes
+- Sanfte Farbübergänge zwischen Elementen
+- Vue 3 & React-Komponenten sofort einsatzbereit
+- Browser-Bundle (Script-Tag) & ESM / CJS-Unterstützung
+- KaTeX-Mathematik-Label-Rendering
+- Flussdiagramme, DSP-Blöcke, Breadboard-Bauteile
+- Keine Laufzeit-Abhängigkeiten (KaTeX ist optional)
+
+## Installation
+
+```bash
+npm install @skillpet/circuit
+```
+
+## Schnellstart
+
+### ESM / TypeScript
+
+```ts
+import { renderFromJson } from "@skillpet/circuit";
+
+const svg = renderFromJson({
+  elements: [
+    { type: "SourceV", d: "up", label: "12V" },
+    { type: "ResistorIEEE", label: "R1 10kΩ" },
+    { type: "Capacitor", d: "down", label: "C1 100nF" },
+    { type: "Line", d: "left" },
+    { type: "Ground" },
+  ],
+});
+```
+
+### Browser (Script-Tag)
+
+```html
+<script src="https://unpkg.com/@skillpet/circuit/dist/circuit.bundle.min.js"></script>
+<script>
+  const svg = Circuit.renderFromJson({
+    elements: [
+      { type: "ResistorIEEE", label: "R1" },
+      { type: "Capacitor", d: "down", label: "C1" },
+    ],
+  });
+  document.getElementById("output").innerHTML = svg;
+</script>
+```
+
+### Interaktiver Modus
+
+In das DOM einbinden mit Hover-Hervorhebung, Tooltips und Klick-Events:
+
+```ts
+import { mountFromJson } from "@skillpet/circuit";
+
+const ctrl = mountFromJson(document.getElementById("container"), {
+  elements: [
+    { type: "ResistorIEEE", id: "R1", tooltip: "100kΩ Kohleschichtwiderstand" },
+    { type: "Capacitor", d: "down", id: "C1", tooltip: "0.1μF Keramik" },
+  ],
+}, { interactive: true });
+
+ctrl.on("element:click", (info) => console.log("Klick:", info.id));
+ctrl.on("element:hover", (info) => console.log("Hover:", info.tooltip));
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { CircuitDiagram } from "@skillpet/circuit/vue";
+
+const circuit = {
+  elements: [
+    { type: "ResistorIEEE", label: "R1", id: "R1", tooltip: "100kΩ" },
+    { type: "Capacitor", d: "down", label: "C1" },
+  ],
+};
+</script>
+
+<template>
+  <CircuitDiagram :circuit="circuit" interactive @element-click="console.log" />
+</template>
+```
+
+### React
+
+```tsx
+import { CircuitDiagram } from "@skillpet/circuit/react";
+
+function App() {
+  return (
+    <CircuitDiagram
+      circuit={{ elements: [{ type: "ResistorIEEE", label: "R1" }] }}
+      interactive
+      onElementClick={(info) => console.log(info)}
+    />
+  );
+}
+```
+
+## Themes
+
+Drei integrierte Themes: `light` (Standard), `dark` und `print`.
+
+```ts
+const svg = renderFromJson(circuit, { theme: "dark" });
+```
+
+## Farbübergänge
+
+Sanfte Gradientenübergänge zwischen unterschiedlich gefärbten Elementen:
+
+```ts
+const svg = renderFromJson({
+  drawing: { colorTransition: true },
+  elements: [
+    { type: "SourceV", d: "up", color: "#2ecc71" },
+    { type: "ResistorIEEE", color: "#e74c3c" },
+  ],
+}, { colorTransition: true });
+```
+
+## Lizenz
+
+Kostenlos für den persönlichen und Bildungsgebrauch. Für die kommerzielle Nutzung ist eine separate Lizenz erforderlich.
+Die vollständigen Bedingungen finden Sie in der LICENSE-Datei dieses Pakets.
+Für kommerzielle Lizenzen kontaktieren Sie **license@skill.pet** oder besuchen Sie [circuit.skill.pet/license](https://circuit.skill.pet/license).

package/README.es.md

@@ -0,0 +1,150 @@
+# @skillpet/circuit
+
+[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md) | [Español](./README.es.md) | [Français](./README.fr.md) | [Deutsch](./README.de.md)
+
+<p align="center">
+  <strong>Biblioteca de diagramas de circuitos — renderiza esquemas eléctricos desde JSON, con SVG interactivo, temas y componentes Vue / React.</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/v/@skillpet/circuit.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/l/@skillpet/circuit.svg" alt="license"></a>
+  <a href="https://circuit.skill.pet"><img src="https://img.shields.io/badge/docs-circuit.skill.pet-blue" alt="docs"></a>
+</p>
+
+---
+
+**Sitio web y demos:** [circuit.skill.pet](https://circuit.skill.pet)
+
+## Características
+
+- Renderiza diagramas de circuitos desde una descripción JSON simple
+- Más de 200 componentes eléctricos integrados (resistencias, condensadores, diodos, transistores, circuitos integrados, puertas lógicas, etc.)
+- SVG interactivo: resaltado al pasar el ratón, tooltips, eventos de clic
+- 3 temas integrados (claro, oscuro, impresión) + temas personalizados
+- Transiciones de color suaves entre elementos
+- Componentes Vue 3 y React listos para usar
+- Bundle para navegador (etiqueta script) y soporte ESM / CJS
+- Renderizado de etiquetas matemáticas con KaTeX
+- Diagramas de flujo, bloques DSP, componentes de protoboard
+- Sin dependencias en tiempo de ejecución (KaTeX es opcional)
+
+## Instalación
+
+```bash
+npm install @skillpet/circuit
+```
+
+## Inicio rápido
+
+### ESM / TypeScript
+
+```ts
+import { renderFromJson } from "@skillpet/circuit";
+
+const svg = renderFromJson({
+  elements: [
+    { type: "SourceV", d: "up", label: "12V" },
+    { type: "ResistorIEEE", label: "R1 10kΩ" },
+    { type: "Capacitor", d: "down", label: "C1 100nF" },
+    { type: "Line", d: "left" },
+    { type: "Ground" },
+  ],
+});
+```
+
+### Navegador (etiqueta Script)
+
+```html
+<script src="https://unpkg.com/@skillpet/circuit/dist/circuit.bundle.min.js"></script>
+<script>
+  const svg = Circuit.renderFromJson({
+    elements: [
+      { type: "ResistorIEEE", label: "R1" },
+      { type: "Capacitor", d: "down", label: "C1" },
+    ],
+  });
+  document.getElementById("output").innerHTML = svg;
+</script>
+```
+
+### Modo interactivo
+
+Monta en el DOM con resaltado al pasar el ratón, tooltips y eventos de clic:
+
+```ts
+import { mountFromJson } from "@skillpet/circuit";
+
+const ctrl = mountFromJson(document.getElementById("container"), {
+  elements: [
+    { type: "ResistorIEEE", id: "R1", tooltip: "100kΩ Película de carbón" },
+    { type: "Capacitor", d: "down", id: "C1", tooltip: "0.1μF Cerámico" },
+  ],
+}, { interactive: true });
+
+ctrl.on("element:click", (info) => console.log("Clic:", info.id));
+ctrl.on("element:hover", (info) => console.log("Hover:", info.tooltip));
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { CircuitDiagram } from "@skillpet/circuit/vue";
+
+const circuit = {
+  elements: [
+    { type: "ResistorIEEE", label: "R1", id: "R1", tooltip: "100kΩ" },
+    { type: "Capacitor", d: "down", label: "C1" },
+  ],
+};
+</script>
+
+<template>
+  <CircuitDiagram :circuit="circuit" interactive @element-click="console.log" />
+</template>
+```
+
+### React
+
+```tsx
+import { CircuitDiagram } from "@skillpet/circuit/react";
+
+function App() {
+  return (
+    <CircuitDiagram
+      circuit={{ elements: [{ type: "ResistorIEEE", label: "R1" }] }}
+      interactive
+      onElementClick={(info) => console.log(info)}
+    />
+  );
+}
+```
+
+## Temas
+
+Tres temas integrados: `light` (predeterminado), `dark` y `print`.
+
+```ts
+const svg = renderFromJson(circuit, { theme: "dark" });
+```
+
+## Transiciones de color
+
+Transiciones de gradiente suaves entre elementos de diferentes colores:
+
+```ts
+const svg = renderFromJson({
+  drawing: { colorTransition: true },
+  elements: [
+    { type: "SourceV", d: "up", color: "#2ecc71" },
+    { type: "ResistorIEEE", color: "#e74c3c" },
+  ],
+}, { colorTransition: true });
+```
+
+## Licencia
+
+Gratis para uso personal y educativo. El uso comercial requiere una licencia separada.
+Consulte el archivo LICENSE incluido en este paquete para los términos completos.
+Para licencias comerciales, contacte **license@skill.pet** o visite [circuit.skill.pet/license](https://circuit.skill.pet/license).

package/README.fr.md

@@ -0,0 +1,150 @@
+# @skillpet/circuit
+
+[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md) | [Español](./README.es.md) | [Français](./README.fr.md) | [Deutsch](./README.de.md)
+
+<p align="center">
+  <strong>Bibliothèque de schémas de circuits — rendez des schémas électriques à partir de JSON, avec SVG interactif, thèmes et composants Vue / React.</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/v/@skillpet/circuit.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/l/@skillpet/circuit.svg" alt="license"></a>
+  <a href="https://circuit.skill.pet"><img src="https://img.shields.io/badge/docs-circuit.skill.pet-blue" alt="docs"></a>
+</p>
+
+---
+
+**Site web et démos :** [circuit.skill.pet](https://circuit.skill.pet)
+
+## Fonctionnalités
+
+- Rendu de schémas de circuits à partir d'une simple description JSON
+- Plus de 200 composants électriques intégrés (résistances, condensateurs, diodes, transistors, circuits intégrés, portes logiques, etc.)
+- SVG interactif : surbrillance au survol, infobulles, événements de clic
+- 3 thèmes intégrés (clair, sombre, impression) + thèmes personnalisés
+- Transitions de couleur fluides entre les éléments
+- Composants Vue 3 et React prêts à l'emploi
+- Bundle navigateur (balise script) et support ESM / CJS
+- Rendu d'étiquettes mathématiques avec KaTeX
+- Organigrammes, blocs DSP, composants de breadboard
+- Aucune dépendance runtime (KaTeX est optionnel)
+
+## Installation
+
+```bash
+npm install @skillpet/circuit
+```
+
+## Démarrage rapide
+
+### ESM / TypeScript
+
+```ts
+import { renderFromJson } from "@skillpet/circuit";
+
+const svg = renderFromJson({
+  elements: [
+    { type: "SourceV", d: "up", label: "12V" },
+    { type: "ResistorIEEE", label: "R1 10kΩ" },
+    { type: "Capacitor", d: "down", label: "C1 100nF" },
+    { type: "Line", d: "left" },
+    { type: "Ground" },
+  ],
+});
+```
+
+### Navigateur (balise Script)
+
+```html
+<script src="https://unpkg.com/@skillpet/circuit/dist/circuit.bundle.min.js"></script>
+<script>
+  const svg = Circuit.renderFromJson({
+    elements: [
+      { type: "ResistorIEEE", label: "R1" },
+      { type: "Capacitor", d: "down", label: "C1" },
+    ],
+  });
+  document.getElementById("output").innerHTML = svg;
+</script>
+```
+
+### Mode interactif
+
+Montez dans le DOM avec surbrillance au survol, infobulles et événements de clic :
+
+```ts
+import { mountFromJson } from "@skillpet/circuit";
+
+const ctrl = mountFromJson(document.getElementById("container"), {
+  elements: [
+    { type: "ResistorIEEE", id: "R1", tooltip: "100kΩ Film carbone" },
+    { type: "Capacitor", d: "down", id: "C1", tooltip: "0.1μF Céramique" },
+  ],
+}, { interactive: true });
+
+ctrl.on("element:click", (info) => console.log("Clic :", info.id));
+ctrl.on("element:hover", (info) => console.log("Survol :", info.tooltip));
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { CircuitDiagram } from "@skillpet/circuit/vue";
+
+const circuit = {
+  elements: [
+    { type: "ResistorIEEE", label: "R1", id: "R1", tooltip: "100kΩ" },
+    { type: "Capacitor", d: "down", label: "C1" },
+  ],
+};
+</script>
+
+<template>
+  <CircuitDiagram :circuit="circuit" interactive @element-click="console.log" />
+</template>
+```
+
+### React
+
+```tsx
+import { CircuitDiagram } from "@skillpet/circuit/react";
+
+function App() {
+  return (
+    <CircuitDiagram
+      circuit={{ elements: [{ type: "ResistorIEEE", label: "R1" }] }}
+      interactive
+      onElementClick={(info) => console.log(info)}
+    />
+  );
+}
+```
+
+## Thèmes
+
+Trois thèmes intégrés : `light` (par défaut), `dark` et `print`.
+
+```ts
+const svg = renderFromJson(circuit, { theme: "dark" });
+```
+
+## Transitions de couleur
+
+Transitions en dégradé fluides entre des éléments de couleurs différentes :
+
+```ts
+const svg = renderFromJson({
+  drawing: { colorTransition: true },
+  elements: [
+    { type: "SourceV", d: "up", color: "#2ecc71" },
+    { type: "ResistorIEEE", color: "#e74c3c" },
+  ],
+}, { colorTransition: true });
+```
+
+## Licence
+
+Gratuit pour un usage personnel et éducatif. L'utilisation commerciale nécessite une licence séparée.
+Consultez le fichier LICENSE inclus dans ce package pour les conditions complètes.
+Pour les licences commerciales, contactez **license@skill.pet** ou visitez [circuit.skill.pet/license](https://circuit.skill.pet/license).

package/README.ja.md

@@ -0,0 +1,150 @@
+# @skillpet/circuit
+
+[English](./README.md) | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [한국어](./README.ko.md) | [Español](./README.es.md) | [Français](./README.fr.md) | [Deutsch](./README.de.md)
+
+<p align="center">
+  <strong>回路図ライブラリ — JSON から電気回路図をレンダリング。インタラクティブ SVG、テーマ、Vue / React コンポーネント対応。</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/v/@skillpet/circuit.svg" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/@skillpet/circuit"><img src="https://img.shields.io/npm/l/@skillpet/circuit.svg" alt="license"></a>
+  <a href="https://circuit.skill.pet"><img src="https://img.shields.io/badge/docs-circuit.skill.pet-blue" alt="docs"></a>
+</p>
+
+---
+
+**ウェブサイト＆デモ：** [circuit.skill.pet](https://circuit.skill.pet)
+
+## 特徴
+
+- シンプルな JSON 記述から回路図をレンダリング
+- 200 以上の内蔵電気部品（抵抗器、コンデンサ、ダイオード、トランジスタ、IC、論理ゲートなど）
+- インタラクティブ SVG：ホバーハイライト、ツールチップ、クリックイベント
+- 3 つの内蔵テーマ（ライト、ダーク、印刷）＋カスタムテーマ
+- 要素間のスムーズなカラートランジション
+- Vue 3 & React コンポーネントをすぐに利用可能
+- ブラウザバンドル（script タグ）& ESM / CJS サポート
+- KaTeX 数式ラベルレンダリング
+- フローチャート、DSP ブロック、ブレッドボード部品
+- ランタイム依存なし（KaTeX はオプション）
+
+## インストール
+
+```bash
+npm install @skillpet/circuit
+```
+
+## クイックスタート
+
+### ESM / TypeScript
+
+```ts
+import { renderFromJson } from "@skillpet/circuit";
+
+const svg = renderFromJson({
+  elements: [
+    { type: "SourceV", d: "up", label: "12V" },
+    { type: "ResistorIEEE", label: "R1 10kΩ" },
+    { type: "Capacitor", d: "down", label: "C1 100nF" },
+    { type: "Line", d: "left" },
+    { type: "Ground" },
+  ],
+});
+```
+
+### ブラウザ（Script タグ）
+
+```html
+<script src="https://unpkg.com/@skillpet/circuit/dist/circuit.bundle.min.js"></script>
+<script>
+  const svg = Circuit.renderFromJson({
+    elements: [
+      { type: "ResistorIEEE", label: "R1" },
+      { type: "Capacitor", d: "down", label: "C1" },
+    ],
+  });
+  document.getElementById("output").innerHTML = svg;
+</script>
+```
+
+### インタラクティブモード
+
+DOM にマウントして、ホバーハイライト、ツールチップ、クリックイベントを有効化：
+
+```ts
+import { mountFromJson } from "@skillpet/circuit";
+
+const ctrl = mountFromJson(document.getElementById("container"), {
+  elements: [
+    { type: "ResistorIEEE", id: "R1", tooltip: "100kΩ カーボン皮膜" },
+    { type: "Capacitor", d: "down", id: "C1", tooltip: "0.1μF セラミック" },
+  ],
+}, { interactive: true });
+
+ctrl.on("element:click", (info) => console.log("クリック:", info.id));
+ctrl.on("element:hover", (info) => console.log("ホバー:", info.tooltip));
+```
+
+### Vue 3
+
+```vue
+<script setup>
+import { CircuitDiagram } from "@skillpet/circuit/vue";
+
+const circuit = {
+  elements: [
+    { type: "ResistorIEEE", label: "R1", id: "R1", tooltip: "100kΩ" },
+    { type: "Capacitor", d: "down", label: "C1" },
+  ],
+};
+</script>
+
+<template>
+  <CircuitDiagram :circuit="circuit" interactive @element-click="console.log" />
+</template>
+```
+
+### React
+
+```tsx
+import { CircuitDiagram } from "@skillpet/circuit/react";
+
+function App() {
+  return (
+    <CircuitDiagram
+      circuit={{ elements: [{ type: "ResistorIEEE", label: "R1" }] }}
+      interactive
+      onElementClick={(info) => console.log(info)}
+    />
+  );
+}
+```
+
+## テーマ
+
+3 つの内蔵テーマ：`light`（デフォルト）、`dark`、`print`。
+
+```ts
+const svg = renderFromJson(circuit, { theme: "dark" });
+```
+
+## カラートランジション
+
+異なる色の要素間でスムーズなグラデーション遷移：
+
+```ts
+const svg = renderFromJson({
+  drawing: { colorTransition: true },
+  elements: [
+    { type: "SourceV", d: "up", color: "#2ecc71" },
+    { type: "ResistorIEEE", color: "#e74c3c" },
+  ],
+}, { colorTransition: true });
+```
+
+## ライセンス
+
+個人・教育目的は無料です。商用利用には別途ライセンスが必要です。
+詳細は本パッケージの LICENSE ファイルをご覧ください。
+商用ライセンスについては **license@skill.pet** または [circuit.skill.pet/license](https://circuit.skill.pet/license) までお問い合わせください。