@tscircuit/schematic-viewer 1.2.14 → 1.4.0

package/src/lib/utils/colors.ts

@@ -0,0 +1,236 @@
+// Kicad-2020 color scheme
+export const colorMap = {
+    "3d_viewer": {
+      background_bottom: "rgb(102, 102, 128)",
+      background_top: "rgb(204, 204, 230)",
+      board: "rgb(51, 43, 23)",
+      copper: "rgb(179, 156, 0)",
+      silkscreen_bottom: "rgb(230, 230, 230)",
+      silkscreen_top: "rgb(230, 230, 230)",
+      soldermask: "rgb(20, 51, 36)",
+      solderpaste: "rgb(128, 128, 128)",
+    },
+    board: {
+      anchor: "rgb(255, 38, 226)",
+      aux_items: "rgb(255, 255, 255)",
+      b_adhes: "rgb(0, 0, 132)",
+      b_crtyd: "rgb(255, 38, 226)",
+      b_fab: "rgb(88, 93, 132)",
+      b_mask: "rgba(2, 255, 238, 0.400)",
+      b_paste: "rgb(0, 194, 194)",
+      b_silks: "rgb(232, 178, 167)",
+      background: "rgb(0, 16, 35)",
+      cmts_user: "rgb(89, 148, 220)",
+      copper: {
+        b: "rgb(77, 127, 196)",
+        f: "rgb(200, 52, 52)",
+        in1: "rgb(127, 200, 127)",
+        in10: "rgb(237, 124, 51)",
+        in11: "rgb(91, 195, 235)",
+        in12: "rgb(247, 111, 142)",
+        in13: "rgb(167, 165, 198)",
+        in14: "rgb(40, 204, 217)",
+        in15: "rgb(232, 178, 167)",
+        in16: "rgb(242, 237, 161)",
+        in17: "rgb(237, 124, 51)",
+        in18: "rgb(91, 195, 235)",
+        in19: "rgb(247, 111, 142)",
+        in2: "rgb(206, 125, 44)",
+        in20: "rgb(167, 165, 198)",
+        in21: "rgb(40, 204, 217)",
+        in22: "rgb(232, 178, 167)",
+        in23: "rgb(242, 237, 161)",
+        in24: "rgb(237, 124, 51)",
+        in25: "rgb(91, 195, 235)",
+        in26: "rgb(247, 111, 142)",
+        in27: "rgb(167, 165, 198)",
+        in28: "rgb(40, 204, 217)",
+        in29: "rgb(232, 178, 167)",
+        in3: "rgb(79, 203, 203)",
+        in30: "rgb(242, 237, 161)",
+        in4: "rgb(219, 98, 139)",
+        in5: "rgb(167, 165, 198)",
+        in6: "rgb(40, 204, 217)",
+        in7: "rgb(232, 178, 167)",
+        in8: "rgb(242, 237, 161)",
+        in9: "rgb(141, 203, 129)",
+      },
+      cursor: "rgb(255, 255, 255)",
+      drc: "rgb(194, 194, 194)",
+      drc_error: "rgba(215, 91, 107, 0.800)",
+      drc_exclusion: "rgb(255, 255, 255)",
+      drc_warning: "rgba(255, 208, 66, 0.902)",
+      dwgs_user: "rgb(194, 194, 194)",
+      eco1_user: "rgb(180, 219, 210)",
+      eco2_user: "rgb(216, 200, 82)",
+      edge_cuts: "rgb(208, 210, 205)",
+      f_adhes: "rgb(132, 0, 132)",
+      f_crtyd: "rgb(255, 0, 245)",
+      f_fab: "rgb(175, 175, 175)",
+      f_mask: "rgba(216, 100, 255, 0.400)",
+      f_paste: "rgba(180, 160, 154, 0.902)",
+      f_silks: "rgb(242, 237, 161)",
+      footprint_text_back: "rgb(0, 0, 132)",
+      footprint_text_front: "rgb(194, 194, 194)",
+      footprint_text_invisible: "rgb(132, 132, 132)",
+      grid: "rgb(132, 132, 132)",
+      grid_axes: "rgb(194, 194, 194)",
+      margin: "rgb(255, 38, 226)",
+      microvia: "rgb(0, 132, 132)",
+      no_connect: "rgb(0, 0, 132)",
+      pad_back: "rgb(77, 127, 196)",
+      pad_front: "rgb(200, 52, 52)",
+      pad_plated_hole: "rgb(194, 194, 0)",
+      pad_through_hole: "rgb(227, 183, 46)",
+      plated_hole: "rgb(26, 196, 210)",
+      ratsnest: "rgba(245, 255, 213, 0.702)",
+      select_overlay: "rgb(4, 255, 67)",
+      through_via: "rgb(236, 236, 236)",
+      user_1: "rgb(194, 194, 194)",
+      user_2: "rgb(89, 148, 220)",
+      user_3: "rgb(180, 219, 210)",
+      user_4: "rgb(216, 200, 82)",
+      user_5: "rgb(194, 194, 194)",
+      user_6: "rgb(89, 148, 220)",
+      user_7: "rgb(180, 219, 210)",
+      user_8: "rgb(216, 200, 82)",
+      user_9: "rgb(232, 178, 167)",
+      via_blind_buried: "rgb(187, 151, 38)",
+      via_hole: "rgb(227, 183, 46)",
+      via_micro: "rgb(0, 132, 132)",
+      via_through: "rgb(236, 236, 236)",
+      worksheet: "rgb(200, 114, 171)",
+    },
+    gerbview: {
+      axes: "rgb(0, 0, 132)",
+      background: "rgb(0, 0, 0)",
+      dcodes: "rgb(255, 255, 255)",
+      grid: "rgb(132, 132, 132)",
+      layers: [
+        "rgb(132, 0, 0)",
+        "rgb(194, 194, 0)",
+        "rgb(194, 0, 194)",
+        "rgb(194, 0, 0)",
+        "rgb(0, 132, 132)",
+        "rgb(0, 132, 0)",
+        "rgb(0, 0, 132)",
+        "rgb(132, 132, 132)",
+        "rgb(132, 0, 132)",
+        "rgb(194, 194, 194)",
+        "rgb(132, 0, 132)",
+        "rgb(132, 0, 0)",
+        "rgb(132, 132, 0)",
+        "rgb(194, 194, 194)",
+        "rgb(0, 0, 132)",
+        "rgb(0, 132, 0)",
+        "rgb(132, 0, 0)",
+        "rgb(194, 194, 0)",
+        "rgb(194, 0, 194)",
+        "rgb(194, 0, 0)",
+        "rgb(0, 132, 132)",
+        "rgb(0, 132, 0)",
+        "rgb(0, 0, 132)",
+        "rgb(132, 132, 132)",
+        "rgb(132, 0, 132)",
+        "rgb(194, 194, 194)",
+        "rgb(132, 0, 132)",
+        "rgb(132, 0, 0)",
+        "rgb(132, 132, 0)",
+        "rgb(194, 194, 194)",
+        "rgb(0, 0, 132)",
+        "rgb(0, 132, 0)",
+        "rgb(132, 0, 0)",
+        "rgb(194, 194, 0)",
+        "rgb(194, 0, 194)",
+        "rgb(194, 0, 0)",
+        "rgb(0, 132, 132)",
+        "rgb(0, 132, 0)",
+        "rgb(0, 0, 132)",
+        "rgb(132, 132, 132)",
+        "rgb(132, 0, 132)",
+        "rgb(194, 194, 194)",
+        "rgb(132, 0, 132)",
+        "rgb(132, 0, 0)",
+        "rgb(132, 132, 0)",
+        "rgb(194, 194, 194)",
+        "rgb(0, 0, 132)",
+        "rgb(0, 132, 0)",
+        "rgb(132, 0, 0)",
+        "rgb(194, 194, 0)",
+        "rgb(194, 0, 194)",
+        "rgb(194, 0, 0)",
+        "rgb(0, 132, 132)",
+        "rgb(0, 132, 0)",
+        "rgb(0, 0, 132)",
+        "rgb(132, 132, 132)",
+        "rgb(132, 0, 132)",
+        "rgb(194, 194, 194)",
+        "rgb(132, 0, 132)",
+        "rgb(132, 0, 0)",
+      ],
+      negative_objects: "rgb(132, 132, 132)",
+      worksheet: "rgb(0, 0, 132)",
+    },
+    meta: {
+      filename: "kicad_2020",
+      name: "KiCad 2020",
+      version: 2,
+    },
+    palette: [
+      "rgb(132, 0, 0)",
+      "rgb(194, 194, 0)",
+      "rgb(194, 0, 194)",
+      "rgb(194, 0, 0)",
+      "rgb(0, 132, 132)",
+      "rgb(0, 132, 0)",
+      "rgb(0, 0, 132)",
+      "rgb(132, 132, 132)",
+      "rgb(132, 0, 132)",
+      "rgb(194, 194, 194)",
+      "rgb(132, 0, 132)",
+      "rgb(132, 0, 0)",
+      "rgb(132, 132, 0)",
+      "rgb(194, 194, 194)",
+      "rgb(0, 0, 132)",
+      "rgb(0, 132, 0)",
+    ],
+    schematic: {
+      aux_items: "rgb(46, 46, 46)",
+      background: "rgb(245, 241, 237)",
+      brightened: "rgb(255, 0, 255)",
+      bus: "rgb(0, 0, 132)",
+      bus_junction: "rgb(0, 0, 132)",
+      component_body: "rgb(255, 255, 194)",
+      component_outline: "rgb(132, 0, 0)",
+      cursor: "rgb(15, 15, 15)",
+      erc_error: "rgba(230, 9, 13, 0.800)",
+      erc_warning: "rgba(209, 146, 0, 0.800)",
+      fields: "rgb(132, 0, 132)",
+      grid: "rgb(181, 181, 181)",
+      grid_axes: "rgb(0, 0, 132)",
+      hidden: "rgb(194, 194, 194)",
+      junction: "rgb(0, 150, 0)",
+      label_global: "rgb(132, 0, 0)",
+      label_hier: "rgb(114, 86, 0)",
+      label_local: "rgb(15, 15, 15)",
+      net_name: "rgb(132, 132, 132)",
+      no_connect: "rgb(0, 0, 132)",
+      note: "rgb(0, 0, 194)",
+      override_item_colors: false,
+      pin: "rgb(132, 0, 0)",
+      pin_name: "rgb(0, 100, 100)",
+      pin_number: "rgb(169, 0, 0)",
+      reference: "rgb(0, 100, 100)",
+      shadow: "rgba(102, 179, 255, 0.800)",
+      sheet: "rgb(132, 0, 0)",
+      sheet_background: "rgba(253, 255, 231, 0.000)",
+      sheet_fields: "rgb(132, 0, 132)",
+      sheet_filename: "rgb(114, 86, 0)",
+      sheet_label: "rgb(0, 100, 100)",
+      sheet_name: "rgb(0, 100, 100)",
+      value: "rgb(0, 100, 100)",
+      wire: "rgb(0, 150, 0)",
+      worksheet: "rgb(132, 0, 0)",
+    },
+  }
+  

package/src/schematic-components/SVGPathComponent.tsx

@@ -1,30 +1,37 @@
-import { useGlobalStore } from "lib/render-context"
-import getSVGPathBounds from "lib/utils/get-svg-path-bounds"
-import { useCallback, useState } from "react"
+import { useGlobalStore } from "lib/render-context";
+import getSVGPathBounds from "lib/utils/get-svg-path-bounds";
+import { useState } from "react";
+import { applyToPoint, compose, scale, toSVG, translate } from "transformation-matrix";
 
-import {
-  applyToPoint,
-  toSVG,
-  inverse,
-  compose,
-  translate,
-  scale,
-} from "transformation-matrix"
+interface PathProps {
+  type?: 'path';
+  strokeWidth: number;
+  stroke: string;
+  fill?: string;
+  d: string;
+}
+
+interface CircleProps {
+  type: 'circle';
+  cx: number;
+  cy: number;
+  r: number;
+  strokeWidth: number;
+  stroke: string;
+  fill?: string;
+}
+
+export type SVGElement = PathProps | CircleProps;
 
 interface Props {
-  rotation: number
-  center: { x: number; y: number }
-  size: { width: number; height: number }
-  invertY?: boolean
-  shiftToBottom?: boolean
-  paths: Array<{
-    strokeWidth: number
-    stroke: string
-    fill?: string
-    d: string
-  }>
-  zIndex?: number
-  hoverContent?: any
+  rotation: number;
+  center: { x: number; y: number };
+  size: { width: number; height: number };
+  invertY?: boolean;
+  shiftToBottom?: boolean;
+  paths: SVGElement[];
+  zIndex?: number;
+  hoverContent?: any;
 }
 
 export const SVGPathComponent = ({
@@ -37,136 +44,69 @@ export const SVGPathComponent = ({
   shiftToBottom,
   hoverContent,
 }: Props) => {
-  const ct = useGlobalStore((s) => s.camera_transform)
-  const pathBounds = getSVGPathBounds(paths.map((p) => p.d))
-  // Margin in SVG Space
-  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, 0.01)
-  // pathBounds.width = Math.max(pathBounds.width, 0.01)
-
-  // Three sizes:
-  // pathBound size (the size of the path in "d")
-  // innerSize (the screen-space size of the path)
-  // fullSize (the screen-space size of the svg element, innerSize plus padding)
-
-  const padding = {
-    x: 0,
-    y: 0,
-  }
-
-  const absoluteCenter = applyToPoint(ct, center)
+  const ct = useGlobalStore((s) => s.camera_transform);
+  const pathBounds = getSVGPathBounds(paths.filter((p): p is PathProps => p.type !== 'circle').map(p => p.d));
 
+  const padding = { x: 0, y: 0 };
+  const absoluteCenter = applyToPoint(ct, center);
   const innerSize = {
     width: size.width * ct.a,
     height: size.height * Math.abs(ct.d),
-  }
-
+  };
   const fullSize = {
     width: innerSize.width + padding.x * 2,
     height: innerSize.height + padding.y * 2,
-  }
+  };
 
-  const [hovering, setHovering] = useState(false)
+  const [hovering, setHovering] = useState(false);
 
-  const svgLeft = absoluteCenter.x - fullSize.width / 2
-  const svgTop = absoluteCenter.y - fullSize.height / 2
+  const svgLeft = absoluteCenter.x - fullSize.width / 2;
+  const svgTop = absoluteCenter.y - fullSize.height / 2;
 
-  // const viewBox = `${pathBounds.minX} ${pathBounds.minY} ${pathBounds.width} ${pathBounds.height}`
-  // const viewBox2 = `${svgLeft} ${svgTctualAbsWidth} ${actualAbsHeight}`
+  const preferredRatio = pathBounds.width === 0
+    ? innerSize.height / pathBounds.height
+    : innerSize.width / pathBounds.width;
 
-  // console.log(
-  //   pathBounds,
-  //   fullSize,
-  //   fullSize.width / pathBounds.width,
-  //   fullSize.height / pathBounds.height
-  // )
-  const preferredRatio =
-    pathBounds.width === 0
-      ? innerSize.height / pathBounds.height
-      : innerSize.width / pathBounds.width
   const svgToScreen = compose(
-    // translate(0, 0)
     scale(
-      pathBounds.width === 0
-        ? preferredRatio
-        : fullSize.width / pathBounds.width,
-      pathBounds.height === 0
-        ? preferredRatio
-        : fullSize.height / pathBounds.height
+      pathBounds.width === 0 ? preferredRatio : fullSize.width / pathBounds.width,
+      pathBounds.height === 0 ? preferredRatio : fullSize.height / pathBounds.height,
     ),
-    translate(-pathBounds.minX, -pathBounds.minY)
-    // translate(center.x, center.y)
-  )
-  // console.log(svgToScreen)
-  // console.log(toSVG(svgToScreen))
-  // console.log(paths[0].d)
-  // translate(..., ...),
+    translate(-pathBounds.minX, -pathBounds.minY),
+  );
 
   return (
-    <>
-      {hovering && (
-        <>
-          <div
-            style={{
-              position: "absolute",
-              left: svgLeft - 6,
-              top: svgTop - 6,
-              pointerEvents: "none",
-              width: fullSize.width + 12,
-              height: fullSize.height + 12,
-              border: "1px red solid",
-              mixBlendMode: "difference",
-              zIndex: 1000,
-            }}
+    <svg
+      onMouseOver={() => setHovering(Boolean(hoverContent))}
+      onMouseOut={() => setHovering(false)}
+      style={{
+        position: "absolute",
+        cursor: hovering ? "pointer" : undefined,
+        zIndex,
+        transform: [
+          invertY ? "scale(1, 1)" : "scale(1, -1)",
+          shiftToBottom ? "translate(0, 100%)" : "",
+          rotation === 0 ? "" : `rotate(${rotation}deg)`,
+        ].join(" "),
+        left: svgLeft,
+        top: svgTop,
+      }}
+      overflow="visible"
+      width={fullSize.width}
+      height={fullSize.height}
+    >
+      {paths.map((p, i) => 
+        p.type === 'circle' ? (
+          <circle
+            key={i}
+            cx={p.cx}
+            cy={p.cy}
+            r={p.r}
+            fill={p.fill ?? "none"}
+            strokeWidth={1.5 * (p.strokeWidth || 1)}
+            stroke={p.stroke || "red"}
           />
-          <div
-            style={{
-              position: "absolute",
-              left: svgLeft + fullSize.width + 10,
-              pointerEvents: "none",
-              zIndex: 1000,
-              color: "red",
-              mixBlendMode: "difference",
-              top: svgTop,
-              fontFamily: "monospace",
-              fontSize: 14,
-            }}
-          >
-            {hoverContent}
-          </div>
-        </>
-      )}
-      <svg
-        onMouseOver={() => setHovering(Boolean(hoverContent))}
-        onMouseOut={() => setHovering(false)}
-        style={{
-          position: "absolute",
-          // backgroundColor: hovering ? "rgba(0, 0, 255, 0.5)" : "transparent",
-          cursor: hovering ? "pointer" : undefined,
-          zIndex,
-          transform: [
-            invertY ? "scale(1, 1)" : "scale(1, -1)", // TODO based on ct.d
-            shiftToBottom ? "translate(0, 100%)" : "",
-            rotation === 0 ? "" : `rotate(${rotation}rad)`,
-          ].join(" "),
-          left: svgLeft,
-          top: svgTop,
-          // overflow: "hidden",
-          // backgroundColor: badRatio ? "rgba(255, 0, 0, 0.1)" : "transparent",
-          // backgroundColor: "rgba(255, 0, 0, 0.1)",
-        }}
-        overflow="visible"
-        width={fullSize.width}
-        height={fullSize.height}
-      >
-        {paths.map((p, i) => (
+        ) : (
           <path
             key={i}
             transform={toSVG(svgToScreen)}
@@ -174,12 +114,12 @@ export const SVGPathComponent = ({
             strokeLinecap="round"
             strokeWidth={1.5 * (p.strokeWidth || 1)}
             stroke={p.stroke || "red"}
-            d={p.d}
+            d={p.d || ""}
           />
-        ))}
-      </svg>
-    </>
-  )
-}
+        )
+      )}
+    </svg>
+  );
+};
 
-export default SVGPathComponent
+export default SVGPathComponent;

package/src/schematic-components/SchematicChip.tsx

@@ -0,0 +1,183 @@
+import { AnyCircuitElement, SchematicPort as OriginalSchematicPort, SchematicComponent } from "circuit-json";
+import * as Type from "lib/types";
+import { colorMap } from "lib/utils/colors";
+import React from 'react';
+import SVGPathComponent from "./SVGPathComponent";
+import SchematicText from "./SchematicText";
+
+interface Props {
+  component: {
+    source: Type.SimpleBug;
+    schematic: SchematicComponent;
+    allElements: AnyCircuitElement[];
+  }
+}
+
+type ExtendedCenter = OriginalSchematicPort['center'] & {
+  side: "left" | "right" | "top" | "bottom";
+  pinNumber: number;
+  distanceFromEdge: number;
+  trueIndex: number;
+};
+
+type SchematicPort = Omit<OriginalSchematicPort, 'center'> & {
+  center: ExtendedCenter;
+};
+
+export const SchematicChip: React.FC<Props> = ({ component: { source, schematic, allElements } }) => {
+  const { center, size, rotation, schematic_component_id } = schematic;
+  const { manufacturerPartNumber, name } = source;
+  const chipWidth = size.width;
+  const chipHeight = size.height;
+
+  const paths: Array<{type?: 'path' | 'circle', strokeWidth: number, stroke: string, fill?: string, d?: string, cx?: number, cy?: number, r?: number}> = [];
+
+  // Main chip rectangle
+  paths.push({
+    type: 'path',
+    strokeWidth: 0.02,
+    stroke: colorMap.schematic.component_outline,
+    fill: colorMap.schematic.component_body,
+    d: `M ${-chipWidth / 2},${-chipHeight / 2} h ${chipWidth} v ${chipHeight} h ${-chipWidth} Z`,
+  });
+
+  const schematicPorts = allElements.filter(
+    (item): item is SchematicPort => 
+      item.type === "schematic_port" && 
+      item.schematic_component_id === schematic_component_id
+  );
+
+  const portLength = 0.2;
+  const circleRadius = 0.05;
+  const labelOffset = 0.1;
+
+  const pinLabels: Array<{x: number, y: number, text: string, anchor: string}> = [];
+
+  schematicPorts.forEach((port) => {
+    const { side, pinNumber, distanceFromEdge } = port.center;
+    let x = 0, y = 0, endX = 0, endY = 0;
+    let labelX = 0, labelY = 0;
+    let textAnchor = "middle";
+
+    switch (side) {
+      case "left":
+        x = -chipWidth / 2;
+        y = -chipHeight / 2 + distanceFromEdge;
+        endX = x - portLength;
+        endY = y;
+        labelX = endX;
+        labelY = y + labelOffset;
+        textAnchor = "end";
+        break;
+      case "right":
+        x = chipWidth / 2;
+        y = chipHeight / 2 - distanceFromEdge;
+        endX = x + portLength;
+        endY = y;
+        labelX = endX - labelOffset;
+        labelY = y + labelOffset;
+        textAnchor = "start";
+        break;
+      case "bottom":
+        x = -chipWidth / 2 + distanceFromEdge;
+        y = -chipHeight / 2;
+        endX = x;
+        endY = y - portLength;
+        labelX = x;
+        labelY = endY + labelOffset;
+        break;
+      case "top":
+        x = chipWidth / 2 - distanceFromEdge;
+        y = chipHeight / 2;
+        endX = x;
+        endY = y + portLength;
+        labelX = x;
+        labelY = endY + labelOffset;
+        break;
+    }
+
+    // Port line
+    paths.push({
+      type: 'path',
+      strokeWidth: 0.02,
+      stroke: colorMap.schematic.component_outline,
+      d: `M ${x},${y} L ${endX},${endY}`,
+    });
+
+    // Port circle at the end of the line
+    paths.push({
+      type: 'circle',
+      cx: endX,
+      cy: endY,
+      r: circleRadius,
+      strokeWidth: 0.01,
+      stroke: colorMap.schematic.component_outline,
+      fill: colorMap.schematic.component_outline,
+    });
+
+    // Add pin label
+    if(pinNumber !== undefined) {
+      pinLabels.push({
+        x: labelX,
+        y: labelY,
+        text: `${pinNumber}`,
+        anchor: textAnchor
+      });
+    }
+  });
+
+  return (
+    <>
+      <SVGPathComponent
+        rotation={rotation}
+        center={center}
+        size={size}
+        paths={paths as any}
+      />
+      {pinLabels.map((label, index) => (
+        <SchematicText
+          key={index}
+          schematic_text={{
+            anchor: label.anchor as any,
+            position: {
+              x: center.x + label.x,
+              y: center.y + label.y,
+            },
+            schematic_component_id: "SYNTHETIC",
+            schematic_text_id: `PIN_LABEL_${index}`,
+            text: label.text,
+            type: "schematic_text",
+          }}
+        />
+      ))}
+      <SchematicText
+        schematic_text={{
+          anchor: "center",
+          position: {
+            x: center.x,
+            y: center.y - chipHeight / 2 - 0.2,
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC_MPN",
+          text: manufacturerPartNumber,
+          type: "schematic_text",
+        }}
+      />
+      <SchematicText
+        schematic_text={{
+          anchor: "center",
+          position: {
+            x: center.x,
+            y: center.y + chipHeight / 2 + 0.2,
+          },
+          schematic_component_id: "SYNTHETIC",
+          schematic_text_id: "SYNTHETIC_NAME",
+          text: name,
+          type: "schematic_text",
+        }}
+      />
+    </>
+  );
+};
+
+export default SchematicChip;