@tscircuit/schematic-viewer 1.2.14 → 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,48 +2094,6 @@ var SchematicLine = ({ line: { schematic } }) => {
 };
 var SchematicLine_default = SchematicLine;
 
-// src/schematic-components/SchematicPath.tsx
-var import_svg_path_generator3 = __toESM(require_svg_path_generator2());
-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)
-    return null;
-  const path = (0, import_svg_path_generator3.default)();
-  path.moveTo(points[0].x, points[0].y);
-  for (const point of points.slice(1)) {
-    path.lineTo(point.x, point.y);
-  }
-  if (is_closed) {
-    path.closePath();
-  }
-  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 /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    SVGPathComponent,
-    {
-      rotation: 0,
-      center,
-      size: pathBounds,
-      paths: [
-        {
-          stroke: is_filled ? "none" : fill_color ?? "red",
-          strokeWidth: 0.02,
-          fill: is_filled ? fill_color ?? "red" : void 0,
-          d
-        }
-      ]
-    }
-  );
-};
-var SchematicPath_default = SchematicPath;
-
 // src/lib/utils/get-rotation-from-anchor-side.ts
 var getRotationFromAnchorSide = (anchor_side) => {
   if (anchor_side === "left")
@@ -2140,7 +2121,7 @@ var getVecFromAnchorSide = (anchor_side) => {
 };
 
 // src/schematic-components/SchematicNetLabel.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var SchematicNetLabel = ({
   net_label
 }) => {
@@ -2152,8 +2133,8 @@ var SchematicNetLabel = ({
   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_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       SVGPathComponent_default,
       {
         rotation: getRotationFromAnchorSide(anchor_side),
@@ -2172,7 +2153,7 @@ var SchematicNetLabel = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       SchematicText_default,
       {
         schematic_text: {
@@ -2191,6 +2172,48 @@ var SchematicNetLabel = ({
   ] });
 };
 
+// src/schematic-components/SchematicPath.tsx
+var import_svg_path_generator3 = __toESM(require_svg_path_generator2());
+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)
+    return null;
+  const path = (0, import_svg_path_generator3.default)();
+  path.moveTo(points[0].x, points[0].y);
+  for (const point of points.slice(1)) {
+    path.lineTo(point.x, point.y);
+  }
+  if (is_closed) {
+    path.closePath();
+  }
+  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 /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    SVGPathComponent,
+    {
+      rotation: 0,
+      center,
+      size: pathBounds,
+      paths: [
+        {
+          stroke: is_filled ? "none" : fill_color ?? "red",
+          strokeWidth: 0.02,
+          fill: is_filled ? fill_color ?? "red" : void 0,
+          d
+        }
+      ]
+    }
+  );
+};
+var SchematicPath_default = SchematicPath;
+
 // src/schematic-components/SchematicElement.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var SchematicElement = ({
@@ -2226,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");