@tscircuit/runframe 0.0.105 → 0.0.107

package/dist/chunk-WUXAA7XM.js

@@ -0,0 +1,1110 @@
+// 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));
+}
+var capitalizeFirstLetters = (str) => {
+  return str.replace(/_/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+};
+
+// 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(
+      "rf-inline-flex rf-h-9 rf-items-center rf-justify-center rf-rounded-lg rf-bg-zinc-100 rf-p-1 rf-text-zinc-500 dark:rf-bg-zinc-800 dark:rf-text-zinc-400",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "rf-inline-flex rf-items-center rf-justify-center rf-whitespace-nowrap rf-rounded-md rf-px-3 rf-py-1 rf-text-sm rf-font-medium rf-ring-offset-white rf-transition-all focus-visible:rf-outline-none focus-visible:rf-ring-2 focus-visible:rf-ring-zinc-950 focus-visible:rf-ring-offset-2 disabled:rf-pointer-events-none disabled:rf-opacity-50 data-[state=active]:rf-bg-white data-[state=active]:rf-text-zinc-950 data-[state=active]:rf-shadow dark:rf-ring-offset-zinc-950 dark:focus-visible:rf-ring-zinc-300 dark:data-[state=active]:rf-bg-zinc-950 dark:data-[state=active]:rf-text-zinc-50",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "rf-mt-2 rf-ring-offset-white focus-visible:rf-outline-none focus-visible:rf-ring-2 focus-visible:rf-ring-zinc-950 focus-visible:rf-ring-offset-2 dark:rf-ring-offset-zinc-950 dark:focus-visible:rf-ring-zinc-300",
+      className
+    ),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// lib/components/CircuitJsonPreview.tsx
+import { CadViewer } from "@tscircuit/3d-viewer";
+import "@tscircuit/pcb-viewer";
+import { useCallback, useEffect as useEffect2, useState as useState4 } 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: "rf-error-container rf-mt-4 rf-bg-red-50 rf-rounded-md rf-border rf-border-red-200",
+      children: /* @__PURE__ */ jsxs("div", { className: "rf-p-4", children: [
+        /* @__PURE__ */ jsx2("h2", { className: "rf-text-lg rf-font-semibold rf-text-red-800 rf-mb-3", children: "Error Loading 3D Viewer" }),
+        /* @__PURE__ */ jsx2("p", { className: "rf-text-xs rf-font-mono rf-whitespace-pre-wrap rf-text-red-700", children: error.message }),
+        /* @__PURE__ */ jsx2(
+          "details",
+          {
+            style: { whiteSpace: "pre-wrap" },
+            className: "rf-text-xs rf-font-mono rf-text-red-600 rf-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 { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "rf-inline-flex rf-items-center rf-justify-center rf-gap-2 rf-whitespace-nowrap rf-rounded-md rf-text-sm rf-font-medium rf-transition-colors focus-visible:rf-outline-none focus-visible:rf-ring-1 focus-visible:rf-ring-zinc-950 disabled:rf-pointer-events-none disabled:rf-opacity-50 [&_svg]:rf-pointer-events-none [&_svg]:rf-size-4 [&_svg]:rf-shrink-0 dark:focus-visible:rf-ring-zinc-300",
+  {
+    variants: {
+      variant: {
+        default: "rf-bg-zinc-900 rf-text-zinc-50 rf-shadow hover:rf-bg-zinc-900/90 dark:rf-bg-zinc-50 dark:rf-text-zinc-900 dark:hover:rf-bg-zinc-50/90",
+        destructive: "rf-bg-red-500 rf-text-zinc-50 rf-shadow-sm hover:rf-bg-red-500/90 dark:rf-bg-red-900 dark:rf-text-zinc-50 dark:hover:rf-bg-red-900/90",
+        outline: "rf-border rf-border-zinc-200 rf-bg-white rf-shadow-sm hover:rf-bg-zinc-100 hover:rf-text-zinc-900 dark:rf-border-zinc-800 dark:rf-bg-zinc-950 dark:hover:rf-bg-zinc-800 dark:hover:rf-text-zinc-50",
+        secondary: "rf-bg-zinc-100 rf-text-zinc-900 rf-shadow-sm hover:rf-bg-zinc-100/80 dark:rf-bg-zinc-800 dark:rf-text-zinc-50 dark:hover:rf-bg-zinc-800/80",
+        ghost: "hover:rf-bg-zinc-100 hover:rf-text-zinc-900 dark:hover:rf-bg-zinc-800 dark:hover:rf-text-zinc-50",
+        link: "rf-text-zinc-900 rf-underline-offset-4 hover:rf-underline dark:rf-text-zinc-50"
+      },
+      size: {
+        default: "rf-h-9 rf-px-4 rf-py-2",
+        sm: "rf-h-8 rf-rounded-md rf-px-3 rf-text-xs",
+        lg: "rf-h-10 rf-rounded-md rf-px-8",
+        icon: "rf-h-9 rf-w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React3.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "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: "rf-mt-4 rf-bg-green-50 rf-rounded-md rf-border rf-border-green-200", children: /* @__PURE__ */ jsxs2("div", { className: "rf-p-4", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "rf-text-lg rf-font-semibold rf-text-green-800 rf-mb-3", children: "No Errors \u{1F44C}" }),
+      /* @__PURE__ */ jsx4("p", { className: "rf-text-sm rf-text-green-700", children: "Your code is running without any errors." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("div", { className: "rf-mt-4 rf-bg-red-50 rf-rounded-md rf-border rf-border-red-200 rf-max-h-[500px] rf-overflow-y-auto", children: /* @__PURE__ */ jsxs2("div", { className: "rf-p-4", children: [
+      /* @__PURE__ */ jsx4("h3", { className: "rf-text-lg rf-font-semibold rf-text-red-800 rf-mb-3", children: "Error" }),
+      /* @__PURE__ */ jsx4("p", { className: "rf-text-xs rf-font-mono rf-whitespace-pre-wrap rf-text-red-600 rf-mt-2", children: errorMessage })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "rf-flex rf-gap-2 rf-mt-4 rf-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: "rf-w-4 rf-h-4 rf-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: "rf-w-4 rf-h-4 rf-mr-2" }),
+            "Report Issue"
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+
+// lib/components/CircuitJsonPreview.tsx
+import { SchematicViewer } from "@tscircuit/schematic-viewer";
+import { AssemblyViewer } from "@tscircuit/assembly-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: "rf-flex rf-items-center rf-gap-3 rf-bg-gray-100 rf-text-center rf-justify-center rf-py-10", children: [
+  "No circuit json loaded",
+  onRunClicked && /* @__PURE__ */ jsxs3(
+    Button,
+    {
+      className: "rf-bg-blue-600 rf-hover:bg-blue-500",
+      onClick: onRunClicked,
+      children: [
+        "Run Code",
+        /* @__PURE__ */ jsx5(PlayIcon, { className: "rf-w-3 rf-h-3 rf-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: "rf-cursor-pointer rf-underline rf-text-blue-600 rf-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: "rf-leading-5", children: [
+    /* @__PURE__ */ jsx7("div", { className: "rf-py-2 rf-font-bold", children: p.column.name }),
+    /* @__PURE__ */ jsx7("div", { children: p.field?.() ?? /* @__PURE__ */ jsx7(
+      "input",
+      {
+        type: "text",
+        className: "rf-border rf-rounded rf-p-1 rf-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: "rf-fixed rf-inset-0 rf-bg-black rf-bg-opacity-50 rf-flex rf-justify-center rf-items-center rf-z-50",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: "rf-bg-white rf-p-5 rf-rounded-lg rf-relative rf-w-11/12 rf-max-w-2xl",
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          children: [
+            /* @__PURE__ */ jsx8("h2", { className: "rf-mt-0 rf-text-md rf-pb-4", children: title }),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                className: "rf-absolute rf-top-2 rf-right-4 rf-text-2xl rf-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: "rf-flex rf-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: "rf-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: "rf-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: "rf-border rf-rounded rf-p-1 rf-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: "rf-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: "rf-font-mono rf-text-xs rf-bg-white", children: [
+    /* @__PURE__ */ jsx9("div", { className: "rf-overflow-x-auto", children: /* @__PURE__ */ jsxs6("table", { className: "rf-table-auto rf-w-full rf-text-left", children: [
+      /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { children: columns.map((col) => /* @__PURE__ */ jsx9("th", { className: "rf-px-4 rf-py-2 rf-border-b", children: col.renderHeaderCell ? col.renderHeaderCell(col) : col.name }, col.key)) }) }),
+      /* @__PURE__ */ jsx9("tbody", { children: elements4.map((row, rowIndex) => /* @__PURE__ */ jsx9("tr", { className: "rf-hover:bg-gray-100", children: columns.map((col) => /* @__PURE__ */ jsx9("td", { className: "rf-px-4 rf-py-2 rf-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: "rf-bg-gray-800 rf-p-3 rf-text-white rf-rounded", children: /* @__PURE__ */ jsx9("pre", { className: "rf-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: "rf-underline rf-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: "rf-overflow-x-auto", children: /* @__PURE__ */ jsxs7("table", { className: "rf-w-full rf-text-left rf-text-sm", children: [
+    /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsxs7("tr", { className: "rf-border-b", children: [
+      /* @__PURE__ */ jsx10("th", { className: "rf-p-2", children: "Name" }),
+      Array.from(supplierColumns).map((supplier) => /* @__PURE__ */ jsx10("th", { className: "rf-p-2 rf-capitalize", children: supplier }, supplier))
+    ] }) }),
+    /* @__PURE__ */ jsx10("tbody", { children: sourceComponents.map((comp) => /* @__PURE__ */ jsxs7("tr", { className: "rf-border-b", children: [
+      /* @__PURE__ */ jsx10("td", { className: "rf-p-2", children: comp.name }),
+      Array.from(supplierColumns).map((supplier) => /* @__PURE__ */ jsx10("td", { className: "rf-p-2", children: linkify(
+        supplier,
+        comp.supplier_part_numbers?.[supplier]?.[0] || ""
+      ) }, supplier))
+    ] }, comp.source_component_id)) })
+  ] }) });
+};
+
+// lib/components/CircuitJsonPreview.tsx
+import {
+  CheckIcon,
+  EllipsisIcon,
+  FullscreenIcon,
+  LoaderCircleIcon,
+  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 { Check, ChevronRight, Circle } from "lucide-react";
+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(
+      "rf-flex rf-cursor-default rf-gap-2 rf-select-none rf-items-center rf-rounded-sm rf-px-2 rf-py-1.5 rf-text-sm rf-outline-none focus:rf-bg-zinc-100 data-[state=open]:rf-bg-zinc-100 [&_svg]:rf-pointer-events-none [&_svg]:rf-size-4 [&_svg]:rf-shrink-0 dark:focus:rf-bg-zinc-800 dark:data-[state=open]:rf-bg-zinc-800",
+      inset && "rf-pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx11(ChevronRight, { className: "rf-ml-auto" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "rf-z-50 rf-min-w-[8rem] rf-overflow-hidden rf-rounded-md rf-border rf-border-zinc-200 rf-bg-white rf-p-1 rf-text-zinc-950 rf-shadow-lg data-[state=open]:rf-animate-in data-[state=closed]:rf-animate-out data-[state=closed]:rf-fade-out-0 data-[state=open]:rf-fade-in-0 data-[state=closed]:rf-zoom-out-95 data-[state=open]:rf-zoom-in-95 data-[side=bottom]:rf-slide-in-from-top-2 data-[side=left]:rf-slide-in-from-right-2 data-[side=right]:rf-slide-in-from-left-2 data-[side=top]:rf-slide-in-from-bottom-2 dark:rf-border-zinc-800 dark:rf-bg-zinc-950 dark:rf-text-zinc-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(
+      "rf-z-50 rf-min-w-[8rem] rf-overflow-hidden rf-rounded-md rf-border rf-border-zinc-200 rf-bg-white rf-p-1 rf-text-zinc-950 rf-shadow-md dark:rf-border-zinc-800 dark:rf-bg-zinc-950 dark:rf-text-zinc-50",
+      "data-[state=open]:rf-animate-in data-[state=closed]:rf-animate-out data-[state=closed]:rf-fade-out-0 data-[state=open]:rf-fade-in-0 data-[state=closed]:rf-zoom-out-95 data-[state=open]:rf-zoom-in-95 data-[side=bottom]:rf-slide-in-from-top-2 data-[side=left]:rf-slide-in-from-right-2 data-[side=right]:rf-slide-in-from-left-2 data-[side=top]:rf-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(
+      "rf-relative rf-flex rf-cursor-default rf-select-none rf-items-center rf-gap-2 rf-rounded-sm rf-px-2 rf-py-1.5 rf-text-sm rf-outline-none rf-transition-colors focus:rf-bg-zinc-100 focus:rf-text-zinc-900 data-[disabled]:rf-pointer-events-none data-[disabled]:rf-opacity-50 [&>svg]:rf-size-4 [&>svg]:rf-shrink-0 dark:focus:rf-bg-zinc-800 dark:focus:rf-text-zinc-50",
+      inset && "rf-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(
+      "rf-relative rf-flex rf-cursor-default rf-select-none rf-items-center rf-rounded-sm rf-py-1.5 rf-pl-8 rf-pr-2 rf-text-sm rf-outline-none rf-transition-colors focus:rf-bg-zinc-100 focus:rf-text-zinc-900 data-[disabled]:rf-pointer-events-none data-[disabled]:rf-opacity-50 dark:focus:rf-bg-zinc-800 dark:focus:rf-text-zinc-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "rf-absolute rf-left-2 rf-flex rf-h-3.5 rf-w-3.5 rf-items-center rf-justify-center", children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(Check, { className: "rf-h-4 rf-w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "rf-relative rf-flex rf-cursor-default rf-select-none rf-items-center rf-rounded-sm rf-py-1.5 rf-pl-8 rf-pr-2 rf-text-sm rf-outline-none rf-transition-colors focus:rf-bg-zinc-100 focus:rf-text-zinc-900 data-[disabled]:rf-pointer-events-none data-[disabled]:rf-opacity-50 dark:focus:rf-bg-zinc-800 dark:focus:rf-text-zinc-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx11("span", { className: "rf-absolute rf-left-2 rf-flex rf-h-3.5 rf-w-3.5 rf-items-center rf-justify-center", children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(Circle, { className: "rf-h-2 rf-w-2 rf-fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx11(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "rf-px-2 rf-py-1.5 rf-text-sm rf-font-semibold",
+      inset && "rf-pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn(
+      "rf--mx-1 rf-my-1 rf-h-px rf-bg-zinc-100 dark:rf-bg-zinc-800",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx11(
+    "span",
+    {
+      className: cn(
+        "rf-ml-auto rf-text-xs rf-tracking-widest rf-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 || "rf-w-full rf-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 = '*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:root{--radius:0.5rem}.rf-pointer-events-none{pointer-events:none}.rf-invisible{visibility:hidden}.rf-fixed{position:fixed}.rf-absolute{position:absolute}.rf-relative{position:relative}.rf-inset-0{inset:0}.rf-bottom-full{bottom:100%}.rf-left-1{left:.25rem}.rf-left-1\\/2{left:50%}.rf-left-2{left:.5rem}.rf-right-4{right:1rem}.rf-right-\\[4px\\]{right:4px}.rf-top-2{top:.5rem}.rf-top-\\[6px\\]{top:6px}.rf-z-50{z-index:50}.rf-z-\\[100\\]{z-index:100}.rf--mx-1{margin-left:-.25rem;margin-right:-.25rem}.rf-mx-2{margin-left:.5rem;margin-right:.5rem}.rf-my-1{margin-bottom:.25rem;margin-top:.25rem}.rf-mb-2{margin-bottom:.5rem}.rf-mb-3{margin-bottom:.75rem}.rf-mb-4{margin-bottom:1rem}.rf-ml-1{margin-left:.25rem}.rf-ml-1\\.5{margin-left:.375rem}.rf-ml-2{margin-left:.5rem}.rf-ml-auto{margin-left:auto}.rf-mr-1{margin-right:.25rem}.rf-mr-2{margin-right:.5rem}.rf-mt-0{margin-top:0}.rf-mt-2{margin-top:.5rem}.rf-mt-4{margin-top:1rem}.rf-flex{display:flex}.rf-inline-flex{display:inline-flex}.rf-size-4{height:1rem;width:1rem}.rf-h-1{height:.25rem}.rf-h-10{height:2.5rem}.rf-h-2{height:.5rem}.rf-h-3{height:.75rem}.rf-h-3\\.5{height:.875rem}.rf-h-4{height:1rem}.rf-h-60{height:15rem}.rf-h-8{height:2rem}.rf-h-9{height:2.25rem}.rf-h-\\[620px\\]{height:620px}.rf-h-\\[calc\\(100vh-96px\\)\\]{height:calc(100vh - 96px)}.rf-h-full{height:100%}.rf-h-px{height:1px}.rf-max-h-\\[500px\\]{max-height:500px}.rf-min-h-\\[620px\\]{min-height:620px}.rf-min-h-\\[calc\\(100vh-240px\\)\\]{min-height:calc(100vh - 240px)}.rf-w-1{width:.25rem}.rf-w-11{width:2.75rem}.rf-w-11\\/12{width:91.666667%}.rf-w-2{width:.5rem}.rf-w-3{width:.75rem}.rf-w-3\\.5{width:.875rem}.rf-w-4{width:1rem}.rf-w-9{width:2.25rem}.rf-w-96{width:24rem}.rf-w-full{width:100%}.rf-min-w-\\[8rem\\]{min-width:8rem}.rf-max-w-2xl{max-width:42rem}.rf-shrink-0{flex-shrink:0}.rf-flex-grow{flex-grow:1}.rf-table-auto{table-layout:auto}.rf--translate-x-1{--tw-translate-x:-0.25rem}.rf--translate-x-1,.rf--translate-x-1\\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rf--translate-x-1\\/2{--tw-translate-x:-50%}.rf-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes rf-spin{to{transform:rotate(1turn)}}.rf-animate-spin{animation:rf-spin 1s linear infinite}.rf-cursor-default{cursor:default}.rf-cursor-pointer{cursor:pointer}.rf-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.rf-flex-col{flex-direction:column}.rf-items-center{align-items:center}.rf-justify-end{justify-content:flex-end}.rf-justify-center{justify-content:center}.rf-justify-between{justify-content:space-between}.rf-gap-2{gap:.5rem}.rf-gap-3{gap:.75rem}.rf-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))}.rf-space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.rf-overflow-auto{overflow:auto}.rf-overflow-hidden{overflow:hidden}.rf-overflow-visible{overflow:visible}.rf-overflow-x-auto{overflow-x:auto}.rf-overflow-y-auto{overflow-y:auto}.rf-whitespace-nowrap{white-space:nowrap}.rf-whitespace-pre-wrap{white-space:pre-wrap}.rf-rounded{border-radius:.25rem}.rf-rounded-full{border-radius:9999px}.rf-rounded-lg{border-radius:var(--radius)}.rf-rounded-md{border-radius:calc(var(--radius) - 2px)}.rf-rounded-sm{border-radius:calc(var(--radius) - 4px)}.rf-border{border-width:1px}.rf-border-b{border-bottom-width:1px}.rf-border-green-200{--tw-border-opacity:1;border-color:rgb(187 247 208/var(--tw-border-opacity,1))}.rf-border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.rf-border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.rf-border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.rf-bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.rf-bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.rf-bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.rf-bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.rf-bg-gray-500{--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}.rf-bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.rf-bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.rf-bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.rf-bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.rf-bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.rf-bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.rf-bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.rf-bg-orange-400{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity,1))}.rf-bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.rf-bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.rf-bg-red-900{--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.rf-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.rf-bg-zinc-100{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.rf-bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.rf-bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.rf-bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.rf-bg-opacity-50{--tw-bg-opacity:0.5}.rf-fill-current{fill:currentColor}.rf-p-0{padding:0}.rf-p-0\\.5{padding:.125rem}.rf-p-1{padding:.25rem}.rf-p-2{padding:.5rem}.rf-p-3{padding:.75rem}.rf-p-4{padding:1rem}.rf-p-5{padding:1.25rem}.rf-p-6{padding:1.5rem}.rf-px-1{padding-left:.25rem;padding-right:.25rem}.rf-px-1\\.5{padding-left:.375rem;padding-right:.375rem}.rf-px-2{padding-left:.5rem;padding-right:.5rem}.rf-px-3{padding-left:.75rem;padding-right:.75rem}.rf-px-4{padding-left:1rem;padding-right:1rem}.rf-px-8{padding-left:2rem;padding-right:2rem}.rf-py-1{padding-bottom:.25rem;padding-top:.25rem}.rf-py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.rf-py-10{padding-bottom:2.5rem;padding-top:2.5rem}.rf-py-2{padding-bottom:.5rem;padding-top:.5rem}.rf-pb-4{padding-bottom:1rem}.rf-pl-8{padding-left:2rem}.rf-pr-2{padding-right:.5rem}.rf-text-left{text-align:left}.rf-text-center{text-align:center}.rf-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.rf-text-2xl{font-size:1.5rem;line-height:2rem}.rf-text-\\[8px\\]{font-size:8px}.rf-text-lg{font-size:1.125rem;line-height:1.75rem}.rf-text-sm{font-size:.875rem;line-height:1.25rem}.rf-text-xs{font-size:.75rem;line-height:1rem}.rf-font-bold{font-weight:700}.rf-font-medium{font-weight:500}.rf-font-semibold{font-weight:600}.rf-capitalize{text-transform:capitalize}.rf-tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.rf-leading-5{line-height:1.25rem}.rf-tracking-widest{letter-spacing:.1em}.rf-text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.rf-text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.rf-text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.rf-text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.rf-text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.rf-text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.rf-text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.rf-text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.rf-text-neutral-50{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.rf-text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.rf-text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity,1))}.rf-text-neutral-950{--tw-text-opacity:1;color:rgb(10 10 10/var(--tw-text-opacity,1))}.rf-text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.rf-text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.rf-text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.rf-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.rf-text-zinc-50{--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.rf-text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.rf-text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.rf-text-zinc-950{--tw-text-opacity:1;color:rgb(9 9 11/var(--tw-text-opacity,1))}.rf-underline{text-decoration-line:underline}.rf-underline-offset-4{text-underline-offset:4px}.rf-opacity-0{opacity:0}.rf-opacity-50{opacity:.5}.rf-opacity-60{opacity:.6}.rf-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)}.rf-shadow,.rf-shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.rf-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)}.rf-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)}.rf-shadow-md,.rf-shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.rf-shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.rf-outline-none{outline:2px solid transparent;outline-offset:2px}.rf-ring-offset-white{--tw-ring-offset-color:#fff}.rf-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.rf-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)}.rf-transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.hover\\:rf-bg-red-500\\/90:hover{background-color:rgba(239,68,68,.9)}.hover\\:rf-bg-zinc-100:hover{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.hover\\:rf-bg-zinc-100\\/80:hover{background-color:hsla(240,5%,96%,.8)}.hover\\:rf-bg-zinc-900\\/90:hover{background-color:rgba(24,24,27,.9)}.hover\\:rf-text-zinc-900:hover{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.hover\\:rf-underline:hover{text-decoration-line:underline}.focus\\:rf-bg-zinc-100:focus{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.focus\\:rf-text-zinc-900:focus{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.focus-visible\\:rf-outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:rf-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\\:rf-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\\:rf-ring-zinc-950:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(9 9 11/var(--tw-ring-opacity,1))}.focus-visible\\:rf-ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\\:rf-pointer-events-none:disabled{pointer-events:none}.disabled\\:rf-opacity-50:disabled{opacity:.5}.data-\\[disabled\\]\\:rf-pointer-events-none[data-disabled]{pointer-events:none}.data-\\[state\\=active\\]\\:rf-bg-white[data-state=active]{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.data-\\[state\\=open\\]\\:rf-bg-zinc-100[data-state=open]{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.data-\\[state\\=active\\]\\:rf-text-zinc-950[data-state=active]{--tw-text-opacity:1;color:rgb(9 9 11/var(--tw-text-opacity,1))}.data-\\[disabled\\]\\:rf-opacity-50[data-disabled]{opacity:.5}.data-\\[state\\=active\\]\\:rf-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)}.data-\\[state\\=open\\]\\:rf-animate-in[data-state=open]{animation-duration:.15s;animation-name:enter;--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial}.data-\\[state\\=closed\\]\\:rf-animate-out[data-state=closed]{animation-duration:.15s;animation-name:exit;--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial}.data-\\[state\\=closed\\]\\:rf-fade-out-0[data-state=closed]{--tw-exit-opacity:0}.data-\\[state\\=open\\]\\:rf-fade-in-0[data-state=open]{--tw-enter-opacity:0}.data-\\[state\\=closed\\]\\:rf-zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.data-\\[state\\=open\\]\\:rf-zoom-in-95[data-state=open]{--tw-enter-scale:.95}.data-\\[side\\=bottom\\]\\:rf-slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:-0.5rem}.data-\\[side\\=left\\]\\:rf-slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:0.5rem}.data-\\[side\\=right\\]\\:rf-slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:-0.5rem}.data-\\[side\\=top\\]\\:rf-slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:0.5rem}.dark\\:rf-border-zinc-800:is(.rf-dark *){--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.dark\\:rf-bg-red-900:is(.rf-dark *){--tw-bg-opacity:1;background-color:rgb(127 29 29/var(--tw-bg-opacity,1))}.dark\\:rf-bg-zinc-50:is(.rf-dark *){--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.dark\\:rf-bg-zinc-800:is(.rf-dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\\:rf-bg-zinc-950:is(.rf-dark *){--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.dark\\:rf-text-zinc-400:is(.rf-dark *){--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.dark\\:rf-text-zinc-50:is(.rf-dark *){--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.dark\\:rf-text-zinc-900:is(.rf-dark *){--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.dark\\:rf-ring-offset-zinc-950:is(.rf-dark *){--tw-ring-offset-color:#09090b}.dark\\:hover\\:rf-bg-red-900\\/90:hover:is(.rf-dark *){background-color:rgba(127,29,29,.9)}.dark\\:hover\\:rf-bg-zinc-50\\/90:hover:is(.rf-dark *){background-color:hsla(0,0%,98%,.9)}.dark\\:hover\\:rf-bg-zinc-800:hover:is(.rf-dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\\:hover\\:rf-bg-zinc-800\\/80:hover:is(.rf-dark *){background-color:rgba(39,39,42,.8)}.dark\\:hover\\:rf-text-zinc-50:hover:is(.rf-dark *){--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.dark\\:focus\\:rf-bg-zinc-800:focus:is(.rf-dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\\:focus\\:rf-text-zinc-50:focus:is(.rf-dark *){--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.dark\\:focus-visible\\:rf-ring-zinc-300:focus-visible:is(.rf-dark *){--tw-ring-opacity:1;--tw-ring-color:rgb(212 212 216/var(--tw-ring-opacity,1))}.dark\\:data-\\[state\\=active\\]\\:rf-bg-zinc-950[data-state=active]:is(.rf-dark *){--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.dark\\:data-\\[state\\=open\\]\\:rf-bg-zinc-800[data-state=open]:is(.rf-dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\\:data-\\[state\\=active\\]\\:rf-text-zinc-50[data-state=active]:is(.rf-dark *){--tw-text-opacity:1;color:rgb(250 250 250/var(--tw-text-opacity,1))}.\\[\\&\\>svg\\]\\:rf-size-4>svg{height:1rem;width:1rem}.\\[\\&\\>svg\\]\\:rf-shrink-0>svg{flex-shrink:0}.\\[\\&_svg\\]\\:rf-pointer-events-none svg{pointer-events:none}.\\[\\&_svg\\]\\:rf-size-4 svg{height:1rem;width:1rem}.\\[\\&_svg\\]\\:rf-shrink-0 svg{flex-shrink:0}';
+
+// 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/RenderLogViewer/RenderLogViewer.tsx
+import { orderedRenderPhases as orderedRenderPhases2 } from "@tscircuit/core";
+import { useState as useState3 } from "react";
+
+// lib/components/RenderLogViewer/RenderTimingsBar.tsx
+import { orderedRenderPhases } from "@tscircuit/core";
+import "react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var RenderTimingsBar = ({
+  phaseTimings
+}) => {
+  if (!phaseTimings) return null;
+  const getPhaseColor = (index) => {
+    const hue = index * 137.5 % 360;
+    return `hsl(${hue}, 70%, 50%)`;
+  };
+  const totalTime = Object.values(phaseTimings).reduce(
+    (sum, time) => sum + time,
+    0
+  );
+  return /* @__PURE__ */ jsxs9("div", { className: "rf-space-y-2 rf-w-full rf-px-4", children: [
+    /* @__PURE__ */ jsx13("div", { className: "rf-relative rf-h-8 rf-flex rf-rounded-sm", children: orderedRenderPhases.map((phase, index) => {
+      const time = phaseTimings[phase] || 0;
+      const width = time / totalTime * 100;
+      return /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: "rf-group rf-relative rf-overflow-visible",
+          style: {
+            width: `${width}%`,
+            backgroundColor: getPhaseColor(index)
+          },
+          children: /* @__PURE__ */ jsxs9("div", { className: "rf-opacity-0 rf-group-hover:opacity-100 rf-transition-opacity rf-absolute rf-bottom-full rf-left-1/2 rf-transform rf--translate-x-1/2 rf-mb-2 rf-px-2 rf-py-1 rf-text-xs rf-whitespace-nowrap rf-rounded rf-bg-gray-900 rf-text-white rf-pointer-events-none", children: [
+            phase,
+            ": ",
+            time,
+            "ms"
+          ] })
+        },
+        phase
+      );
+    }) }),
+    /* @__PURE__ */ jsxs9("div", { className: "rf-text-xs rf-text-gray-500", children: [
+      "Total: ",
+      totalTime.toFixed(2),
+      "ms"
+    ] })
+  ] });
+};
+var RenderTimingsBar_default = RenderTimingsBar;
+
+// lib/components/RenderLogViewer/RenderLogViewer.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var RenderLogViewer = ({
+  renderLog
+}) => {
+  const [sortOption, setSortOption] = useState3(
+    "chronological"
+  );
+  if (!renderLog)
+    return /* @__PURE__ */ jsx14("div", { className: "rf-p-4 rf-bg-gray-100 rf-rounded-md", children: "No render log, make sure this tab is open when you render (TODO add a rerender button here)" });
+  const orderedPhaseTimings = Object.entries(renderLog?.phaseTimings ?? {});
+  if (sortOption === "chronological") {
+    orderedPhaseTimings.sort(
+      (a, b) => orderedRenderPhases2.indexOf(a[0]) - orderedRenderPhases2.indexOf(b[0])
+    );
+  } else {
+    orderedPhaseTimings.sort((a, b) => b[1] - a[1]);
+  }
+  return /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsxs10("div", { className: "rf-flex rf-justify-between rf-items-center", children: [
+      /* @__PURE__ */ jsx14("div", { children: "Render Logs" }),
+      /* @__PURE__ */ jsxs10("div", { className: "rf-mb-4 rf-pr-2 rf-flex rf-text-xs rf-items-center", children: [
+        /* @__PURE__ */ jsx14("div", { className: "rf-mr-2", children: "Sort by:" }),
+        /* @__PURE__ */ jsxs10(
+          "select",
+          {
+            value: sortOption,
+            onChange: (e) => setSortOption(e.target.value),
+            className: "rf-px-2 rf-py-1 rf-border rf-rounded rf-text-xs",
+            children: [
+              /* @__PURE__ */ jsx14("option", { value: "chronological", children: "Phase Order" }),
+              /* @__PURE__ */ jsx14("option", { value: "longest", children: "Duration" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14(RenderTimingsBar_default, { phaseTimings: renderLog.phaseTimings }),
+    /* @__PURE__ */ jsxs10("table", { className: "rf-w-full rf-text-xs", children: [
+      /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+        /* @__PURE__ */ jsx14("th", { className: "rf-text-left rf-p-2", children: "Phase Order" }),
+        /* @__PURE__ */ jsx14("th", { className: "rf-text-left rf-p-2", children: "Phase" }),
+        /* @__PURE__ */ jsx14("th", { className: "rf-text-left rf-p-2", children: "Duration (ms)" })
+      ] }) }),
+      /* @__PURE__ */ jsx14("tbody", { children: orderedPhaseTimings.map(([phase, duration]) => /* @__PURE__ */ jsxs10("tr", { children: [
+        /* @__PURE__ */ jsx14("td", { className: "rf-p-2", children: orderedRenderPhases2.indexOf(phase) }),
+        /* @__PURE__ */ jsx14("td", { className: "rf-p-2", children: phase }),
+        /* @__PURE__ */ jsx14("td", { className: "rf-p-2", children: duration })
+      ] }, phase)) })
+    ] })
+  ] });
+};
+
+// lib/components/CircuitJsonPreview.tsx
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var dropdownMenuItems = [
+  "assembly",
+  "bom",
+  "circuit_json",
+  "errors",
+  "render_log"
+];
+var CircuitJsonPreview = ({
+  code,
+  onRunClicked = void 0,
+  tsxRunTriggerCount,
+  errorMessage,
+  circuitJsonKey = "",
+  circuitJson,
+  showCodeTab = false,
+  codeTabContent,
+  showJsonTab = true,
+  showRenderLogTab = true,
+  onActiveTabChange,
+  renderLog,
+  showImportAndFormatButtons = true,
+  className,
+  headerClassName,
+  leftHeaderContent,
+  readOnly,
+  isStreaming,
+  onToggleFullScreen,
+  isFullScreen,
+  isRunningCode,
+  hasCodeChangedSinceLastRun,
+  onEditEvent,
+  editEvents,
+  defaultActiveTab
+}) => {
+  useStyles();
+  const [activeTab, setActiveTabState] = useState4(defaultActiveTab ?? "pcb");
+  const setActiveTab = useCallback(
+    (tab) => {
+      setActiveTabState(tab);
+      onActiveTabChange?.(tab);
+    },
+    [onActiveTabChange]
+  );
+  useEffect2(() => {
+    if (errorMessage) {
+      setActiveTab("errors");
+    }
+  }, [errorMessage]);
+  useEffect2(() => {
+    if (activeTab === "code" && circuitJson && !errorMessage) {
+      setActiveTab("pcb");
+    }
+  }, [circuitJson]);
+  return /* @__PURE__ */ jsx15("div", { className: cn("flex flex-col relative", className), children: /* @__PURE__ */ jsx15("div", { className: "rf-md:sticky rf-md:top-2", children: /* @__PURE__ */ jsxs11(
+    Tabs,
+    {
+      value: activeTab,
+      onValueChange: setActiveTab,
+      className: "rf-flex-grow rf-flex rf-flex-col rf-p-2",
+      children: [
+        /* @__PURE__ */ jsxs11(
+          "div",
+          {
+            className: cn("rf-flex rf-items-center rf-gap-2", headerClassName),
+            children: [
+              leftHeaderContent,
+              leftHeaderContent && /* @__PURE__ */ jsx15("div", { className: "rf-flex-grow" }),
+              !leftHeaderContent && /* @__PURE__ */ jsx15("div", { className: "rf-flex-grow" }),
+              renderLog && renderLog.progress !== 1 && /* @__PURE__ */ jsxs11("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
+                renderLog.lastRenderEvent && /* @__PURE__ */ jsx15("div", { className: "rf-text-xs rf-text-gray-500", children: renderLog.lastRenderEvent?.type.split("renderable:renderLifecycle:")[1].split(":")[0] }),
+                /* @__PURE__ */ jsx15("div", { className: "rf-w-4 rf-h-4 rf-bg-blue-500 rf-opacity-50 rf-rounded-full rf-text-white", children: /* @__PURE__ */ jsx15(LoaderCircleIcon, { className: "rf-w-4 rf-h-4 rf-animate-spin" }) }),
+                /* @__PURE__ */ jsxs11("div", { className: "rf-text-xs rf-font-bold rf-text-gray-700 rf-tabular-nums", children: [
+                  ((renderLog.progress ?? 0) * 100).toFixed(1),
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs11(TabsList, { children: [
+                showCodeTab && /* @__PURE__ */ jsx15(TabsTrigger, { value: "code", children: "Code" }),
+                /* @__PURE__ */ jsxs11(TabsTrigger, { value: "pcb", className: "rf-whitespace-nowrap", children: [
+                  circuitJson && /* @__PURE__ */ jsx15(
+                    "span",
+                    {
+                      className: cn(
+                        "rf-inline-flex rf-items-center rf-justify-center rf-w-2 rf-h-2 rf-mr-1 rf-text-xs rf-font-bold rf-text-white rf-rounded-full",
+                        !hasCodeChangedSinceLastRun ? "rf-bg-blue-500" : "rf-bg-gray-500"
+                      )
+                    }
+                  ),
+                  "PCB"
+                ] }),
+                /* @__PURE__ */ jsxs11(TabsTrigger, { value: "schematic", className: "rf-whitespace-nowrap", children: [
+                  circuitJson && /* @__PURE__ */ jsx15(
+                    "span",
+                    {
+                      className: cn(
+                        "rf-inline-flex rf-items-center rf-justify-center rf-w-2 rf-h-2 rf-mr-1 rf-text-xs rf-font-bold rf-text-white rf-rounded-full",
+                        !hasCodeChangedSinceLastRun ? "rf-bg-blue-500" : "rf-bg-gray-500"
+                      )
+                    }
+                  ),
+                  "Schematic"
+                ] }),
+                /* @__PURE__ */ jsxs11(TabsTrigger, { value: "cad", children: [
+                  circuitJson && /* @__PURE__ */ jsx15(
+                    "span",
+                    {
+                      className: cn(
+                        "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
+                        !hasCodeChangedSinceLastRun ? "rf-bg-blue-500" : "rf-bg-gray-500"
+                      )
+                    }
+                  ),
+                  "3D"
+                ] }),
+                !["pcb", "cad", "schematic"].includes(activeTab) && /* @__PURE__ */ jsx15(TabsTrigger, { value: activeTab, children: capitalizeFirstLetters(activeTab) }),
+                /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
+                  /* @__PURE__ */ jsx15(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11("div", { className: "rf-whitespace-nowrap rf-p-2 rf-mr-1 rf-cursor-pointer rf-relative", children: [
+                    /* @__PURE__ */ jsx15(EllipsisIcon, { className: "rf-w-4 rf-h-4" }),
+                    errorMessage && /* @__PURE__ */ jsx15("span", { className: "rf-inline-flex rf-absolute rf-top-[6px] rf-right-[4px] rf-items-center rf-justify-center rf-w-1 rf-h-1 rf-ml-2 rf-text-[8px] rf-font-bold rf-text-white rf-bg-red-500 rf-rounded-full" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx15(DropdownMenuContent, { className: "rf-*:text-xs", children: dropdownMenuItems.map((item) => /* @__PURE__ */ jsxs11(
+                    DropdownMenuItem,
+                    {
+                      onSelect: () => setActiveTab(item),
+                      children: [
+                        /* @__PURE__ */ jsx15(
+                          CheckIcon,
+                          {
+                            className: cn(
+                              "rf-w-3 rf-h-3 rf-mr-2",
+                              activeTab !== item && "rf-invisible"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx15("div", { className: "rf-pr-2", children: capitalizeFirstLetters(item) }),
+                        item === "errors" && errorMessage && /* @__PURE__ */ jsx15("span", { className: "rf-inline-flex rf-items-center rf-justify-center rf-w-3 rf-h-3 rf-ml-2 rf-text-[8px] rf-font-bold rf-text-white rf-bg-red-500 rf-rounded-full", children: "1" })
+                      ]
+                    },
+                    item
+                  )) })
+                ] })
+              ] }),
+              onToggleFullScreen && /* @__PURE__ */ jsx15(Button, { onClick: onToggleFullScreen, variant: "ghost", children: isFullScreen ? /* @__PURE__ */ jsx15(MinimizeIcon, { size: 16 }) : /* @__PURE__ */ jsx15(FullscreenIcon, { size: 16 }) })
+            ]
+          }
+        ),
+        showCodeTab && /* @__PURE__ */ jsx15(
+          TabsContent,
+          {
+            value: "code",
+            className: "rf-flex-grow rf-overflow-hidden",
+            children: /* @__PURE__ */ jsx15("div", { className: "rf-h-full", children: codeTabContent })
+          }
+        ),
+        /* @__PURE__ */ jsx15(TabsContent, { value: "pcb", children: /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: cn(
+              "rf-overflow-hidden",
+              isFullScreen ? "rf-h-[calc(100vh-96px)]" : "rf-h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx15(ErrorBoundary, { fallback: /* @__PURE__ */ jsx15("div", { children: "Error loading PCB viewer" }), children: circuitJson ? /* @__PURE__ */ jsx15(
+              PcbViewerWithContainerHeight,
+              {
+                soup: circuitJson,
+                containerClassName: cn(
+                  "rf-h-full rf-w-full",
+                  isFullScreen ? "rf-min-h-[calc(100vh-240px)]" : "rf-min-h-[620px]"
+                )
+              },
+              circuitJsonKey
+            ) : /* @__PURE__ */ jsx15(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx15(TabsContent, { value: "assembly", children: /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: cn(
+              "rf-overflow-auto",
+              isFullScreen ? "rf-h-[calc(100vh-96px)]" : "rf-h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx15(ErrorBoundary, { fallback: /* @__PURE__ */ jsx15("div", { children: "Error loading Assembly" }), children: circuitJson ? /* @__PURE__ */ jsx15(
+              AssemblyViewer,
+              {
+                circuitJson,
+                containerStyle: {
+                  height: "100%"
+                },
+                editingEnabled: true,
+                debugGrid: true
+              }
+            ) : /* @__PURE__ */ jsx15(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx15(TabsContent, { value: "schematic", children: /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: cn(
+              "rf-overflow-auto",
+              isFullScreen ? "rf-h-[calc(100vh-96px)]" : "rf-h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx15(ErrorBoundary, { fallback: /* @__PURE__ */ jsx15("div", { children: "Error loading Schematic" }), children: circuitJson ? /* @__PURE__ */ jsx15(
+              SchematicViewer,
+              {
+                circuitJson,
+                containerStyle: {
+                  height: "100%"
+                },
+                editingEnabled: true,
+                onEditEvent: (ee) => onEditEvent?.(ee),
+                editEvents,
+                debugGrid: true
+              }
+            ) : /* @__PURE__ */ jsx15(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx15(TabsContent, { value: "cad", children: /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: cn(
+              "rf-overflow-auto",
+              isFullScreen ? "rf-h-[calc(100vh-96px)]" : "rf-h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx15(ErrorBoundary, { FallbackComponent: ErrorFallback, children: circuitJson ? /* @__PURE__ */ jsx15(CadViewer, { soup: circuitJson }) : /* @__PURE__ */ jsx15(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx15(TabsContent, { value: "bom", children: /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: cn(
+              "rf-overflow-auto",
+              isFullScreen ? "rf-h-[calc(100vh-96px)]" : "rf-h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx15(ErrorBoundary, { fallback: /* @__PURE__ */ jsx15("div", { children: "Error loading BOM" }), children: circuitJson ? /* @__PURE__ */ jsx15(BomTable, { circuitJson }) : /* @__PURE__ */ jsx15(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx15(TabsContent, { value: "circuit_json", children: /* @__PURE__ */ jsx15(
+          "div",
+          {
+            className: cn(
+              "rf-overflow-auto",
+              isFullScreen ? "rf-h-[calc(100vh-96px)]" : "rf-h-[620px]"
+            ),
+            children: /* @__PURE__ */ jsx15(ErrorBoundary, { fallback: /* @__PURE__ */ jsx15("div", { children: "Error loading JSON viewer" }), children: circuitJson ? /* @__PURE__ */ jsx15(CircuitJsonTableViewer, { elements: circuitJson }) : /* @__PURE__ */ jsx15(PreviewEmptyState_default, { onRunClicked }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx15(TabsContent, { value: "errors", children: circuitJson || errorMessage ? /* @__PURE__ */ jsx15(ErrorTabContent, { code, errorMessage }) : /* @__PURE__ */ jsx15(PreviewEmptyState_default, { onRunClicked }) }),
+        showRenderLogTab && /* @__PURE__ */ jsx15(TabsContent, { value: "render_log", children: /* @__PURE__ */ jsx15(RenderLogViewer, { renderLog }) })
+      ]
+    }
+  ) }) });
+};
+
+export {
+  CircuitJsonPreview
+};