@tscircuit/schematic-viewer 1.2.13 → 1.3.0

package/.github/workflows/chromatic.yml

@@ -0,0 +1,30 @@
+name: "Chromatic"
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          # ⚠️ Make sure to configure a `CHROMATIC_PROJECT_TOKEN` repository secret
+          projectToken: chpt_d88a6beb0734bbe

package/.github/workflows/npm-build.yml

@@ -0,0 +1,26 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Build
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run build
+        run: npm run build

package/.github/workflows/npm-typecheck.yml

@@ -0,0 +1,26 @@
+# Created using @tscircuit/plop (npm install -g @tscircuit/plop)
+name: Type Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  type-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run typecheck
+        run: npx tsc --noEmit

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { AnySoupElement } from '@tscircuit/soup';
+import { AnyCircuitElement } from 'circuit-json';
 
 interface SchematicProps {
     children?: any;
     /** @deprecated use soup */
     elements?: any;
-    soup?: AnySoupElement[];
+    soup?: AnyCircuitElement[];
     style?: any;
     showTable?: boolean;
-    _soupPostProcessor?: (soup: AnySoupElement[]) => AnySoupElement[];
+    _soupPostProcessor?: (soup: AnyCircuitElement[]) => AnyCircuitElement[];
 }
 declare const Schematic: (props: SchematicProps) => react_jsx_runtime.JSX.Element;
 declare const SchematicWithoutContext: ({ children, elements: initialElements, soup: initialSoup, style, showTable, _soupPostProcessor, }: SchematicProps) => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -939,7 +939,8 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/Schematic.tsx
-var import_react9 = require("react");
+var import_builder3 = require("@tscircuit/builder");
+var import_react_fiber = __toESM(require("@tscircuit/react-fiber"));
 
 // node_modules/zustand/esm/vanilla.mjs
 var import_meta = {};
@@ -1221,15 +1222,7 @@ peg$SyntaxError.buildMessage = function(expected, found) {
 };
 
 // src/lib/render-context/index.ts
-var import_react2 = require("react");
-var createRenderContextStore = () => createStore((set) => ({
-  camera_transform: compose(scale(100, 100, 0, 0)),
-  setCameraTransform: (transform2) => set({ camera_transform: transform2 })
-}));
-var useGlobalStore = (s) => {
-  const store = (0, import_react2.useContext)(StoreContext);
-  return useStore(store, s);
-};
+var import_react7 = require("react");
 
 // src/lib/utils/get-svg-path-bounds.ts
 var import_svg_path_bounds = __toESM(require_svg_path_bounds());
@@ -1249,7 +1242,7 @@ function getSVGPathBounds(ds) {
 var get_svg_path_bounds_default = getSVGPathBounds;
 
 // src/schematic-components/SVGPathComponent.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var SVGPathComponent = ({
   size,
@@ -1279,7 +1272,7 @@ var SVGPathComponent = ({
     width: innerSize.width + padding.x * 2,
     height: innerSize.height + padding.y * 2
   };
-  const [hovering, setHovering] = (0, import_react3.useState)(false);
+  const [hovering, setHovering] = (0, import_react2.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;
@@ -1413,7 +1406,7 @@ var SimpleCapacitor = ({
 };
 
 // src/lib/hooks/use-maybe-promise.ts
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/schematic-components/ProjectComponent.tsx
 var import_builder = require("@tscircuit/builder");
@@ -1511,7 +1504,7 @@ var SchematicPort = ({
 var SchematicPort_default = SchematicPort;
 
 // node_modules/react-use-measure/dist/web.js
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_debounce = __toESM(require_debounce());
 function useMeasure(_temp) {
   let {
@@ -1529,7 +1522,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_react5.useState)({
+  const [bounds, set] = (0, import_react4.useState)({
     left: 0,
     top: 0,
     width: 0,
@@ -1539,7 +1532,7 @@ function useMeasure(_temp) {
     x: 0,
     y: 0
   });
-  const state = (0, import_react5.useRef)({
+  const state = (0, import_react4.useRef)({
     element: null,
     scrollContainers: null,
     resizeObserver: null,
@@ -1547,12 +1540,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_react5.useRef)(false);
-  (0, import_react5.useEffect)(() => {
+  const mounted = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     mounted.current = true;
     return () => void (mounted.current = false);
   });
-  const [forceRefresh, resizeChange, scrollChange] = (0, import_react5.useMemo)(() => {
+  const [forceRefresh, resizeChange, scrollChange] = (0, import_react4.useMemo)(() => {
     const callback = () => {
       if (!state.current.element)
         return;
@@ -1618,22 +1611,22 @@ function useMeasure(_temp) {
   };
   useOnWindowScroll(scrollChange, Boolean(scroll));
   useOnWindowResize(resizeChange);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     removeListeners();
     addListeners();
   }, [scroll, scrollChange, resizeChange]);
-  (0, import_react5.useEffect)(() => removeListeners, []);
+  (0, import_react4.useEffect)(() => removeListeners, []);
   return [ref, bounds, forceRefresh];
 }
 function useOnWindowResize(onWindowResize) {
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const cb = onWindowResize;
     window.addEventListener("resize", cb);
     return () => void window.removeEventListener("resize", cb);
   }, [onWindowResize]);
 }
 function useOnWindowScroll(onScroll, enabled) {
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (enabled) {
       const cb = onScroll;
       window.addEventListener("scroll", cb, {
@@ -1809,11 +1802,13 @@ var SchematicTrace_default = SchematicTrace;
 var import_builder2 = require("@tscircuit/builder");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var SchematicBug = ({ component: { source, schematic } }) => {
+  const location = schematic.center;
   const port_arrangement = {
     top_size: 0,
     bottom_size: 0,
     ...schematic.port_arrangement
   };
+  const manufacturerPartNumber = source.manufacturerPartNumber;
   let bugw = schematic.size.width;
   let bugh = schematic.size.height;
   const { total_ports, width, height } = (0, import_builder2.getPortArrangementSize)(port_arrangement);
@@ -1847,15 +1842,33 @@ 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_runtime11.jsx)(
-    SVGPathComponent_default,
-    {
-      rotation: schematic.rotation,
-      center: actualCenter,
-      size: actualSize,
-      paths
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      SVGPathComponent_default,
+      {
+        rotation: schematic.rotation,
+        center: actualCenter,
+        size: actualSize,
+        paths
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      SchematicText_default,
+      {
+        schematic_text: {
+          anchor: "bottom",
+          position: {
+            x: location.x + actualSize.minX / 1.5,
+            y: location.y + actualSize.minY
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC",
+          text: manufacturerPartNumber,
+          type: "schematic_text"
+        }
+      }
+    )
+  ] });
 };
 
 // src/schematic-components/SimplePowerSource.tsx
@@ -1970,19 +1983,29 @@ var SimpleDiode = ({ component: { source, schematic } }) => {
 };
 
 // src/schematic-components/ContextProviders.tsx
+var import_react5 = require("react");
 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 StoreContext = (0, import_react6.createContext)(null);
 var ContextProviders = ({ children }) => {
-  const store = (0, import_react6.useMemo)(() => createRenderContextStore(), []);
+  const store = (0, import_react5.useMemo)(() => createRenderContextStore(), []);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(StoreContext.Provider, { value: store, children });
 };
 
+// src/lib/render-context/index.ts
+var createRenderContextStore = () => createStore((set) => ({
+  camera_transform: compose(scale(100, 100, 0, 0)),
+  setCameraTransform: (transform2) => set({ camera_transform: transform2 })
+}));
+var useGlobalStore = (s) => {
+  const store = (0, import_react7.useContext)(StoreContext);
+  return useStore(store, s);
+};
+
 // src/Schematic.tsx
+var import_react9 = require("react");
+var import_react_error_boundary = require("react-error-boundary");
 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) => {
@@ -2071,9 +2094,87 @@ var SchematicLine = ({ line: { schematic } }) => {
 };
 var SchematicLine_default = SchematicLine;
 
+// src/lib/utils/get-rotation-from-anchor-side.ts
+var getRotationFromAnchorSide = (anchor_side) => {
+  if (anchor_side === "left")
+    return 0;
+  if (anchor_side === "top")
+    return Math.PI * 3 / 2;
+  if (anchor_side === "right")
+    return Math.PI;
+  if (anchor_side === "bottom")
+    return Math.PI / 2;
+  return 0;
+};
+
+// src/lib/utils/get-vec-from-anchor-side.ts
+var getVecFromAnchorSide = (anchor_side) => {
+  if (anchor_side === "left")
+    return { x: -1, y: 0 };
+  if (anchor_side === "top")
+    return { x: 0, y: -1 };
+  if (anchor_side === "right")
+    return { x: 1, y: 0 };
+  if (anchor_side === "bottom")
+    return { x: 0, y: 1 };
+  throw new Error(`invalid anchor side "${anchor_side}"`);
+};
+
+// src/schematic-components/SchematicNetLabel.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var SchematicNetLabel = ({
+  net_label
+}) => {
+  const anchor_side = net_label.anchor_side;
+  const is_vertical = anchor_side === "top" || anchor_side === "bottom";
+  const text_width = is_vertical ? 0.3 : net_label.text.length * 0.15;
+  const path_width = 31 + net_label.text.length * 5;
+  const anchor_vec = getVecFromAnchorSide(anchor_side);
+  const anchor_dist = is_vertical ? 0.04 : text_width / 4;
+  anchor_vec.x *= anchor_dist;
+  anchor_vec.y *= anchor_dist;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      SVGPathComponent_default,
+      {
+        rotation: getRotationFromAnchorSide(anchor_side),
+        center: net_label.center,
+        size: {
+          width: 0.05 + text_width,
+          height: 0.2 + (is_vertical ? 0.1 * Math.max(1, net_label.text.length - 2) : 0)
+        },
+        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`,
+            d: `M 0 15 L 5 15 L 11 5 L ${path_width} 5 L ${path_width} 26 L 11 26 L 5 15`
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      SchematicText_default,
+      {
+        schematic_text: {
+          anchor: is_vertical ? "center" : anchor_side,
+          position: {
+            x: net_label.center.x + anchor_vec.x,
+            y: net_label.center.y + anchor_vec.y
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC",
+          text: net_label.text,
+          type: "schematic_text"
+        }
+      }
+    )
+  ] });
+};
+
 // src/schematic-components/SchematicPath.tsx
 var import_svg_path_generator3 = __toESM(require_svg_path_generator2());
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SchematicPath = (props) => {
   const { points, is_filled, is_closed, fill_color } = props.path.schematic;
   if (points.length === 0)
@@ -2094,7 +2195,7 @@ var SchematicPath = (props) => {
     x: pathBounds.minX + pathBounds.width / 2,
     y: pathBounds.minY + pathBounds.height / 2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     SVGPathComponent,
     {
       rotation: 0,
@@ -2113,52 +2214,6 @@ 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_runtime21 = require("react/jsx-runtime");
 var SchematicElement = ({
@@ -2194,15 +2249,11 @@ var SchematicElement = ({
   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_runtime21.jsx)(RenderError_default, { text: element.message });
-  }
   return null;
 };
 
 // src/Schematic.tsx
 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_react8 = require("react");