@tscircuit/runframe 0.0.5 → 0.0.7

package/dist/chunk-YW33LMDL.js

@@ -0,0 +1,956 @@
+// lib/components/ui/tabs.tsx
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+// lib/utils/index.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// lib/components/ui/tabs.tsx
+import { jsx } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// lib/utils/pcbManualEditEventHandler.ts
+import { getManualTraceHintFromEvent } from "@tscircuit/layout";
+
+// lib/components/CircuitJsonPreview.tsx
+import { CadViewer } from "@tscircuit/3d-viewer";
+import "@tscircuit/pcb-viewer";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+
+// lib/components/ErrorFallback.tsx
+import "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ErrorFallback = ({ error }) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-testid": "error-container",
+      className: "error-container mt-4 bg-red-50 rounded-md border border-red-200",
+      children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsx2("h2", { className: "text-lg font-semibold text-red-800 mb-3", children: "Error Loading 3D Viewer" }),
+        /* @__PURE__ */ jsx2("p", { className: "text-xs font-mono whitespace-pre-wrap text-red-700", children: error.message }),
+        /* @__PURE__ */ jsx2(
+          "details",
+          {
+            style: { whiteSpace: "pre-wrap" },
+            className: "text-xs font-mono text-red-600 mt-2",
+            children: error.stack
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// lib/components/CircuitJsonPreview.tsx
+import { ErrorBoundary } from "react-error-boundary";
+
+// lib/components/ErrorTabContent.tsx
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { ClipboardIcon } from "lucide-react";
+
+// lib/components/ui/button.tsx
+import * as React3 from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-900 text-slate-50 shadow hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
+        destructive: "bg-red-500 text-slate-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
+        outline: "border border-slate-200 bg-white shadow-sm hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        secondary: "bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
+        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React3.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = "button";
+    return /* @__PURE__ */ jsx3(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// lib/components/ErrorTabContent.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var ErrorTabContent = ({
+  code,
+  isStreaming,
+  errorMessage
+}) => {
+  if (!errorMessage) {
+    return /* @__PURE__ */ jsx4("div", { className: "mt-4 bg-green-50 rounded-md border border-green-200", children: /* @__PURE__ */ jsxs2("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "text-lg font-semibold text-green-800 mb-3", children: "No Errors \u{1F44C}" }),
+      /* @__PURE__ */ jsx4("p", { className: "text-sm text-green-700", children: "Your code is running without any errors." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("div", { className: "mt-4 bg-red-50 rounded-md border border-red-200 max-h-[500px] overflow-y-auto", children: /* @__PURE__ */ jsxs2("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "text-lg font-semibold text-red-800 mb-3", children: "Error" }),
+      /* @__PURE__ */ jsx4("p", { className: "text-xs font-mono whitespace-pre-wrap text-red-600 mt-2", children: errorMessage })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex gap-2 mt-4 justify-end", children: [
+      /* @__PURE__ */ jsxs2(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => {
+            if (!errorMessage) return;
+            navigator.clipboard.writeText(errorMessage);
+            alert("Error copied to clipboard!");
+          },
+          children: [
+            /* @__PURE__ */ jsx4(ClipboardIcon, { className: "w-4 h-4 mr-2" }),
+            "Copy Error"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        Button,
+        {
+          variant: "outline",
+          onClick: () => {
+            window.alert(
+              "Not supported yet! Please report/upvote an issue on github.com/tscircuit/tscircuit"
+            );
+          },
+          children: [
+            /* @__PURE__ */ jsx4(GitHubLogoIcon, { className: "w-4 h-4 mr-2" }),
+            "Report Issue"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// lib/components/CircuitJsonPreview.tsx
+import { SchematicViewer } from "@tscircuit/schematic-viewer";
+
+// lib/components/PreviewEmptyState.tsx
+import { PlayIcon } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var PreviewEmptyState = ({ onRunClicked }) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3 bg-gray-100 text-center justify-center py-10", children: [
+  "No circuit json loaded",
+  /* @__PURE__ */ jsxs3(Button, { className: "bg-blue-600 hover:bg-blue-500", onClick: onRunClicked, children: [
+    "Run Code",
+    /* @__PURE__ */ jsx5(PlayIcon, { className: "w-3 h-3 ml-2" })
+  ] })
+] });
+var PreviewEmptyState_default = PreviewEmptyState;
+
+// lib/components/CircuitJsonTableViewer/CircuitJsonTableViewer.tsx
+import { useReducer, useState } from "react";
+
+// lib/components/CircuitJsonTableViewer/ClickableText.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ClickableText = ({
+  text,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: "cursor-pointer underline text-blue-300 mx-2",
+      onClick,
+      children: text
+    }
+  );
+};
+
+// lib/components/CircuitJsonTableViewer/HeaderCell.tsx
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var HeaderCell = (p) => {
+  return /* @__PURE__ */ jsxs4("div", { className: "leading-5", children: [
+    /* @__PURE__ */ jsx7("div", { className: "py-2 font-bold", children: p.column.name }),
+    /* @__PURE__ */ jsx7("div", { children: p.field?.() ?? /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type: "text",
+        className: "border rounded p-1 w-full",
+        onChange: (e) => {
+          p.onTextChange?.(e.target.value);
+        }
+      }
+    ) })
+  ] });
+};
+
+// lib/components/CircuitJsonTableViewer/Modal.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var Modal = ({ open, children, title, onClose }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "bg-white p-5 rounded-lg relative w-11/12 max-w-2xl",
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: [
+            /* @__PURE__ */ jsx8("h2", { className: "mt-0 text-xl", children: title }),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                className: "absolute top-4 right-4 text-2xl font-bold",
+                onClick: onClose,
+                children: "\xD7"
+              }
+            ),
+            children
+          ]
+        }
+      )
+    }
+  );
+};
+var Modal_default = Modal;
+
+// lib/components/CircuitJsonTableViewer/CircuitJsonTableViewer.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var CircuitJsonTableViewer = ({
+  elements
+}) => {
+  const [modal, setModal] = useState({ open: false });
+  const [filters, setFilter] = useReducer(
+    (s, a) => ({
+      ...s,
+      ...a
+    }),
+    {}
+  );
+  const element_types = [...new Set(elements.map((e) => e.type))];
+  const elements2 = elements.map((e) => {
+    const primary_id = e[`${e.type}_id`];
+    const other_ids = Object.fromEntries(
+      Object.entries(e).filter(([k]) => {
+        if (k === `${e.type}_id`) return false;
+        if (!k.endsWith("_id")) return false;
+        return true;
+      })
+    );
+    const other_props = Object.fromEntries(
+      Object.entries(e).filter(([k]) => !k.endsWith("_id"))
+    );
+    return {
+      primary_id,
+      other_ids,
+      ...other_props,
+      _og_elm: e
+    };
+  });
+  const elements3 = elements2.map((e) => {
+    let selector_path = "";
+    const getSelectorPath = (e2) => {
+      const parent_key = Object.keys(e2.other_ids).find(
+        (k) => k.startsWith("source_")
+      );
+      if (!parent_key) return `.${e2.name}`;
+      const parent_type = parent_key.slice(0, -3);
+      const parent = elements2.find(
+        (p) => p.type === parent_type && p.primary_id === e2.other_ids[parent_key]
+      );
+      if (!parent) return `??? > .${e2.name}`;
+      if (!("name" in parent)) return `#${parent.primary_id} > .${e2.name}`;
+      return `${getSelectorPath(parent)} > .${e2.name}`;
+    };
+    if ("name" in e) {
+      selector_path = getSelectorPath(e);
+    }
+    return {
+      ...e,
+      selector_path
+    };
+  });
+  const columns = [
+    {
+      key: "primary_id",
+      name: "primary_id",
+      renderCell: (row) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx9(
+          ClickableText,
+          {
+            text: row.primary_id,
+            onClick: () => setFilter({
+              focused_id: row.primary_id,
+              id_search: void 0,
+              selector_search: void 0
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx9("span", { className: "flex-grow" }),
+        /* @__PURE__ */ jsx9(
+          ClickableText,
+          {
+            text: "(JSON)",
+            onClick: () => setModal({
+              open: true,
+              element: row._og_elm,
+              title: row.primary_id
+            })
+          }
+        )
+      ] }),
+      renderHeaderCell: (col) => /* @__PURE__ */ jsx9(
+        HeaderCell,
+        {
+          column: col,
+          onTextChange: (v) => setFilter({ id_search: v }),
+          field: !filters.focused_id ? void 0 : () => /* @__PURE__ */ jsxs6("div", { children: [
+            "Focus:",
+            " ",
+            /* @__PURE__ */ jsx9("span", { className: "underline", children: filters.focused_id }),
+            /* @__PURE__ */ jsx9(
+              ClickableText,
+              {
+                text: "(unfocus)",
+                onClick: () => setFilter({ focused_id: void 0 })
+              }
+            )
+          ] })
+        }
+      )
+    },
+    {
+      key: "type",
+      name: "type",
+      renderHeaderCell: (col) => /* @__PURE__ */ jsx9(
+        HeaderCell,
+        {
+          column: col,
+          field: () => /* @__PURE__ */ jsxs6(
+            "select",
+            {
+              onChange: (e) => setFilter({ component_type_filter: e.target.value }),
+              className: "border rounded p-1 w-full",
+              children: [
+                /* @__PURE__ */ jsx9("option", { value: "any", children: "any" }, "any"),
+                /* @__PURE__ */ jsx9("option", { value: "source", children: "source" }, "source"),
+                /* @__PURE__ */ jsx9("option", { value: "source/pcb", children: "source/pcb" }, "source/pcb"),
+                /* @__PURE__ */ jsx9("option", { value: "source/schematic", children: "source/schematic" }, "source/schematic"),
+                element_types.map((type) => /* @__PURE__ */ jsx9("option", { value: type, children: type }, type))
+              ]
+            }
+          )
+        }
+      )
+    },
+    {
+      key: "name",
+      name: "name",
+      renderHeaderCell: (col) => /* @__PURE__ */ jsx9(
+        HeaderCell,
+        {
+          column: col,
+          onTextChange: (t) => setFilter({ name_search: t })
+        }
+      )
+    },
+    {
+      key: "selector_path",
+      name: "selector_path",
+      renderHeaderCell: (col) => /* @__PURE__ */ jsx9(
+        HeaderCell,
+        {
+          column: col,
+          onTextChange: (t) => setFilter({ selector_search: t })
+        }
+      )
+    },
+    {
+      key: "other_ids",
+      name: "other_ids",
+      renderCell: (row) => /* @__PURE__ */ jsx9("div", { className: "space-x-2", children: Object.entries(row.other_ids).map(([other_id, v]) => /* @__PURE__ */ jsx9(
+        ClickableText,
+        {
+          text: v,
+          onClick: () => setFilter({ focused_id: v })
+        },
+        v
+      )) })
+    }
+  ];
+  const elements4 = elements3.filter((e) => {
+    if (!filters.name_search) return true;
+    return e.name?.toLowerCase()?.includes(filters.name_search.toLowerCase());
+  }).filter((e) => {
+    if (!filters.component_type_filter) return true;
+    if (filters.component_type_filter === "any") return true;
+    if (filters.component_type_filter === "source") {
+      return e.type.startsWith("source_");
+    }
+    if (filters.component_type_filter === "source/pcb") {
+      return e.type.startsWith("source_") || e.type.startsWith("pcb_");
+    }
+    if (filters.component_type_filter === "source/schematic") {
+      return e.type.startsWith("source_") || e.type.startsWith("schematic_");
+    }
+    return e.type?.includes(filters.component_type_filter);
+  }).filter((e) => {
+    if (!filters.selector_search) return true;
+    const parts = filters.selector_search.split(" ").filter((p) => p.length > 0);
+    return parts.every((part) => e.selector_path?.includes(part));
+  }).filter((e) => {
+    if (!filters.id_search) return true;
+    return e.primary_id?.includes(filters.id_search);
+  }).filter((e) => {
+    if (!filters.focused_id) return true;
+    if (e.primary_id === filters.focused_id) return true;
+    if (Object.values(e.other_ids).includes(filters.focused_id)) return true;
+    return false;
+  });
+  return /* @__PURE__ */ jsxs6("div", { className: "font-mono text-xs", children: [
+    /* @__PURE__ */ jsx9("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs6("table", { className: "table-auto w-full text-left", children: [
+      /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { children: columns.map((col) => /* @__PURE__ */ jsx9("th", { className: "px-4 py-2 border-b", children: col.renderHeaderCell ? col.renderHeaderCell(col) : col.name }, col.key)) }) }),
+      /* @__PURE__ */ jsx9("tbody", { children: elements4.map((row, rowIndex) => /* @__PURE__ */ jsx9("tr", { className: "hover:bg-gray-100", children: columns.map((col) => /* @__PURE__ */ jsx9("td", { className: "px-4 py-2 border-b", children: col.renderCell ? col.renderCell(row) : row[col.key] }, col.key)) }, rowIndex)) })
+    ] }) }),
+    /* @__PURE__ */ jsx9(
+      Modal_default,
+      {
+        open: modal.open,
+        onClose: () => setModal({ open: false }),
+        title: modal.open ? modal.title : "",
+        children: /* @__PURE__ */ jsx9("div", { className: "bg-gray-800 p-3 text-white rounded", children: /* @__PURE__ */ jsx9("pre", { className: "whitespace-pre-wrap", children: modal.open ? JSON.stringify(modal.element, null, 2) : "" }) })
+      }
+    )
+  ] });
+};
+
+// lib/components/BomTable.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var linkify = (supplier, partNumber) => {
+  if (supplier === "jlcpcb") {
+    return /* @__PURE__ */ jsx10(
+      "a",
+      {
+        className: "underline text-blue-500",
+        target: "_blank",
+        rel: "noreferrer",
+        href: `https://jlcpcb.com/partdetail/${partNumber}`,
+        children: partNumber
+      }
+    );
+  }
+  return partNumber;
+};
+var BomTable = ({ circuitJson }) => {
+  const sourceComponents = circuitJson.filter(
+    (el) => el.type === "source_component"
+  );
+  const supplierColumns = /* @__PURE__ */ new Set();
+  for (const comp of sourceComponents) {
+    if (comp.supplier_part_numbers) {
+      for (const supplier of Object.keys(comp.supplier_part_numbers)) {
+        supplierColumns.add(supplier);
+      }
+    }
+  }
+  return /* @__PURE__ */ jsx10("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs7("table", { className: "w-full text-left text-sm", children: [
+    /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "border-b", children: [
+      /* @__PURE__ */ jsx10("th", { className: "p-2", children: "Name" }),
+      Array.from(supplierColumns).map((supplier) => /* @__PURE__ */ jsx10("th", { className: "p-2 capitalize", children: supplier }, supplier))
+    ] }) }),
+    /* @__PURE__ */ jsx10("tbody", { children: sourceComponents.map((comp) => /* @__PURE__ */ jsxs7("tr", { className: "border-b", children: [
+      /* @__PURE__ */ jsx10("td", { className: "p-2", children: comp.name }),
+      Array.from(supplierColumns).map((supplier) => /* @__PURE__ */ jsx10("td", { className: "p-2", children: linkify(
+        supplier,
+        comp.supplier_part_numbers?.[supplier]?.[0] || ""
+      ) }, supplier))
+    ] }, comp.source_component_id)) })
+  ] }) });
+};
+
+// lib/components/CircuitJsonPreview.tsx
+import {
+  CheckIcon as CheckIcon2,
+  EllipsisIcon,
+  FullscreenIcon,
+  MinimizeIcon
+} from "lucide-react";
+
+// lib/components/ui/dropdown-menu.tsx
+import * as React4 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon
+} from "@radix-ui/react-icons";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx11(ChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React4.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx11(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// lib/components/PcbViewerWithContainerHeight.tsx
+import { useRef, useState as useState2, useLayoutEffect } from "react";
+import { PCBViewer } from "@tscircuit/pcb-viewer";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var PcbViewerWithContainerHeight = ({
+  containerClassName,
+  ...props
+}) => {
+  const containerRef = useRef(null);
+  const [computedHeight, setComputedHeight] = useState2(620);
+  useLayoutEffect(() => {
+    const updateHeight = () => {
+      if (containerRef.current) {
+        const containerHeight = containerRef.current.clientHeight;
+        const screenHeight = window.innerHeight;
+        setComputedHeight(
+          Math.min(Math.max(containerHeight, 620), screenHeight)
+        );
+      }
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+    window.addEventListener("resize", updateHeight);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("resize", updateHeight);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx12("div", { ref: containerRef, className: containerClassName || "w-full h-full", children: /* @__PURE__ */ jsx12(PCBViewer, { ...props, height: computedHeight }) });
+};
+
+// lib/hooks/use-styles.ts
+import { useEffect } from "react";
+
+// lib/hooks/styles.generated.ts
+var styles_generated_default = `.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-2{left:.5rem}.right-4{right:1rem}.right-\\[4px\\]{right:4px}.top-4{top:1rem}.top-\\[6px\\]{top:6px}.z-50{z-index:50}.-mx-1{margin-left:-.25rem;margin-right:-.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-1{margin-bottom:.25rem;margin-top:.25rem}.mb-3{margin-bottom:.75rem}.ml-2{margin-left:.5rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-0{margin-top:0}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.contents{display:contents}.h-1{height:.25rem}.h-10{height:2.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-3\\.5{height:.875rem}.h-4{height:1rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\\[620px\\]{height:620px}.h-\\[calc\\(100vh-96px\\)\\]{height:calc(100vh - 96px)}.h-full{height:100%}.h-px{height:1px}.max-h-\\[500px\\]{max-height:500px}.min-h-\\[620px\\]{min-height:620px}.min-h-\\[calc\\(100vh-240px\\)\\]{min-height:calc(100vh - 240px)}.w-1{width:.25rem}.w-11\\/12{width:91.666667%}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\\.5{width:.875rem}.w-4{width:1rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-\\[8rem\\]{min-width:8rem}.max-w-2xl{max-width:42rem}.flex-grow{flex-grow:1}.table-auto{table-layout:auto}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-opacity-50{--tw-bg-opacity:0.5}.fill-current{fill:currentColor}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-10{padding-bottom:2.5rem;padding-top:2.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\\[8px\\]{font-size:8px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.leading-5{line-height:1.25rem}.tracking-widest{letter-spacing:.1em}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-slate-50{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.opacity-60{opacity:.6}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring-offset-white{--tw-ring-offset-color:#fff}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.\\*\\:text-xs>*{font-size:.75rem;line-height:1rem}.hover\\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:bg-red-500\\/90:hover{background-color:rgba(239,68,68,.9)}.hover\\:bg-slate-100:hover{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.hover\\:bg-slate-100\\/80:hover{background-color:rgba(241,245,249,.8)}.hover\\:bg-slate-900\\/90:hover{background-color:rgba(15,23,42,.9)}.hover\\:text-slate-900:hover{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.hover\\:underline:hover{text-decoration-line:underline}.focus\\:bg-slate-100:focus{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.focus\\:text-slate-900:focus{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.focus-visible\\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:ring-1:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\\:ring-slate-950:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(2 6 23/var(--tw-ring-opacity,1))}.focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:pointer-events-none:disabled{pointer-events:none}.disabled\\:opacity-50:disabled{opacity:.5}.data-\\[disabled\\]\\:pointer-events-none[data-disabled]{pointer-events:none}.data-\\[state\\=active\\]\\:bg-white[data-state=active]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.data-\\[state\\=open\\]\\:bg-slate-100[data-state=open]{--tw-bg-opacity:1;background-color:rgb(241 245 249/var(--tw-bg-opacity,1))}.data-\\[state\\=active\\]\\:text-slate-950[data-state=active]{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.data-\\[disabled\\]\\:opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=active\\]\\:shadow[data-state=active]{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media (min-width:768px){.md\\:sticky{position:sticky}.md\\:top-2{top:.5rem}}@media (prefers-color-scheme:dark){.dark\\:border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity,1))}.dark\\:bg-red-900{--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.dark\\:bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.dark\\:bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\\:bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.dark\\:text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.dark\\:text-slate-50{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}.dark\\:text-slate-900{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.dark\\:ring-offset-slate-950{--tw-ring-offset-color:#020617}.dark\\:hover\\:bg-red-900\\/90:hover{background-color:rgba(127,29,29,.9)}.dark\\:hover\\:bg-slate-50\\/90:hover{background-color:rgba(248,250,252,.9)}.dark\\:hover\\:bg-slate-800:hover{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\\:hover\\:bg-slate-800\\/80:hover{background-color:rgba(30,41,59,.8)}.dark\\:hover\\:text-slate-50:hover{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}.dark\\:focus\\:bg-slate-800:focus{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\\:focus\\:text-slate-50:focus{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}.dark\\:focus-visible\\:ring-slate-300:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(203 213 225/var(--tw-ring-opacity,1))}.dark\\:data-\\[state\\=active\\]\\:bg-slate-950[data-state=active]{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.dark\\:data-\\[state\\=open\\]\\:bg-slate-800[data-state=open]{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\\:data-\\[state\\=active\\]\\:text-slate-50[data-state=active]{--tw-text-opacity:1;color:rgb(248 250 252/var(--tw-text-opacity,1))}}`;
+
+// lib/hooks/use-styles.ts
+var useStyles = () => {
+  useEffect(() => {
+    const existingStyle = document.querySelector(
+      'style[data-styles="tscircuit-runframe"]'
+    );
+    if (existingStyle) return;
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-styles", "tscircuit-runframe");
+    styleElement.textContent = styles_generated_default;
+    document.head.appendChild(styleElement);
+  }, []);
+};
+
+// lib/components/CircuitJsonPreview.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var CircuitJsonPreview = ({
+  code,
+  onRunClicked = () => {
+  },
+  tsxRunTriggerCount,
+  errorMessage,
+  circuitJsonKey = "",
+  circuitJson,
+  showCodeTab = false,
+  codeTabContent,
+  showJsonTab = true,
+  showImportAndFormatButtons = true,
+  className,
+  headerClassName,
+  leftHeaderContent,
+  readOnly,
+  isStreaming,
+  onToggleFullScreen,
+  isFullScreen,
+  isRunningCode,
+  hasCodeChangedSinceLastRun,
+  onCodeChange,
+  onDtsChange,
+  manualEditsFileContent,
+  onManualEditsFileContentChange
+}) => {
+  useStyles();
+  const [activeTab, setActiveTab] = useState3(showCodeTab ? "code" : "pcb");
+  useEffect2(() => {
+    if (errorMessage) {
+      setActiveTab("error");
+    }
+  }, [errorMessage]);
+  useEffect2(() => {
+    if (activeTab === "code" && circuitJson && !errorMessage) {
+      setActiveTab("pcb");
+    }
+  }, [circuitJson]);
+  return /* @__PURE__ */ jsx13("div", { className: cn("flex flex-col relative", className), children: /* @__PURE__ */ jsx13("div", { className: "md:sticky md:top-2", children: /* @__PURE__ */ jsxs9(
+    Tabs,
+    {
+      value: activeTab,
+      onValueChange: setActiveTab,
+      className: "flex-grow flex flex-col p-2",
+      children: [
+        /* @__PURE__ */ jsxs9("div", { className: cn("flex items-center gap-2", headerClassName), children: [
+          leftHeaderContent,
+          leftHeaderContent && /* @__PURE__ */ jsx13("div", { className: "flex-grow" }),
+          !leftHeaderContent && /* @__PURE__ */ jsx13("div", { className: "flex-grow" }),
+          /* @__PURE__ */ jsxs9(TabsList, { children: [
+            showCodeTab && /* @__PURE__ */ jsx13(TabsTrigger, { value: "code", children: "Code" }),
+            /* @__PURE__ */ jsxs9(TabsTrigger, { value: "pcb", className: "whitespace-nowrap", children: [
+              circuitJson && /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                    !hasCodeChangedSinceLastRun ? "bg-blue-500" : "bg-gray-500"
+                  )
+                }
+              ),
+              "PCB"
+            ] }),
+            /* @__PURE__ */ jsxs9(TabsTrigger, { value: "schematic", className: "whitespace-nowrap", children: [
+              circuitJson && /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                    !hasCodeChangedSinceLastRun ? "bg-blue-500" : "bg-gray-500"
+                  )
+                }
+              ),
+              "Schematic"
+            ] }),
+            /* @__PURE__ */ jsxs9(TabsTrigger, { value: "cad", children: [
+              circuitJson && /* @__PURE__ */ jsx13(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                    !hasCodeChangedSinceLastRun ? "bg-blue-500" : "bg-gray-500"
+                  )
+                }
+              ),
+              "3D"
+            ] }),
+            /* @__PURE__ */ jsxs9(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx13(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9("div", { className: "whitespace-nowrap p-2 mr-1 cursor-pointer relative", children: [
+                /* @__PURE__ */ jsx13(EllipsisIcon, { className: "w-4 h-4" }),
+                errorMessage && /* @__PURE__ */ jsx13("span", { className: "inline-flex absolute top-[6px] right-[4px] items-center justify-center w-1 h-1 ml-2 text-[8px] font-bold text-white bg-red-500 rounded-full" })
+              ] }) }),
+              /* @__PURE__ */ jsxs9(DropdownMenuContent, { className: "*:text-xs", children: [
+                /* @__PURE__ */ jsxs9(
+                  DropdownMenuItem,
+                  {
+                    onSelect: () => setActiveTab("error"),
+                    className: "flex",
+                    children: [
+                      /* @__PURE__ */ jsx13(
+                        CheckIcon2,
+                        {
+                          className: cn(
+                            "w-3 h-3 mr-2",
+                            activeTab !== "error" && "invisible"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx13("div", { className: "flex-grow", children: "Errors" }),
+                      errorMessage && /* @__PURE__ */ jsx13("span", { className: "inline-flex items-center justify-center w-3 h-3 ml-2 text-[8px] font-bold text-white bg-red-500 rounded-full", children: "1" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs9(DropdownMenuItem, { onSelect: () => setActiveTab("bom"), children: [
+                  /* @__PURE__ */ jsx13(
+                    CheckIcon2,
+                    {
+                      className: cn(
+                        "w-3 h-3 mr-2",
+                        activeTab !== "bom" && "invisible"
+                      )
+                    }
+                  ),
+                  "Bill of Materials"
+                ] }),
+                /* @__PURE__ */ jsxs9(
+                  DropdownMenuItem,
+                  {
+                    onSelect: () => setActiveTab("circuitjson"),
+                    children: [
+                      /* @__PURE__ */ jsx13(
+                        CheckIcon2,
+                        {
+                          className: cn(
+                            "w-3 h-3 mr-2",
+                            activeTab !== "circuitjson" && "invisible"
+                          )
+                        }
+                      ),
+                      "JSON"
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          onToggleFullScreen && /* @__PURE__ */ jsx13(Button, { onClick: onToggleFullScreen, variant: "ghost", children: isFullScreen ? /* @__PURE__ */ jsx13(MinimizeIcon, { size: 16 }) : /* @__PURE__ */ jsx13(FullscreenIcon, { size: 16 }) })
+        ] }),
+        showCodeTab && /* @__PURE__ */ jsx13(TabsContent, { value: "code", className: "flex-grow overflow-hidden", children: /* @__PURE__ */ jsx13("div", { className: "h-full", children: codeTabContent }) }),
+        /* @__PURE__ */ jsx13(TabsContent, { value: "pcb", children: /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn(
+              "overflow-hidden",
+              isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx13(ErrorBoundary, { fallback: /* @__PURE__ */ jsx13("div", { children: "Error loading PCB viewer" }), children: circuitJson ? /* @__PURE__ */ jsx13(
+              PcbViewerWithContainerHeight,
+              {
+                soup: circuitJson,
+                containerClassName: cn(
+                  "h-full w-full",
+                  isFullScreen ? "min-h-[calc(100vh-240px)]" : "min-h-[620px]"
+                )
+              },
+              circuitJsonKey
+            ) : /* @__PURE__ */ jsx13(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx13(TabsContent, { value: "schematic", children: /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn(
+              "overflow-auto",
+              isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx13(ErrorBoundary, { fallback: /* @__PURE__ */ jsx13("div", { children: "Error loading Schematic" }), children: circuitJson ? /* @__PURE__ */ jsx13(
+              SchematicViewer,
+              {
+                circuitJson,
+                containerStyle: {
+                  height: "100%"
+                }
+              }
+            ) : /* @__PURE__ */ jsx13(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx13(TabsContent, { value: "cad", children: /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn(
+              "overflow-auto",
+              isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx13(ErrorBoundary, { FallbackComponent: ErrorFallback, children: circuitJson ? /* @__PURE__ */ jsx13(CadViewer, { soup: circuitJson }) : /* @__PURE__ */ jsx13(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx13(TabsContent, { value: "bom", children: /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn(
+              "overflow-auto",
+              isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx13(ErrorBoundary, { fallback: /* @__PURE__ */ jsx13("div", { children: "Error loading BOM" }), children: circuitJson ? /* @__PURE__ */ jsx13(BomTable, { circuitJson }) : /* @__PURE__ */ jsx13(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx13(TabsContent, { value: "circuitjson", children: /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn(
+              "overflow-auto",
+              isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx13(ErrorBoundary, { fallback: /* @__PURE__ */ jsx13("div", { children: "Error loading JSON viewer" }), children: circuitJson ? /* @__PURE__ */ jsx13(CircuitJsonTableViewer, { elements: circuitJson }) : /* @__PURE__ */ jsx13(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx13(TabsContent, { value: "error", children: circuitJson || errorMessage ? /* @__PURE__ */ jsx13(ErrorTabContent, { code, errorMessage }) : /* @__PURE__ */ jsx13(PreviewEmptyState_default, { onRunClicked }) })
+      ]
+    }
+  ) }) });
+};
+
+export {
+  CircuitJsonPreview
+};

package/dist/preview.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PreviewContentProps {
+    code?: string;
+    readOnly?: boolean;
+    onRunClicked?: () => void;
+    tsxRunTriggerCount?: number;
+    errorMessage?: string | null;
+    circuitJson: any;
+    circuitJsonKey?: string;
+    className?: string;
+    showCodeTab?: boolean;
+    codeTabContent?: React.ReactNode;
+    showJsonTab?: boolean;
+    showImportAndFormatButtons?: boolean;
+    headerClassName?: string;
+    leftHeaderContent?: React.ReactNode;
+    isRunningCode?: boolean;
+    isStreaming?: boolean;
+    onToggleFullScreen?: () => void;
+    isFullScreen?: boolean;
+    onCodeChange?: (code: string) => void;
+    onDtsChange?: (dts: string) => void;
+    manualEditsFileContent?: string;
+    hasCodeChangedSinceLastRun?: boolean;
+    onManualEditsFileContentChange?: (newmanualEditsFileContent: string) => void;
+}
+declare const CircuitJsonPreview: ({ code, onRunClicked, tsxRunTriggerCount, errorMessage, circuitJsonKey, circuitJson, showCodeTab, codeTabContent, showJsonTab, showImportAndFormatButtons, className, headerClassName, leftHeaderContent, readOnly, isStreaming, onToggleFullScreen, isFullScreen, isRunningCode, hasCodeChangedSinceLastRun, onCodeChange, onDtsChange, manualEditsFileContent, onManualEditsFileContentChange, }: PreviewContentProps) => react_jsx_runtime.JSX.Element;
+
+export { CircuitJsonPreview, type PreviewContentProps };

package/dist/preview.js

@@ -0,0 +1,6 @@
+import {
+  CircuitJsonPreview
+} from "./chunk-YW33LMDL.js";
+export {
+  CircuitJsonPreview
+};

package/dist/runner.d.ts

@@ -0,0 +1,36 @@
+export { CircuitJsonPreview, PreviewContentProps } from './preview.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Props {
+    /**
+     * Map of filenames to file contents that will be available in the worker
+     */
+    fsMap: {
+        [filename: string]: string;
+    };
+    /**
+     * The entry point file that will be executed first
+     */
+    entrypoint: string;
+    /**
+     * Called when the circuit JSON changes
+     */
+    onCircuitJsonChange?: (circuitJson: any) => void;
+    /**
+     * Called when rendering is finished
+     */
+    onRenderingFinished?: (params: {
+        circuitJson: any;
+    }) => void;
+    /**
+     * Called for each render event
+     */
+    onRenderEvent?: (event: any) => void;
+    /**
+     * Called when an error occurs
+     */
+    onError?: (error: Error) => void;
+}
+declare const RunFrame: (props: Props) => react_jsx_runtime.JSX.Element;
+
+export { RunFrame };

package/dist/runner.js

@@ -0,0 +1,40 @@
+import {
+  CircuitJsonPreview
+} from "./chunk-YW33LMDL.js";
+
+// lib/components/RunFrame.tsx
+import { createCircuitWebWorker } from "@tscircuit/eval-webworker";
+import { useEffect, useState } from "react";
+import evalWebWorkerBlobUrl from "@tscircuit/eval-webworker/blob-url";
+import { jsx } from "react/jsx-runtime";
+var RunFrame = (props) => {
+  const [circuitJson, setCircuitJson] = useState(null);
+  useEffect(() => {
+    async function runWorker() {
+      const worker = await createCircuitWebWorker({
+        webWorkerUrl: evalWebWorkerBlobUrl,
+        verbose: true
+      });
+      const $finished = worker.executeWithFsMap({
+        entrypoint: props.entrypoint,
+        fsMap: props.fsMap
+      });
+      console.log("waiting for execution to finish...");
+      await $finished;
+      console.log("waiting for initial circuit json...");
+      setCircuitJson(await worker.getCircuitJson());
+      console.log("got initial circuit json");
+      await $finished.catch((e) => {
+        console.error(e);
+      });
+      setCircuitJson(await worker.getCircuitJson());
+    }
+    runWorker();
+  }, [props.fsMap]);
+  console.log({ circuitJson });
+  return /* @__PURE__ */ jsx(CircuitJsonPreview, { circuitJson });
+};
+export {
+  CircuitJsonPreview,
+  RunFrame
+};

package/package.json

@@ -2,14 +2,15 @@
   "name": "@tscircuit/runframe",
   "main": "dist/index.js",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "scripts": {
     "start": "cosmos",
-    "build": "bun run build:lib",
-    "build:lib": "bun run build:css && bun run build:standalone",
+    "build": "bun run build:css && bun run build:standalone && bun run build:lib",
+    "build:lib": "tsup-node lib/preview.ts lib/runner.ts --platform browser --format esm --dts",
     "build:css": "bun run scripts/build-css.ts",
     "build:site": "cosmos-export",
     "build:standalone": "STANDALONE=1 vite build",
+    "analyze": "source-map-explorer 'dist/standalone.min.js'",
     "format:check": "biome format .",
     "format": "biome format --write .",
     "vercel-build": "bun run build:css && cosmos-export"
@@ -25,6 +26,8 @@
     "react": "18",
     "react-cosmos": "^6.2.1",
     "react-dom": "18",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "source-map-explorer": "^2.5.3",
     "tailwindcss": "^3.4.16",
     "tsup": "^8.3.5",
     "vite": "^6.0.3"

package/vite.config.ts

@@ -3,6 +3,7 @@ import react from "@vitejs/plugin-react"
 import { resolve } from "node:path"
 import winterspecBundle from "@tscircuit/file-server/dist/bundle"
 import { getNodeHandler } from "winterspec/adapters/node"
+import { visualizer } from "rollup-plugin-visualizer"
 
 const fakeHandler = getNodeHandler(winterspecBundle as any, {})
 
@@ -24,13 +25,21 @@ function apiServerPlugin(): Plugin {
 
 const plugins: any[] = [react()]
 
-if (!process.env.VERCEL) {
+if (!process.env.VERCEL && !process.env.STANDALONE) {
   plugins.push(apiServerPlugin())
 }
 
 let build: any = undefined
 
 if (process.env.STANDALONE) {
+  // plugins.push(
+  //   visualizer({
+  //     filename: "stats.html",
+  //     open: true, // Will open the stats.html file after build
+  //     gzipSize: true,
+  //     brotliSize: true,
+  //   }),
+  // )
   build = {
     lib: {
       entry: resolve(__dirname, "src/main.tsx"),
@@ -39,6 +48,7 @@ if (process.env.STANDALONE) {
       formats: ["umd"],
     },
     minify: true,
+    // reportCompressedSize: true,
   }
 }