@tscircuit/schematic-viewer 1.2.8 → 1.2.10

package/dist/index.js

@@ -292,7 +292,7 @@ var require_with_selector_development = __commonJS({
         }
         var objectIs = typeof Object.is === "function" ? Object.is : is;
         var useSyncExternalStore = shim.useSyncExternalStore;
-        var useRef2 = React.useRef, useEffect4 = React.useEffect, useMemo2 = React.useMemo, useDebugValue2 = React.useDebugValue;
+        var useRef2 = React.useRef, useEffect4 = React.useEffect, useMemo3 = React.useMemo, useDebugValue2 = React.useDebugValue;
         function useSyncExternalStoreWithSelector2(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
           var instRef = useRef2(null);
           var inst;
@@ -305,7 +305,7 @@ var require_with_selector_development = __commonJS({
           } else {
             inst = instRef.current;
           }
-          var _useMemo = useMemo2(function() {
+          var _useMemo = useMemo3(function() {
             var hasMemo = false;
             var memoizedSnapshot;
             var memoizedSelection;
@@ -933,46 +933,13 @@ var require_svg_path_generator2 = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Schematic: () => Schematic
+  Schematic: () => Schematic,
+  SchematicWithoutContext: () => SchematicWithoutContext
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/Schematic.tsx
-var import_react6 = require("react");
-var import_react_supergrid = require("react-supergrid");
-var import_builder3 = require("@tscircuit/builder");
-var import_react_fiber = __toESM(require("@tscircuit/react-fiber"));
-
-// src/lib/utils/collect-element-refs.ts
-var collectElementRefs = (elm, allElms) => {
-  const source_port = allElms.find(
-    (e) => e.type === "source_port" && e.source_port_id === elm.source_port_id
-  );
-  const source_component_id = elm.source_component_id ?? source_port?.source_component_id;
-  const source_component = allElms.find(
-    (e) => e.type === "source_component" && e.source_component_id === source_component_id
-  );
-  if ([
-    "schematic_component",
-    "schematic_trace",
-    "schematic_port",
-    "schematic_box",
-    "schematic_line",
-    "schematic_path"
-  ].includes(elm.type)) {
-    const schematic_children = allElms.filter(
-      (e) => "schematic_component_id" in e && e.schematic_component_id === elm.schematic_component_id
-    );
-    return {
-      schematic_children,
-      schematic: elm,
-      source: source_component,
-      source_component,
-      source_port
-    };
-  }
-  return null;
-};
+var import_react9 = require("react");
 
 // node_modules/zustand/esm/vanilla.js
 var createStoreImpl = (createState) => {
@@ -1017,14 +984,6 @@ function useStore(api, selector = api.getState, equalityFn) {
   (0, import_react.useDebugValue)(slice);
   return slice;
 }
-var createImpl = (createState) => {
-  const api = typeof createState === "function" ? createStore(createState) : createState;
-  const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn);
-  Object.assign(useBoundStore, api);
-  return useBoundStore;
-};
-var create = (createState) => createState ? createImpl(createState) : createImpl;
-var create$1 = create;
 
 // node_modules/transformation-matrix/src/applyToPoint.js
 function applyToPoint(matrix, point) {
@@ -1247,11 +1206,15 @@ peg$SyntaxError.buildMessage = function(expected, found) {
 };
 
 // src/lib/render-context/index.ts
-var useRenderContext = create$1((set, get) => ({
+var import_react2 = require("react");
+var createRenderContextStore = () => createStore((set) => ({
   camera_transform: compose(scale(100, 100, 0, 0)),
   setCameraTransform: (transform2) => set({ camera_transform: transform2 })
 }));
-var useCameraTransform = () => useRenderContext((s) => s.camera_transform);
+var useGlobalStore = (s) => {
+  const store = (0, import_react2.useContext)(StoreContext);
+  return useStore(store, s);
+};
 
 // src/lib/utils/get-svg-path-bounds.ts
 var import_svg_path_bounds = __toESM(require_svg_path_bounds());
@@ -1271,7 +1234,7 @@ function getSVGPathBounds(ds) {
 var get_svg_path_bounds_default = getSVGPathBounds;
 
 // src/schematic-components/SVGPathComponent.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var SVGPathComponent = ({
   size,
@@ -1283,7 +1246,7 @@ var SVGPathComponent = ({
   shiftToBottom,
   hoverContent
 }) => {
-  const ct = useCameraTransform();
+  const ct = useGlobalStore((s) => s.camera_transform);
   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) {
@@ -1301,7 +1264,7 @@ var SVGPathComponent = ({
     width: innerSize.width + padding.x * 2,
     height: innerSize.height + padding.y * 2
   };
-  const [hovering, setHovering] = (0, import_react2.useState)(false);
+  const [hovering, setHovering] = (0, import_react3.useState)(false);
   const svgLeft = absoluteCenter.x - fullSize.width / 2;
   const svgTop = absoluteCenter.y - fullSize.height / 2;
   const preferredRatio = pathBounds.width === 0 ? innerSize.height / pathBounds.height : innerSize.width / pathBounds.width;
@@ -1435,12 +1398,50 @@ var SimpleCapacitor = ({
 };
 
 // src/lib/hooks/use-maybe-promise.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/schematic-components/ProjectComponent.tsx
 var import_builder = require("@tscircuit/builder");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 
+// src/schematic-components/SchematicComponent.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SchematicComponent = ({ component }) => {
+  const { source, schematic } = component;
+  if (!source.ftype)
+    return null;
+  switch (source.ftype) {
+    case "simple_resistor": {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleResistor, { component: { source, schematic } });
+    }
+    case "simple_capacitor": {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleCapacitor, { component: { source, schematic } });
+    }
+    case "simple_power_source": {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimplePowerSource, { component: { source, schematic } });
+    }
+    case "simple_ground": {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleGround, { component: { source, schematic } });
+    }
+    case "simple_inductor": {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SimpleInductor, { component: { source, schematic } });
+    }
+    case "simple_bug": {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SchematicBug, { component: { source, schematic } });
+    }
+    case "simple_diode": {
+      return null;
+    }
+    default: {
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+        "unknown ftype: ",
+        component.source.ftype
+      ] });
+    }
+  }
+};
+var SchematicComponent_default = SchematicComponent;
+
 // src/lib/utils/direction-to-vec.ts
 var directionToVec = (direction) => {
   if (direction === "up")
@@ -1456,19 +1457,19 @@ var directionToVec = (direction) => {
 };
 
 // src/schematic-components/SchematicPort.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var SchematicPort = ({
   port: { source_port, source_component, schematic }
 }) => {
   const hoverName = source_component?.name ? `.${source_component.name} > .${source_port?.name ?? source_port?.pin_number}` : `.${source_port?.name ?? source_port?.pin_number}`;
   const vec = directionToVec(schematic.facing_direction);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
-      hoverContent: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
+      hoverContent: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
         hoverName,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("br", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", {}),
         source_port?.pin_number && `Pin ${source_port.pin_number}`
       ] }),
       center: schematic.center,
@@ -1495,7 +1496,7 @@ var SchematicPort = ({
 var SchematicPort_default = SchematicPort;
 
 // node_modules/react-use-measure/dist/web.js
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_debounce = __toESM(require_debounce());
 function useMeasure(_temp) {
   let {
@@ -1513,7 +1514,7 @@ function useMeasure(_temp) {
   if (!ResizeObserver) {
     throw new Error("This browser does not support ResizeObserver out of the box. See: https://github.com/react-spring/react-use-measure/#resize-observer-polyfills");
   }
-  const [bounds, set] = (0, import_react4.useState)({
+  const [bounds, set] = (0, import_react5.useState)({
     left: 0,
     top: 0,
     width: 0,
@@ -1523,7 +1524,7 @@ function useMeasure(_temp) {
     x: 0,
     y: 0
   });
-  const state = (0, import_react4.useRef)({
+  const state = (0, import_react5.useRef)({
     element: null,
     scrollContainers: null,
     resizeObserver: null,
@@ -1531,12 +1532,12 @@ function useMeasure(_temp) {
   });
   const scrollDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.scroll : null;
   const resizeDebounce = debounce ? typeof debounce === "number" ? debounce : debounce.resize : null;
-  const mounted = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
+  const mounted = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     mounted.current = true;
     return () => void (mounted.current = false);
   });
-  const [forceRefresh, resizeChange, scrollChange] = (0, import_react4.useMemo)(() => {
+  const [forceRefresh, resizeChange, scrollChange] = (0, import_react5.useMemo)(() => {
     const callback = () => {
       if (!state.current.element)
         return;
@@ -1602,22 +1603,22 @@ function useMeasure(_temp) {
   };
   useOnWindowScroll(scrollChange, Boolean(scroll));
   useOnWindowResize(resizeChange);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     removeListeners();
     addListeners();
   }, [scroll, scrollChange, resizeChange]);
-  (0, import_react4.useEffect)(() => removeListeners, []);
+  (0, import_react5.useEffect)(() => removeListeners, []);
   return [ref, bounds, forceRefresh];
 }
 function useOnWindowResize(onWindowResize) {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const cb = onWindowResize;
     window.addEventListener("resize", cb);
     return () => void window.removeEventListener("resize", cb);
   }, [onWindowResize]);
 }
 function useOnWindowScroll(onScroll, enabled) {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (enabled) {
       const cb = onScroll;
       window.addEventListener("scroll", cb, {
@@ -1645,9 +1646,9 @@ var keys = ["x", "y", "top", "bottom", "left", "right", "width", "height"];
 var areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
 
 // src/schematic-components/SchematicText.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var SchematicText = ({ schematic_text }) => {
-  const ct = useCameraTransform();
+  const ct = useGlobalStore((s) => s.camera_transform);
   const { text, position, anchor } = schematic_text;
   const tPos = applyToPoint(ct, position);
   const [boundsRef, bounds] = useMeasure();
@@ -1661,7 +1662,7 @@ var SchematicText = ({ schematic_text }) => {
   }
   const fontTransformRatio = 0.15;
   const projectedTextSize = fontTransformRatio * ct.a;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       ref: boundsRef,
@@ -1682,9 +1683,9 @@ var SchematicText_default = SchematicText;
 var import_svg_path_generator = __toESM(require_svg_path_generator2());
 
 // src/schematic-components/RenderError.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var RenderError_default = ({ text }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "div",
     {
       style: {
@@ -1704,7 +1705,7 @@ var RenderError_default = ({ text }) => {
 };
 
 // src/schematic-components/SVGPathComponent2.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SVGPathComponent2 = ({
   size,
   center,
@@ -1715,9 +1716,9 @@ var SVGPathComponent2 = ({
   shiftToBottom,
   hoverContent
 }) => {
-  const ct = useCameraTransform();
+  const ct = useGlobalStore((c) => c.camera_transform);
   const pathBounds = get_svg_path_bounds_default(paths.map((p) => p.d));
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "svg",
     {
       style: {
@@ -1734,7 +1735,7 @@ var SVGPathComponent2 = ({
         // backgroundColor: "rgba(255, 0, 0, 0.1)",
       },
       overflow: "visible",
-      children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: paths.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "path",
         {
           transform: toSVG(ct),
@@ -1752,11 +1753,11 @@ var SVGPathComponent2 = ({
 var SVGPathComponent2_default = SVGPathComponent2;
 
 // src/schematic-components/SchematicTrace.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SchematicTrace = ({ trace: { source, schematic } }) => {
   const edges = schematic.edges;
   if (edges.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RenderError_default, { text: `Route with 0 edges (${source.source_trace_id})` });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(RenderError_default, { text: `Route with 0 edges (${source.source_trace_id})` });
   }
   const path = (0, import_svg_path_generator.default)();
   for (let i = 0; i < edges.length; i++) {
@@ -1771,7 +1772,7 @@ var SchematicTrace = ({ trace: { source, schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     SVGPathComponent2_default,
     {
       rotation: 0,
@@ -1791,7 +1792,7 @@ var SchematicTrace_default = SchematicTrace;
 
 // src/schematic-components/SchematicBug.tsx
 var import_builder2 = require("@tscircuit/builder");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var SchematicBug = ({ component: { source, schematic } }) => {
   const port_arrangement = {
     top_size: 0,
@@ -1828,7 +1829,7 @@ var SchematicBug = ({ component: { source, schematic } }) => {
     x: schematic.center.x + (actualSize.minX + actualSize.maxX) / 2,
     y: schematic.center.y + (actualSize.minY + actualSize.maxY) / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1840,11 +1841,11 @@ var SchematicBug = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimplePowerSource.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var SimplePowerSource = ({
   component: { source, schematic }
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1875,9 +1876,9 @@ var SimplePowerSource = ({
 };
 
 // src/schematic-components/SimpleGround.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var SimpleGround = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1897,9 +1898,9 @@ var SimpleGround = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimpleInductor.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var SimpleInductor = ({ component: { source, schematic } }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     SVGPathComponent_default,
     {
       rotation: schematic.rotation,
@@ -1918,51 +1919,59 @@ var SimpleInductor = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/SimpleDiode.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
-
-// src/schematic-components/SchematicComponent.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var SchematicComponent = ({ component }) => {
-  const { source, schematic } = component;
-  if (!source.ftype)
-    return null;
-  switch (source.ftype) {
-    case "simple_resistor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleResistor, { component: { source, schematic } });
-    }
-    case "simple_capacitor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleCapacitor, { component: { source, schematic } });
-    }
-    case "simple_power_source": {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimplePowerSource, { component: { source, schematic } });
-    }
-    case "simple_ground": {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleGround, { component: { source, schematic } });
-    }
-    case "simple_inductor": {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SimpleInductor, { component: { source, schematic } });
-    }
-    case "simple_bug": {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SchematicBug, { component: { source, schematic } });
-    }
-    case "simple_diode": {
-      return null;
-    }
-    default: {
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { children: [
-        "unknown ftype: ",
-        component.source.ftype
-      ] });
-    }
+
+// src/schematic-components/ContextProviders.tsx
+var import_react6 = require("react");
+var import_react7 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var StoreContext = (0, import_react7.createContext)(null);
+var ContextProviders = ({ children }) => {
+  const store = (0, import_react6.useMemo)(() => createRenderContextStore(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StoreContext.Provider, { value: store, children });
+};
+
+// src/Schematic.tsx
+var import_react_supergrid = require("react-supergrid");
+var import_builder3 = require("@tscircuit/builder");
+var import_react_fiber = __toESM(require("@tscircuit/react-fiber"));
+
+// src/lib/utils/collect-element-refs.ts
+var collectElementRefs = (elm, allElms) => {
+  const source_port = allElms.find(
+    (e) => e.type === "source_port" && e.source_port_id === elm.source_port_id
+  );
+  const source_component_id = elm.source_component_id ?? source_port?.source_component_id;
+  const source_component = allElms.find(
+    (e) => e.type === "source_component" && e.source_component_id === source_component_id
+  );
+  if ([
+    "schematic_component",
+    "schematic_trace",
+    "schematic_port",
+    "schematic_box",
+    "schematic_line",
+    "schematic_path"
+  ].includes(elm.type)) {
+    const schematic_children = allElms.filter(
+      (e) => "schematic_component_id" in e && e.schematic_component_id === elm.schematic_component_id
+    );
+    return {
+      schematic_children,
+      schematic: elm,
+      source: source_component,
+      source_component,
+      source_port
+    };
   }
+  return null;
 };
-var SchematicComponent_default = SchematicComponent;
 
 // src/schematic-components/SchematicBox.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SchematicBox = ({ box: { schematic } }) => {
   const { width: w, height: h } = schematic;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -1982,7 +1991,7 @@ var SchematicBox_default = SchematicBox;
 
 // src/schematic-components/SchematicLine.tsx
 var import_svg_path_generator2 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SchematicLine = ({ line: { schematic } }) => {
   const { x1, x2, y1, y2 } = schematic;
   const dx = x2 - x1;
@@ -1996,7 +2005,7 @@ var SchematicLine = ({ line: { schematic } }) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -2016,7 +2025,7 @@ var SchematicLine_default = SchematicLine;
 
 // src/schematic-components/SchematicPath.tsx
 var import_svg_path_generator3 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SchematicPath = (props) => {
   const { points, is_filled, is_closed, fill_color } = props.path.schematic;
   if (points.length === 0)
@@ -2037,7 +2046,7 @@ var SchematicPath = (props) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -2056,14 +2065,60 @@ var SchematicPath = (props) => {
 };
 var SchematicPath_default = SchematicPath;
 
+// src/schematic-components/SchematicNetLabel.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var SchematicNetLabel = ({
+  net_label
+}) => {
+  console.log({ net_label });
+  const text_width = net_label.text.length * 0.15;
+  const path_width = 31 + net_label.text.length * 5;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      SVGPathComponent_default,
+      {
+        rotation: 0,
+        center: net_label.center,
+        size: {
+          width: 0.05 + text_width,
+          height: 0.175
+        },
+        paths: [
+          {
+            stroke: "gray",
+            strokeWidth: 0.75,
+            d: `M 0 15 L 5 15 L 11 9 L ${path_width} 9 L ${path_width} 21 L 11 21 L 5 15`
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      SchematicText_default,
+      {
+        schematic_text: {
+          anchor: "left",
+          position: {
+            x: net_label.center.x - text_width / 4 + 0.025,
+            y: net_label.center.y
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC",
+          text: net_label.text,
+          type: "schematic_text"
+        }
+      }
+    )
+  ] });
+};
+
 // src/schematic-components/SchematicElement.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var SchematicElement = ({
   element,
   allElements
 }) => {
   if (element.type === "schematic_component") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       SchematicComponent_default,
       {
         component: collectElementRefs(element, allElements)
@@ -2071,25 +2126,28 @@ var SchematicElement = ({
     );
   }
   if (element.type === "schematic_trace") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicTrace_default, { trace: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_port") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicPort_default, { port: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_box") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicBox_default, { box: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_line") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicLine_default, { line: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_path") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicPath_default, { path: collectElementRefs(element, allElements) });
   }
   if (element.type === "schematic_text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SchematicText_default, { schematic_text: element });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicText_default, { schematic_text: element });
+  }
+  if (element.type === "schematic_net_label") {
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SchematicNetLabel, { net_label: element });
   }
   if (element.type === "source_error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(RenderError_default, { text: element.message });
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RenderError_default, { text: element.message });
   }
   return null;
 };
@@ -2099,20 +2157,20 @@ var import_use_mouse_matrix_transform = require("use-mouse-matrix-transform");
 var import_react_error_boundary = require("react-error-boundary");
 
 // src/schematic-components/TableViewer.tsx
-var import_react5 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var LazyTableViewer = (0, import_react5.lazy)(
+var import_react8 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var LazyTableViewer = (0, import_react8.lazy)(
   () => import("@tscircuit/table-viewer").then((m) => ({
     default: m.SoupTableViewer
   }))
 );
-var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react5.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LazyTableViewer, { ...params }) });
+var TableViewer = (params) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react8.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: "Loading..." }), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LazyTableViewer, { ...params }) });
 
 // src/Schematic.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var ErrorBoundary = import_react_error_boundary.ErrorBoundary;
 var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { color: "red" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { color: "red" }, children: [
     "error rendering ",
     elm.type,
     ": ",
@@ -2120,7 +2178,10 @@ var fallbackRender = (elm) => ({ error, resetErrorBoundary }) => {
   ] });
 };
 var toMMSINeg = (v, z) => v >= 0 ? (0, import_react_supergrid.toMMSI)(v, z) : `-${(0, import_react_supergrid.toMMSI)(-v, z)}`;
-var Schematic = ({
+var Schematic = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ContextProviders, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SchematicWithoutContext, { ...props }) });
+};
+var SchematicWithoutContext = ({
   children,
   elements: initialElements,
   soup: initialSoup,
@@ -2128,10 +2189,9 @@ var Schematic = ({
   showTable = false
 }) => {
   initialSoup = initialSoup ?? initialElements ?? [];
-  const [elements, setElements] = (0, import_react6.useState)(initialSoup ?? []);
-  const [project, setProject] = (0, import_react6.useState)(null);
-  const setCameraTransform = useRenderContext((s) => s.setCameraTransform);
-  const cameraTransform = useRenderContext((s) => s.camera_transform);
+  const [elements, setElements] = (0, import_react9.useState)(initialSoup ?? []);
+  const [project, setProject] = (0, import_react9.useState)(null);
+  const { setCameraTransform, camera_transform: cameraTransform } = useGlobalStore();
   const [boundsRef, bounds] = useMeasure();
   const { ref, setTransform } = (0, import_use_mouse_matrix_transform.useMouseMatrixTransform)({
     onSetTransform: (transform2) => {
@@ -2139,7 +2199,7 @@ var Schematic = ({
     }
     // initialTransform: compose(scale(100, 100, 0, 0)),
   });
-  const setElementsAndCamera = (0, import_react6.useCallback)(
+  const setElementsAndCamera = (0, import_react9.useCallback)(
     (elements2) => {
       const elmBounds = ref.current.getBoundingClientRect();
       const { center, width, height } = elements2.some(
@@ -2157,7 +2217,6 @@ var Schematic = ({
       setTransform(
         compose(
           translate((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-          // translate(100, 0),
           scale(scaleFactor, -scaleFactor, 0, 0),
           translate(-center.x, -center.y)
         )
@@ -2165,7 +2224,7 @@ var Schematic = ({
     },
     [setElements, setTransform]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (initialSoup.length > 0) {
       setElementsAndCamera(initialSoup);
       return;
@@ -2178,8 +2237,8 @@ var Schematic = ({
       throw e;
     });
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         style: {
@@ -2197,7 +2256,7 @@ var Schematic = ({
           boundsRef(el);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             import_react_supergrid.SuperGrid,
             {
               stringifyCoord: (x, y, z) => {
@@ -2210,7 +2269,7 @@ var Schematic = ({
               transform: cameraTransform
             }
           ),
-          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          elements?.map((elm, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorBoundary, { fallbackRender: fallbackRender(elm), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             SchematicElement,
             {
               element: elm,
@@ -2221,12 +2280,13 @@ var Schematic = ({
         ]
       }
     ),
-    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TableViewer, { elements })
+    showTable !== false && elements && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TableViewer, { elements })
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Schematic
+  Schematic,
+  SchematicWithoutContext
 });
 /*! Bundled license information: