@tscircuit/schematic-viewer 0.0.1

package/dist/schematic-components/SchematicText.js

@@ -0,0 +1,71 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schematic-components/SchematicText.tsx
+var SchematicText_exports = {};
+__export(SchematicText_exports, {
+  SchematicText: () => SchematicText,
+  default: () => SchematicText_default
+});
+module.exports = __toCommonJS(SchematicText_exports);
+
+// src/lib/render-context/index.ts
+var import_zustand = __toESM(require("zustand"));
+var import_transformation_matrix = require("transformation-matrix");
+var useRenderContext = (0, import_zustand.default)()(
+  (set, get) => ({
+    camera_transform: (0, import_transformation_matrix.compose)((0, import_transformation_matrix.scale)(100, 100, 0, 0))
+  })
+);
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/schematic-components/SchematicText.tsx
+var import_transformation_matrix2 = require("transformation-matrix");
+var import_react_use_measure = __toESM(require("react-use-measure"));
+var SchematicText = ({ schematic_text }) => {
+  const ct = useCameraTransform();
+  const { text, position, anchor } = schematic_text;
+  const tPos = (0, import_transformation_matrix2.applyToPoint)(ct, position);
+  const [boundsRef, bounds] = (0, import_react_use_measure.default)();
+  let offset = [0, 0];
+  if (anchor === "center") {
+    offset = [-bounds.width / 2, -bounds.height / 2];
+  } else if (anchor === "left") {
+    offset = [0, -bounds.height / 2];
+  } else if (anchor === "right") {
+    offset = [-bounds.width, -bounds.height / 2];
+  }
+  return <div ref={boundsRef} style={{
+    fontFamily: "'IBM Plex Mono', monospace",
+    position: "absolute",
+    left: tPos.x + offset[0],
+    top: tPos.y + offset[1]
+  }}>{text}</div>;
+};
+var SchematicText_default = SchematicText;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SchematicText
+});
+//# sourceMappingURL=SchematicText.js.map

package/dist/schematic-components/SchematicText.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schematic-components/SchematicText.tsx","../../src/lib/render-context/index.ts"],"sourcesContent":["import * as Type from \"lib/types\"\nimport SVGPathComponent from \"./SVGPathComponent\"\nimport Path from \"svg-path-generator\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\nimport { useCameraTransform } from \"lib/render-context\"\nimport { applyToPoint } from \"transformation-matrix\"\nimport useMeasure from \"react-use-measure\"\n\ninterface Props {\n  schematic_text: Type.SchematicText\n}\n\nexport const SchematicText = ({ schematic_text }: Props) => {\n  const ct = useCameraTransform()\n  const { text, position, anchor } = schematic_text\n  const tPos = applyToPoint(ct, position)\n  const [boundsRef, bounds] = useMeasure()\n  let offset = [0, 0]\n  if (anchor === \"center\") {\n    offset = [-bounds.width / 2, -bounds.height / 2]\n  } else if (anchor === \"left\") {\n    offset = [0, -bounds.height / 2]\n  } else if (anchor === \"right\") {\n    offset = [-bounds.width, -bounds.height / 2]\n  }\n  return (\n    <div\n      ref={boundsRef}\n      style={{\n        fontFamily: \"'IBM Plex Mono', monospace\",\n        position: \"absolute\",\n        left: tPos.x + offset[0],\n        top: tPos.y + offset[1],\n      }}\n    >\n      {text}\n    </div>\n  )\n}\n\nexport default SchematicText\n","import createStore from \"zustand\"\nimport { Matrix, compose, scale } from \"transformation-matrix\"\n\ninterface RenderContextState {\n  camera_transform: Matrix\n}\n\nexport const useRenderContext = createStore<RenderContextState>()(\n  (set, get) => ({\n    camera_transform: compose(scale(100, 100, 0, 0)),\n  })\n)\n\nexport const useCameraTransform = () =>\n  useRenderContext((s) => s.camera_transform)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAAwB;AACxB,mCAAuC;AAMhC,IAAM,uBAAmB,eAAAA,SAAgC;AAAA,EAC9D,CAAC,KAAK,SAAS;AAAA,IACb,sBAAkB,0CAAQ,oCAAM,KAAK,KAAK,GAAG,CAAC,CAAC;AAAA,EACjD;AACF;AAEO,IAAM,qBAAqB,MAChC,iBAAiB,CAAC,MAAM,EAAE,gBAAgB;;;ADT5C,IAAAC,gCAA6B;AAC7B,+BAAuB;AAMhB,IAAM,gBAAgB,CAAC,EAAE,eAAe,MAAa;AAC1D,QAAM,KAAK,mBAAmB;AAC9B,QAAM,EAAE,MAAM,UAAU,OAAO,IAAI;AACnC,QAAM,WAAO,4CAAa,IAAI,QAAQ;AACtC,QAAM,CAAC,WAAW,MAAM,QAAI,yBAAAC,SAAW;AACvC,MAAI,SAAS,CAAC,GAAG,CAAC;AAClB,MAAI,WAAW,UAAU;AACvB,aAAS,CAAC,CAAC,OAAO,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC;AAAA,EACjD,WAAW,WAAW,QAAQ;AAC5B,aAAS,CAAC,GAAG,CAAC,OAAO,SAAS,CAAC;AAAA,EACjC,WAAW,WAAW,SAAS;AAC7B,aAAS,CAAC,CAAC,OAAO,OAAO,CAAC,OAAO,SAAS,CAAC;AAAA,EAC7C;AACA,SACE,CAAC,IACC,KAAK,WACL,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,MAAM,KAAK,IAAI,OAAO;AAAA,IACtB,KAAK,KAAK,IAAI,OAAO;AAAA,EACvB,IAEC,KACH,EAVC;AAYL;AAEA,IAAO,wBAAQ;","names":["createStore","import_transformation_matrix","useMeasure"]}

package/dist/schematic-components/SchematicTrace.js

@@ -0,0 +1,137 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schematic-components/SchematicTrace.tsx
+var SchematicTrace_exports = {};
+__export(SchematicTrace_exports, {
+  SchematicTrace: () => SchematicTrace,
+  default: () => SchematicTrace_default
+});
+module.exports = __toCommonJS(SchematicTrace_exports);
+
+// src/lib/render-context/index.ts
+var import_zustand = __toESM(require("zustand"));
+var import_transformation_matrix = require("transformation-matrix");
+var useRenderContext = (0, import_zustand.default)()(
+  (set, get) => ({
+    camera_transform: (0, import_transformation_matrix.compose)((0, import_transformation_matrix.scale)(100, 100, 0, 0))
+  })
+);
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/lib/utils/get-svg-path-bounds.ts
+var import_svg_path_bounds = __toESM(require("svg-path-bounds"));
+function getSVGPathBounds(ds) {
+  if (typeof ds === "string")
+    ds = [ds];
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const d of ds) {
+    const [left, top, right, bottom] = (0, import_svg_path_bounds.default)(d);
+    minX = Math.min(left, minX);
+    maxX = Math.max(right, maxX);
+    minY = Math.min(top, minY);
+    maxY = Math.max(bottom, maxY);
+  }
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+}
+var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var import_transformation_matrix2 = require("transformation-matrix");
+var SVGPathComponent = ({ size, center, rotation, paths }) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    );
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const absoluteCenter = (0, import_transformation_matrix2.applyToPoint)(ct, center);
+  const absoluteSize = {
+    width: Math.max(1, size.width * ct.a),
+    height: Math.max(1, size.height * ct.d)
+  };
+  return <svg style={{
+    position: "absolute",
+    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+    left: absoluteCenter.x - absoluteSize.width / 2,
+    top: absoluteCenter.y - absoluteSize.height / 2
+  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
+};
+var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SchematicTrace.tsx
+var import_svg_path_generator = __toESM(require("svg-path-generator"));
+
+// src/schematic-components/RenderError.tsx
+var RenderError_default = ({ text }) => {
+  return <div style={{
+    position: "fixed",
+    backgroundColor: "red",
+    color: "white",
+    fontSize: 14,
+    fontFamily: "sans-serif",
+    padding: 5,
+    right: 0,
+    top: 0,
+    opacity: 0.75
+  }}>{text}</div>;
+};
+
+// src/schematic-components/SchematicTrace.tsx
+var SchematicTrace = ({ trace: { source, schematic } }) => {
+  const edges = schematic.edges;
+  if (edges.length === 0) {
+    return <RenderError_default text="Route with 0 edges" />;
+  }
+  const path = (0, import_svg_path_generator.default)();
+  for (let i = 0; i < edges.length; i++) {
+    path.moveTo(edges[i].from.x, edges[i].from.y);
+    path.lineTo(edges[i].to.x, edges[i].to.y);
+  }
+  const d = path.toString();
+  const pathBounds = get_svg_path_bounds_default(d);
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const center = {
+    x: pathBounds.minX + pathBounds.width / 2,
+    y: pathBounds.minY + pathBounds.height / 2
+  };
+  return <SVGPathComponent_default rotation={0} center={center} size={pathBounds} paths={[
+    {
+      stroke: "green",
+      strokeWidth: 0.02,
+      d
+    }
+  ]} />;
+};
+var SchematicTrace_default = SchematicTrace;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SchematicTrace
+});
+//# sourceMappingURL=SchematicTrace.js.map

package/dist/schematic-components/SchematicTrace.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schematic-components/SchematicTrace.tsx","../../src/lib/render-context/index.ts","../../src/lib/utils/get-svg-path-bounds.ts","../../src/schematic-components/SVGPathComponent.tsx","../../src/schematic-components/RenderError.tsx"],"sourcesContent":["import * as Type from \"lib/types\"\nimport SVGPathComponent from \"./SVGPathComponent\"\nimport Path from \"svg-path-generator\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\nimport RenderError from \"./RenderError\"\n\ninterface Props {\n  trace: {\n    source: Type.SourceTrace\n    schematic: Type.SchematicTrace\n  }\n}\n\nexport const SchematicTrace = ({ trace: { source, schematic } }: Props) => {\n  const edges = schematic.edges\n  if (edges.length === 0) {\n    return <RenderError text=\"Route with 0 edges\" />\n  }\n  const path = Path()\n  for (let i = 0; i < edges.length; i++) {\n    path.moveTo(edges[i].from.x, edges[i].from.y)\n    path.lineTo(edges[i].to.x, edges[i].to.y)\n  }\n  const d = path.toString()\n  const pathBounds = getSVGPathBounds(d)\n  pathBounds.height = Math.max(pathBounds.height, 1)\n  pathBounds.width = Math.max(pathBounds.width, 1)\n  const center = {\n    x: pathBounds.minX + pathBounds.width / 2,\n    y: pathBounds.minY + pathBounds.height / 2,\n  }\n  return (\n    <SVGPathComponent\n      rotation={0}\n      center={center}\n      size={pathBounds}\n      paths={[\n        {\n          stroke: \"green\",\n          strokeWidth: 0.02,\n          d,\n        },\n      ]}\n    />\n  )\n}\n\nexport default SchematicTrace\n","import createStore from \"zustand\"\nimport { Matrix, compose, scale } from \"transformation-matrix\"\n\ninterface RenderContextState {\n  camera_transform: Matrix\n}\n\nexport const useRenderContext = createStore<RenderContextState>()(\n  (set, get) => ({\n    camera_transform: compose(scale(100, 100, 0, 0)),\n  })\n)\n\nexport const useCameraTransform = () =>\n  useRenderContext((s) => s.camera_transform)\n","import svgPathBounds from \"svg-path-bounds\"\n\nexport function getSVGPathBounds(ds: string[] | string) {\n  if (typeof ds === \"string\") ds = [ds]\n  let minX = Infinity,\n    maxX = -Infinity,\n    minY = Infinity,\n    maxY = -Infinity\n\n  for (const d of ds) {\n    const [left, top, right, bottom] = svgPathBounds(d)\n\n    minX = Math.min(left, minX)\n    maxX = Math.max(right, maxX)\n    minY = Math.min(top, minY)\n    maxY = Math.max(bottom, maxY)\n  }\n\n  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY }\n}\n\nexport default getSVGPathBounds\n","import { useCameraTransform } from \"lib/render-context\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\n\nimport { applyToPoint } from \"transformation-matrix\"\n\ninterface Props {\n  rotation: number\n  center: { x: number; y: number }\n  size: { width: number; height: number }\n  paths: Array<{\n    strokeWidth: number\n    stroke: string\n    d: string\n  }>\n}\n\nexport const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {\n  const ct = useCameraTransform()\n  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))\n  // Margin in SVG Space\n  const badRatio =\n    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >\n    0.01\n  if (badRatio) {\n    console.warn(\n      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`\n    )\n  }\n  pathBounds.height = Math.max(pathBounds.height, 1)\n  pathBounds.width = Math.max(pathBounds.width, 1)\n  const absoluteCenter = applyToPoint(ct, center)\n  const absoluteSize = {\n    width: Math.max(1, size.width * ct.a),\n    height: Math.max(1, size.height * ct.d),\n  }\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        transform: rotation === 0 ? \"\" : `rotate(${rotation}rad)`,\n        left: absoluteCenter.x - absoluteSize.width / 2,\n        top: absoluteCenter.y - absoluteSize.height / 2,\n        // backgroundColor: badRatio ? \"rgba(255, 0, 0, 0.5)\" : \"transparent\",\n      }}\n      overflow=\"visible\"\n      width={absoluteSize.width}\n      height={absoluteSize.height}\n      viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}\n    >\n      {paths.map((p, i) => (\n        <path\n          key={i}\n          fill=\"none\"\n          strokeWidth={2 * (p.strokeWidth || 1)}\n          stroke={p.stroke || \"red\"}\n          d={p.d}\n        />\n      ))}\n    </svg>\n  )\n}\n\nexport default SVGPathComponent\n","interface Props {\n  text: string\n}\n\nexport default ({ text }: Props) => {\n  return (\n    <div\n      style={{\n        position: \"fixed\",\n        backgroundColor: \"red\",\n        color: \"white\",\n        fontSize: 14,\n        fontFamily: \"sans-serif\",\n        padding: 5,\n        right: 0,\n        top: 0,\n        opacity: 0.75,\n      }}\n    >\n      {text}\n    </div>\n  )\n}\n"],"mappings":"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","names":["createStore","svgPathBounds","import_transformation_matrix","Path"]}

package/dist/schematic-components/SimpleCapacitor.js

@@ -0,0 +1,103 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schematic-components/SimpleCapacitor.tsx
+var SimpleCapacitor_exports = {};
+__export(SimpleCapacitor_exports, {
+  SimpleCapacitor: () => SimpleCapacitor,
+  default: () => SimpleCapacitor_default
+});
+module.exports = __toCommonJS(SimpleCapacitor_exports);
+
+// src/lib/render-context/index.ts
+var import_zustand = __toESM(require("zustand"));
+var import_transformation_matrix = require("transformation-matrix");
+var useRenderContext = (0, import_zustand.default)()(
+  (set, get) => ({
+    camera_transform: (0, import_transformation_matrix.compose)((0, import_transformation_matrix.scale)(100, 100, 0, 0))
+  })
+);
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/lib/utils/get-svg-path-bounds.ts
+var import_svg_path_bounds = __toESM(require("svg-path-bounds"));
+function getSVGPathBounds(ds) {
+  if (typeof ds === "string")
+    ds = [ds];
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const d of ds) {
+    const [left, top, right, bottom] = (0, import_svg_path_bounds.default)(d);
+    minX = Math.min(left, minX);
+    maxX = Math.max(right, maxX);
+    minY = Math.min(top, minY);
+    maxY = Math.max(bottom, maxY);
+  }
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+}
+var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var import_transformation_matrix2 = require("transformation-matrix");
+var SVGPathComponent = ({ size, center, rotation, paths }) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    );
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const absoluteCenter = (0, import_transformation_matrix2.applyToPoint)(ct, center);
+  const absoluteSize = {
+    width: Math.max(1, size.width * ct.a),
+    height: Math.max(1, size.height * ct.d)
+  };
+  return <svg style={{
+    position: "absolute",
+    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+    left: absoluteCenter.x - absoluteSize.width / 2,
+    top: absoluteCenter.y - absoluteSize.height / 2
+  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
+};
+var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SimpleCapacitor.tsx
+var SimpleCapacitor = ({
+  component: { source, schematic }
+}) => {
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    { stroke: "red", strokeWidth: 1, d: "M 0 15 l 12 0" },
+    { stroke: "red", strokeWidth: 2, d: "M 12 0 l 0 30" },
+    { stroke: "red", strokeWidth: 2, d: "M 18 0 l 0 30" },
+    { stroke: "red", strokeWidth: 1, d: "M 18 15 l 12 0" }
+  ]} />;
+};
+var SimpleCapacitor_default = SimpleCapacitor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SimpleCapacitor
+});
+//# sourceMappingURL=SimpleCapacitor.js.map

package/dist/schematic-components/SimpleCapacitor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schematic-components/SimpleCapacitor.tsx","../../src/lib/render-context/index.ts","../../src/lib/utils/get-svg-path-bounds.ts","../../src/schematic-components/SVGPathComponent.tsx"],"sourcesContent":["import * as Type from \"lib/types\"\nimport SVGPathComponent from \"./SVGPathComponent\"\n\ninterface Props {\n  component: {\n    source: Type.SimpleCapacitor\n    schematic: Type.SchematicComponent\n  }\n}\n\nexport const SimpleCapacitor = ({\n  component: { source, schematic },\n}: Props) => {\n  return (\n    <SVGPathComponent\n      rotation={schematic.rotation}\n      center={schematic.center}\n      size={schematic.size}\n      paths={[\n        { stroke: \"red\", strokeWidth: 1, d: \"M 0 15 l 12 0\" },\n        { stroke: \"red\", strokeWidth: 2, d: \"M 12 0 l 0 30\" },\n        { stroke: \"red\", strokeWidth: 2, d: \"M 18 0 l 0 30\" },\n        { stroke: \"red\", strokeWidth: 1, d: \"M 18 15 l 12 0\" },\n      ]}\n    />\n  )\n}\n\nexport default SimpleCapacitor\n","import createStore from \"zustand\"\nimport { Matrix, compose, scale } from \"transformation-matrix\"\n\ninterface RenderContextState {\n  camera_transform: Matrix\n}\n\nexport const useRenderContext = createStore<RenderContextState>()(\n  (set, get) => ({\n    camera_transform: compose(scale(100, 100, 0, 0)),\n  })\n)\n\nexport const useCameraTransform = () =>\n  useRenderContext((s) => s.camera_transform)\n","import svgPathBounds from \"svg-path-bounds\"\n\nexport function getSVGPathBounds(ds: string[] | string) {\n  if (typeof ds === \"string\") ds = [ds]\n  let minX = Infinity,\n    maxX = -Infinity,\n    minY = Infinity,\n    maxY = -Infinity\n\n  for (const d of ds) {\n    const [left, top, right, bottom] = svgPathBounds(d)\n\n    minX = Math.min(left, minX)\n    maxX = Math.max(right, maxX)\n    minY = Math.min(top, minY)\n    maxY = Math.max(bottom, maxY)\n  }\n\n  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY }\n}\n\nexport default getSVGPathBounds\n","import { useCameraTransform } from \"lib/render-context\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\n\nimport { applyToPoint } from \"transformation-matrix\"\n\ninterface Props {\n  rotation: number\n  center: { x: number; y: number }\n  size: { width: number; height: number }\n  paths: Array<{\n    strokeWidth: number\n    stroke: string\n    d: string\n  }>\n}\n\nexport const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {\n  const ct = useCameraTransform()\n  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))\n  // Margin in SVG Space\n  const badRatio =\n    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >\n    0.01\n  if (badRatio) {\n    console.warn(\n      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`\n    )\n  }\n  pathBounds.height = Math.max(pathBounds.height, 1)\n  pathBounds.width = Math.max(pathBounds.width, 1)\n  const absoluteCenter = applyToPoint(ct, center)\n  const absoluteSize = {\n    width: Math.max(1, size.width * ct.a),\n    height: Math.max(1, size.height * ct.d),\n  }\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        transform: rotation === 0 ? \"\" : `rotate(${rotation}rad)`,\n        left: absoluteCenter.x - absoluteSize.width / 2,\n        top: absoluteCenter.y - absoluteSize.height / 2,\n        // backgroundColor: badRatio ? \"rgba(255, 0, 0, 0.5)\" : \"transparent\",\n      }}\n      overflow=\"visible\"\n      width={absoluteSize.width}\n      height={absoluteSize.height}\n      viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}\n    >\n      {paths.map((p, i) => (\n        <path\n          key={i}\n          fill=\"none\"\n          strokeWidth={2 * (p.strokeWidth || 1)}\n          stroke={p.stroke || \"red\"}\n          d={p.d}\n        />\n      ))}\n    </svg>\n  )\n}\n\nexport default SVGPathComponent\n"],"mappings":"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","names":["createStore","svgPathBounds","import_transformation_matrix"]}

package/dist/schematic-components/SimpleDiode.js

@@ -0,0 +1,101 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schematic-components/SimpleDiode.tsx
+var SimpleDiode_exports = {};
+__export(SimpleDiode_exports, {
+  SimpleDiode: () => SimpleDiode,
+  default: () => SimpleDiode_default
+});
+module.exports = __toCommonJS(SimpleDiode_exports);
+
+// src/lib/render-context/index.ts
+var import_zustand = __toESM(require("zustand"));
+var import_transformation_matrix = require("transformation-matrix");
+var useRenderContext = (0, import_zustand.default)()(
+  (set, get) => ({
+    camera_transform: (0, import_transformation_matrix.compose)((0, import_transformation_matrix.scale)(100, 100, 0, 0))
+  })
+);
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/lib/utils/get-svg-path-bounds.ts
+var import_svg_path_bounds = __toESM(require("svg-path-bounds"));
+function getSVGPathBounds(ds) {
+  if (typeof ds === "string")
+    ds = [ds];
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const d of ds) {
+    const [left, top, right, bottom] = (0, import_svg_path_bounds.default)(d);
+    minX = Math.min(left, minX);
+    maxX = Math.max(right, maxX);
+    minY = Math.min(top, minY);
+    maxY = Math.max(bottom, maxY);
+  }
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+}
+var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var import_transformation_matrix2 = require("transformation-matrix");
+var SVGPathComponent = ({ size, center, rotation, paths }) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    );
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const absoluteCenter = (0, import_transformation_matrix2.applyToPoint)(ct, center);
+  const absoluteSize = {
+    width: Math.max(1, size.width * ct.a),
+    height: Math.max(1, size.height * ct.d)
+  };
+  return <svg style={{
+    position: "absolute",
+    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+    left: absoluteCenter.x - absoluteSize.width / 2,
+    top: absoluteCenter.y - absoluteSize.height / 2
+  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
+};
+var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SimpleDiode.tsx
+var SimpleDiode = ({ component: { source, schematic } }) => {
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    { stroke: "red", strokeWidth: 2, d: "M 0,0 H 21" },
+    { stroke: "red", strokeWidth: 2, d: "M 49,0 H 59" },
+    { stroke: "red", strokeWidth: 2, d: "M 49,0 L 21 14 V -14 Z" },
+    { stroke: "red", strokeWidth: 2, d: "M 49,-14 V 14" }
+  ]} />;
+};
+var SimpleDiode_default = SimpleDiode;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SimpleDiode
+});
+//# sourceMappingURL=SimpleDiode.js.map

package/dist/schematic-components/SimpleDiode.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schematic-components/SimpleDiode.tsx","../../src/lib/render-context/index.ts","../../src/lib/utils/get-svg-path-bounds.ts","../../src/schematic-components/SVGPathComponent.tsx"],"sourcesContent":["import * as Type from \"lib/types\"\nimport SVGPathComponent from \"./SVGPathComponent\"\n\ninterface Props {\n  component: {\n    source: Type.SimpleDiode\n    schematic: Type.SchematicComponent\n  }\n}\n\nexport const SimpleDiode = ({ component: { source, schematic } }: Props) => {\n  return (\n    <SVGPathComponent\n      rotation={schematic.rotation}\n      center={schematic.center}\n      size={schematic.size}\n      paths={[\n        { stroke: \"red\", strokeWidth: 2, d: \"M 0,0 H 21\" },\n        { stroke: \"red\", strokeWidth: 2, d: \"M 49,0 H 59\" },\n        { stroke: \"red\", strokeWidth: 2, d: \"M 49,0 L 21 14 V -14 Z\" },\n        { stroke: \"red\", strokeWidth: 2, d: \"M 49,-14 V 14\" },\n        // For LEDs\n        // {\n        //   stroke: \"red\",\n        //   strokeWidth: 2,\n        //   d: \"M 35 -32 l 7 5.25 l 1.75 -9.625 z m 3.5 2.625 l -5.25 7\",\n        // },\n        // {\n        //   stroke: \"red\",\n        //   strokeWidth: 2,\n        //   d: \"M 52 -26 l 7 5.25 l 1.75 -9.625 z m 3.5 2.625 l -5.25 7\",\n        // },\n      ]}\n    />\n  )\n}\n\nexport default SimpleDiode\n","import createStore from \"zustand\"\nimport { Matrix, compose, scale } from \"transformation-matrix\"\n\ninterface RenderContextState {\n  camera_transform: Matrix\n}\n\nexport const useRenderContext = createStore<RenderContextState>()(\n  (set, get) => ({\n    camera_transform: compose(scale(100, 100, 0, 0)),\n  })\n)\n\nexport const useCameraTransform = () =>\n  useRenderContext((s) => s.camera_transform)\n","import svgPathBounds from \"svg-path-bounds\"\n\nexport function getSVGPathBounds(ds: string[] | string) {\n  if (typeof ds === \"string\") ds = [ds]\n  let minX = Infinity,\n    maxX = -Infinity,\n    minY = Infinity,\n    maxY = -Infinity\n\n  for (const d of ds) {\n    const [left, top, right, bottom] = svgPathBounds(d)\n\n    minX = Math.min(left, minX)\n    maxX = Math.max(right, maxX)\n    minY = Math.min(top, minY)\n    maxY = Math.max(bottom, maxY)\n  }\n\n  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY }\n}\n\nexport default getSVGPathBounds\n","import { useCameraTransform } from \"lib/render-context\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\n\nimport { applyToPoint } from \"transformation-matrix\"\n\ninterface Props {\n  rotation: number\n  center: { x: number; y: number }\n  size: { width: number; height: number }\n  paths: Array<{\n    strokeWidth: number\n    stroke: string\n    d: string\n  }>\n}\n\nexport const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {\n  const ct = useCameraTransform()\n  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))\n  // Margin in SVG Space\n  const badRatio =\n    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >\n    0.01\n  if (badRatio) {\n    console.warn(\n      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`\n    )\n  }\n  pathBounds.height = Math.max(pathBounds.height, 1)\n  pathBounds.width = Math.max(pathBounds.width, 1)\n  const absoluteCenter = applyToPoint(ct, center)\n  const absoluteSize = {\n    width: Math.max(1, size.width * ct.a),\n    height: Math.max(1, size.height * ct.d),\n  }\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        transform: rotation === 0 ? \"\" : `rotate(${rotation}rad)`,\n        left: absoluteCenter.x - absoluteSize.width / 2,\n        top: absoluteCenter.y - absoluteSize.height / 2,\n        // backgroundColor: badRatio ? \"rgba(255, 0, 0, 0.5)\" : \"transparent\",\n      }}\n      overflow=\"visible\"\n      width={absoluteSize.width}\n      height={absoluteSize.height}\n      viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}\n    >\n      {paths.map((p, i) => (\n        <path\n          key={i}\n          fill=\"none\"\n          strokeWidth={2 * (p.strokeWidth || 1)}\n          stroke={p.stroke || \"red\"}\n          d={p.d}\n        />\n      ))}\n    </svg>\n  )\n}\n\nexport default SVGPathComponent\n"],"mappings":"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","names":["createStore","svgPathBounds","import_transformation_matrix"]}

package/dist/schematic-components/SimpleGround.js

@@ -0,0 +1,102 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/schematic-components/SimpleGround.tsx
+var SimpleGround_exports = {};
+__export(SimpleGround_exports, {
+  SimpleGround: () => SimpleGround,
+  default: () => SimpleGround_default
+});
+module.exports = __toCommonJS(SimpleGround_exports);
+
+// src/lib/render-context/index.ts
+var import_zustand = __toESM(require("zustand"));
+var import_transformation_matrix = require("transformation-matrix");
+var useRenderContext = (0, import_zustand.default)()(
+  (set, get) => ({
+    camera_transform: (0, import_transformation_matrix.compose)((0, import_transformation_matrix.scale)(100, 100, 0, 0))
+  })
+);
+var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+
+// src/lib/utils/get-svg-path-bounds.ts
+var import_svg_path_bounds = __toESM(require("svg-path-bounds"));
+function getSVGPathBounds(ds) {
+  if (typeof ds === "string")
+    ds = [ds];
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const d of ds) {
+    const [left, top, right, bottom] = (0, import_svg_path_bounds.default)(d);
+    minX = Math.min(left, minX);
+    maxX = Math.max(right, maxX);
+    minY = Math.min(top, minY);
+    maxY = Math.max(bottom, maxY);
+  }
+  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY };
+}
+var get_svg_path_bounds_default = getSVGPathBounds;
+
+// src/schematic-components/SVGPathComponent.tsx
+var import_transformation_matrix2 = require("transformation-matrix");
+var SVGPathComponent = ({ size, center, rotation, paths }) => {
+  const ct = useCameraTransform();
+  const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
+  const badRatio = Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) > 0.01;
+  if (badRatio) {
+    console.warn(
+      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`
+    );
+  }
+  pathBounds.height = Math.max(pathBounds.height, 1);
+  pathBounds.width = Math.max(pathBounds.width, 1);
+  const absoluteCenter = (0, import_transformation_matrix2.applyToPoint)(ct, center);
+  const absoluteSize = {
+    width: Math.max(1, size.width * ct.a),
+    height: Math.max(1, size.height * ct.d)
+  };
+  return <svg style={{
+    position: "absolute",
+    transform: rotation === 0 ? "" : `rotate(${rotation}rad)`,
+    left: absoluteCenter.x - absoluteSize.width / 2,
+    top: absoluteCenter.y - absoluteSize.height / 2
+  }} overflow="visible" width={absoluteSize.width} height={absoluteSize.height} viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}>{paths.map((p, i) => <path key={i} fill="none" strokeWidth={2 * (p.strokeWidth || 1)} stroke={p.stroke || "red"} d={p.d} />)}</svg>;
+};
+var SVGPathComponent_default = SVGPathComponent;
+
+// src/schematic-components/SimpleGround.tsx
+var SimpleGround = ({ component: { source, schematic } }) => {
+  return <SVGPathComponent_default rotation={schematic.rotation} center={schematic.center} size={schematic.size} paths={[
+    {
+      stroke: "red",
+      strokeWidth: 0.7,
+      d: "M -3 3 L 3 3 M -6 0 L 6 0 M -9 -3 L 9 -3 M 0 -3 L 0 -12"
+    }
+  ]} />;
+};
+var SimpleGround_default = SimpleGround;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SimpleGround
+});
+//# sourceMappingURL=SimpleGround.js.map

package/dist/schematic-components/SimpleGround.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/schematic-components/SimpleGround.tsx","../../src/lib/render-context/index.ts","../../src/lib/utils/get-svg-path-bounds.ts","../../src/schematic-components/SVGPathComponent.tsx"],"sourcesContent":["import * as Type from \"lib/types\"\nimport SVGPathComponent from \"./SVGPathComponent\"\n\ninterface Props {\n  component: {\n    source: Type.SimpleGround\n    schematic: Type.SchematicComponent\n  }\n}\n\nexport const SimpleGround = ({ component: { source, schematic } }: Props) => {\n  return (\n    <SVGPathComponent\n      rotation={schematic.rotation}\n      center={schematic.center}\n      size={schematic.size}\n      paths={[\n        {\n          stroke: \"red\",\n          strokeWidth: 0.7,\n          d: \"M -3 3 L 3 3 M -6 0 L 6 0 M -9 -3 L 9 -3 M 0 -3 L 0 -12\",\n        },\n      ]}\n    />\n  )\n}\n\nexport default SimpleGround\n","import createStore from \"zustand\"\nimport { Matrix, compose, scale } from \"transformation-matrix\"\n\ninterface RenderContextState {\n  camera_transform: Matrix\n}\n\nexport const useRenderContext = createStore<RenderContextState>()(\n  (set, get) => ({\n    camera_transform: compose(scale(100, 100, 0, 0)),\n  })\n)\n\nexport const useCameraTransform = () =>\n  useRenderContext((s) => s.camera_transform)\n","import svgPathBounds from \"svg-path-bounds\"\n\nexport function getSVGPathBounds(ds: string[] | string) {\n  if (typeof ds === \"string\") ds = [ds]\n  let minX = Infinity,\n    maxX = -Infinity,\n    minY = Infinity,\n    maxY = -Infinity\n\n  for (const d of ds) {\n    const [left, top, right, bottom] = svgPathBounds(d)\n\n    minX = Math.min(left, minX)\n    maxX = Math.max(right, maxX)\n    minY = Math.min(top, minY)\n    maxY = Math.max(bottom, maxY)\n  }\n\n  return { minX, maxX, minY, maxY, width: maxX - minX, height: maxY - minY }\n}\n\nexport default getSVGPathBounds\n","import { useCameraTransform } from \"lib/render-context\"\nimport getSVGPathBounds from \"lib/utils/get-svg-path-bounds\"\n\nimport { applyToPoint } from \"transformation-matrix\"\n\ninterface Props {\n  rotation: number\n  center: { x: number; y: number }\n  size: { width: number; height: number }\n  paths: Array<{\n    strokeWidth: number\n    stroke: string\n    d: string\n  }>\n}\n\nexport const SVGPathComponent = ({ size, center, rotation, paths }: Props) => {\n  const ct = useCameraTransform()\n  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))\n  // Margin in SVG Space\n  const badRatio =\n    Math.abs(pathBounds.width / pathBounds.height - size.width / size.height) >\n    0.01\n  if (badRatio) {\n    console.warn(\n      `Ratio doesn't match for component. ${pathBounds.width}:${pathBounds.height} is not close to ${size.width}:${size.height}`\n    )\n  }\n  pathBounds.height = Math.max(pathBounds.height, 1)\n  pathBounds.width = Math.max(pathBounds.width, 1)\n  const absoluteCenter = applyToPoint(ct, center)\n  const absoluteSize = {\n    width: Math.max(1, size.width * ct.a),\n    height: Math.max(1, size.height * ct.d),\n  }\n\n  return (\n    <svg\n      style={{\n        position: \"absolute\",\n        transform: rotation === 0 ? \"\" : `rotate(${rotation}rad)`,\n        left: absoluteCenter.x - absoluteSize.width / 2,\n        top: absoluteCenter.y - absoluteSize.height / 2,\n        // backgroundColor: badRatio ? \"rgba(255, 0, 0, 0.5)\" : \"transparent\",\n      }}\n      overflow=\"visible\"\n      width={absoluteSize.width}\n      height={absoluteSize.height}\n      viewBox={`${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`}\n    >\n      {paths.map((p, i) => (\n        <path\n          key={i}\n          fill=\"none\"\n          strokeWidth={2 * (p.strokeWidth || 1)}\n          stroke={p.stroke || \"red\"}\n          d={p.d}\n        />\n      ))}\n    </svg>\n  )\n}\n\nexport default SVGPathComponent\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAAwB;AACxB,mCAAuC;AAMhC,IAAM,uBAAmB,eAAAA,SAAgC;AAAA,EAC9D,CAAC,KAAK,SAAS;AAAA,IACb,sBAAkB,0CAAQ,oCAAM,KAAK,KAAK,GAAG,CAAC,CAAC;AAAA,EACjD;AACF;AAEO,IAAM,qBAAqB,MAChC,iBAAiB,CAAC,MAAM,EAAE,gBAAgB;;;ACd5C,6BAA0B;AAEnB,SAAS,iBAAiB,IAAuB;AACtD,MAAI,OAAO,OAAO;AAAU,SAAK,CAAC,EAAE;AACpC,MAAI,OAAO,UACT,OAAO,WACP,OAAO,UACP,OAAO;AAET,aAAW,KAAK,IAAI;AAClB,UAAM,CAAC,MAAM,KAAK,OAAO,MAAM,QAAI,uBAAAC,SAAc,CAAC;AAElD,WAAO,KAAK,IAAI,MAAM,IAAI;AAC1B,WAAO,KAAK,IAAI,OAAO,IAAI;AAC3B,WAAO,KAAK,IAAI,KAAK,IAAI;AACzB,WAAO,KAAK,IAAI,QAAQ,IAAI;AAAA,EAC9B;AAEA,SAAO,EAAE,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,QAAQ,OAAO,KAAK;AAC3E;AAEA,IAAO,8BAAQ;;;AClBf,IAAAC,gCAA6B;AAatB,IAAM,mBAAmB,CAAC,EAAE,MAAM,QAAQ,UAAU,MAAM,MAAa;AAC5E,QAAM,KAAK,mBAAmB;AAC9B,QAAM,aAAa,4BAAiB,MAAM,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;AAEzD,QAAM,WACJ,KAAK,IAAI,WAAW,QAAQ,WAAW,SAAS,KAAK,QAAQ,KAAK,MAAM,IACxE;AACF,MAAI,UAAU;AACZ,YAAQ;AAAA,MACN,sCAAsC,WAAW,SAAS,WAAW,0BAA0B,KAAK,SAAS,KAAK;AAAA,IACpH;AAAA,EACF;AACA,aAAW,SAAS,KAAK,IAAI,WAAW,QAAQ,CAAC;AACjD,aAAW,QAAQ,KAAK,IAAI,WAAW,OAAO,CAAC;AAC/C,QAAM,qBAAiB,4CAAa,IAAI,MAAM;AAC9C,QAAM,eAAe;AAAA,IACnB,OAAO,KAAK,IAAI,GAAG,KAAK,QAAQ,GAAG,CAAC;AAAA,IACpC,QAAQ,KAAK,IAAI,GAAG,KAAK,SAAS,GAAG,CAAC;AAAA,EACxC;AAEA,SACE,CAAC,IACC,OAAO;AAAA,IACL,UAAU;AAAA,IACV,WAAW,aAAa,IAAI,KAAK,UAAU;AAAA,IAC3C,MAAM,eAAe,IAAI,aAAa,QAAQ;AAAA,IAC9C,KAAK,eAAe,IAAI,aAAa,SAAS;AAAA,EAEhD,GACA,SAAS,UACT,OAAO,aAAa,OACpB,QAAQ,aAAa,QACrB,SAAS,GAAG,WAAW,QAAQ,WAAW,QAAQ,WAAW,SAAS,WAAW,WAEhF,MAAM,IAAI,CAAC,GAAG,MACb,CAAC,KACC,KAAK,GACL,KAAK,OACL,aAAa,KAAK,EAAE,eAAe,IACnC,QAAQ,EAAE,UAAU,OACpB,GAAG,EAAE,GACP,EACD,EACH,EAtBC;AAwBL;AAEA,IAAO,2BAAQ;;;AHrDR,IAAM,eAAe,CAAC,EAAE,WAAW,EAAE,QAAQ,UAAU,EAAE,MAAa;AAC3E,SACE,CAAC,yBACC,UAAU,UAAU,UACpB,QAAQ,UAAU,QAClB,MAAM,UAAU,MAChB,OAAO;AAAA,IACL;AAAA,MACE,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,GAAG;AAAA,IACL;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,uBAAQ;","names":["createStore","svgPathBounds","import_transformation_matrix"]}