@tscircuit/runframe 0.0.310 → 0.0.312

package/dist/runner.js

@@ -20,7 +20,7 @@ import {
   buttonVariants,
   cn,
   linkify
-} from "./chunk-MVZMUL3H.js";
+} from "./chunk-U2ZLCEUS.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -770,7 +770,7 @@ function useLocalStorageState(key, initialValue) {
 }
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { useEffect as useEffect7, useMemo as useMemo3, useState as useState9 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo3, useState as useState10 } from "react";
 
 // lib/components/RunFrameForCli/SelectSnippetDialog.tsx
 import { useState as useState4 } from "react";
@@ -1469,11 +1469,11 @@ var importComponentFromJlcpcb = async (jlcpcbPartNumber) => {
 };
 
 // lib/components/OrderDialog/useOrderDialog.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // lib/components/OrderDialog/OrderDialog.tsx
 import ky3 from "ky";
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 
 // lib/components/OrderDialog/CheckoutOrder.tsx
@@ -1718,31 +1718,227 @@ var CheckoutOrder = ({
   ] });
 };
 
-// lib/components/OrderDialog/InitialOrder.tsx
+// lib/components/ui/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check as Check2, ChevronDown, ChevronUp } from "lucide-react";
+import * as React5 from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var Select = SelectPrimitive.Root;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "rf-flex rf-h-10 rf-w-full rf-items-center rf-justify-between rf-rounded-md rf-border rf-border-input rf-bg-background rf-px-3 rf-py-2 rf-text-sm rf-ring-offset-background rf-placeholder:text-muted-foreground focus:rf-outline-none focus:rf-ring-2 focus:rf-ring-ring focus:rf-ring-offset-2 disabled:rf-cursor-not-allowed disabled:rf-opacity-50 [&>span]:rf-line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx9(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx9(ChevronDown, { className: "rf-h-4 rf-w-4 rf-opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "rf-flex rf-cursor-default rf-items-center rf-justify-center rf-py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx9(ChevronUp, { className: "rf-h-4 rf-w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "rf-flex rf-cursor-default rf-items-center rf-justify-center rf-py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx9(ChevronDown, { className: "rf-h-4 rf-w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React5.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx9(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs7(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "rf-relative rf-z-[100] rf-max-h-96 rf-min-w-[8rem] rf-overflow-hidden rf-rounded-md rf-border rf-bg-white rf-text-black rf-shadow-md 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",
+      position === "popper" && "data-[side=bottom]:rf-translate-y-1 data-[side=left]:-rf-translate-x-1 data-[side=right]:rf-translate-x-1 data-[side=top]:-rf-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx9(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx9(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "rf-p-1",
+            position === "popper" && "rf-h-[var(--radix-select-trigger-height)] rf-w-full rf-min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx9(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "rf-py-1.5 rf-pl-8 rf-pr-2 rf-text-sm rf-font-semibold",
+      className
+    ),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "rf-relative rf-flex rf-w-full 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-text-gray-800 rf-outline-none focus:rf-bg-gray-100 focus:rf-text-gray-900 data-[disabled]:rf-pointer-events-none data-[disabled]:rf-opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx9("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__ */ jsx9(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(Check2, { className: "rf-h-4 rf-w-4" }) }) }),
+      /* @__PURE__ */ jsx9(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-rf-mx-1 rf-my-1 rf-h-px rf-bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// lib/components/ui/skeleton.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn("rf-animate-pulse rf-rounded-md rf-bg-muted", className),
+      ...props
+    }
+  );
+}
+
+// lib/components/OrderDialog/InitialOrder.tsx
+import { ArrowDown } from "lucide-react";
+import { useEffect as useEffect7 } from "react";
+import { useState as useState7 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var InitialOrderScreen = ({
   onCancel,
   onContinue
 }) => {
-  return /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-flex-col rf-bg-white rf-rounded-xl rf-p-8 rf-max-w-md rf-w-full rf-mx-auto", children: [
-    /* @__PURE__ */ jsx9("h2", { className: "rf-text-3xl rf-font-bold rf-text-center rf-mb-8", children: "Order" }),
-    /* @__PURE__ */ jsx9("p", { className: "rf-text-lg rf-text-center rf-mb-12", children: "Want to place an order?" }),
-    /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-justify-between rf-mt-auto", children: [
-      /* @__PURE__ */ jsx9(
+  const productCategories = [
+    { id: "prototype", name: "Prototype" },
+    { id: "development", name: "Development board" }
+  ];
+  const [isLoading, setIsLoading] = useState7(false);
+  const [estimatedCost, setEstimatedCost] = useState7(null);
+  const [selectedCategory, setSelectedCategory] = useState7("prototype");
+  useEffect7(() => {
+    handleGetEstimate();
+  }, []);
+  const handleSelectCategory = (category) => {
+    setSelectedCategory(category);
+    setEstimatedCost(null);
+    setTimeout(() => {
+      handleGetEstimate();
+    }, 0);
+  };
+  const handleGetEstimate = () => {
+    if (!selectedCategory) return;
+    setIsLoading(true);
+    setEstimatedCost(null);
+    setTimeout(() => {
+      const cost = Math.floor(Math.random() * 150) + 50;
+      setEstimatedCost(cost);
+      setIsLoading(false);
+    }, 1500);
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-flex-col rf-bg-white rf-rounded-xl rf-p-8 rf-max-w-md rf-w-full rf-mx-auto", children: [
+    /* @__PURE__ */ jsx11("h2", { className: "rf-text-3xl rf-font-bold rf-text-center rf-mb-8", children: "Order PCB" }),
+    /* @__PURE__ */ jsxs8("div", { className: "rf-mb-8", children: [
+      /* @__PURE__ */ jsx11(
+        "label",
+        {
+          htmlFor: "category",
+          className: "rf-block rf-text-sm rf-font-medium rf-text-gray-700 rf-mb-2",
+          children: "Select Product Category"
+        }
+      ),
+      /* @__PURE__ */ jsxs8(
+        Select,
+        {
+          onValueChange: handleSelectCategory,
+          value: selectedCategory || void 0,
+          children: [
+            /* @__PURE__ */ jsx11(SelectTrigger, { className: "rf-w-full", children: /* @__PURE__ */ jsx11(SelectValue, { placeholder: "Select a category" }) }),
+            /* @__PURE__ */ jsx11(SelectContent, { children: productCategories.map((category) => /* @__PURE__ */ jsx11(SelectItem, { value: category.id, children: category.name }, category.id)) })
+          ]
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-flex-col rf-items-center rf-mb-8", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "rf-animate-pulse rf-flex rf-space-x-2 rf-items-center rf-mb-3", children: [
+        /* @__PURE__ */ jsx11(ArrowDown, { className: "rf-h-5 rf-w-5 rf-text-gray-400" }),
+        /* @__PURE__ */ jsx11("span", { className: "rf-text-gray-500", children: "Fetching estimate..." })
+      ] }),
+      /* @__PURE__ */ jsx11(Skeleton, { className: "rf-h-6 rf-w-3/4 rf-mb-2" }),
+      /* @__PURE__ */ jsx11(Skeleton, { className: "rf-h-6 rf-w-1/2" })
+    ] }) : estimatedCost !== null ? /* @__PURE__ */ jsxs8("div", { className: "rf-bg-gray-50 rf-p-4 rf-rounded-lg rf-mb-8", children: [
+      /* @__PURE__ */ jsx11("p", { className: "rf-text-sm rf-text-gray-600 rf-mb-2", children: "Estimated Cost:" }),
+      /* @__PURE__ */ jsxs8("p", { className: "rf-text-2xl rf-font-bold rf-text-gray-900", children: [
+        "$",
+        estimatedCost.toFixed(2)
+      ] }),
+      /* @__PURE__ */ jsx11("p", { className: "rf-text-xs rf-text-gray-500 rf-mt-1", children: "Pricing may vary based on specifications" })
+    ] }) : null,
+    /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-justify-between rf-mt-auto", children: [
+      /* @__PURE__ */ jsx11(
         Button,
         {
           variant: "outline",
           onClick: onCancel,
-          className: "rf-px-8 rf-border-red-500 rf-text-red-500 rf-hover:bg-red-50 rf-hover:text-red-600",
+          className: "rf-px-8 rf-border-red-500 rf-text-red-500 hover:rf-bg-red-50 hover:rf-text-red-600",
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx11(
         Button,
         {
-          onClick: onContinue,
-          className: "rf-px-8 rf-bg-gray-700 rf-hover:bg-gray-800",
-          children: "Continue"
+          onClick: estimatedCost !== null ? onContinue : handleGetEstimate,
+          disabled: !selectedCategory || isLoading,
+          className: estimatedCost !== null ? "rf-px-8 rf-bg-gray-700 hover:rf-bg-gray-800" : "rf-px-8 rf-bg-blue-600 hover:rf-bg-blue-700",
+          children: estimatedCost !== null ? "Continue" : "Get Estimate"
         }
       )
     ] })
@@ -1753,10 +1949,10 @@ var InitialOrderScreen = ({
 import ky2 from "ky";
 
 // lib/components/ui/progress.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Progress = React5.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx10(
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Progress = React6.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx12(
   ProgressPrimitive.Root,
   {
     ref,
@@ -1765,7 +1961,7 @@ var Progress = React5.forwardRef(({ className, value, ...props }, ref) => /* @__
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx10(
+    children: /* @__PURE__ */ jsx12(
       ProgressPrimitive.Indicator,
       {
         className: "rf-h-full rf-w-full rf-flex-1 rf-bg-zinc-900 rf-transition-all dark:rf-bg-zinc-50",
@@ -1777,7 +1973,7 @@ var Progress = React5.forwardRef(({ className, value, ...props }, ref) => /* @__
 Progress.displayName = "Progress";
 
 // lib/components/OrderDialog/StepwiseProgress.tsx
-import { ArrowDown, Check as Check2, Loader2 as Loader23 } from "lucide-react";
+import { ArrowDown as ArrowDown2, Check as Check3, Loader2 as Loader23 } from "lucide-react";
 import { useQuery } from "react-query";
 
 // lib/utils/order-steps.ts
@@ -1844,7 +2040,7 @@ var orderSteps = [
 }));
 
 // lib/components/OrderDialog/StepwiseProgress.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 var StepwiseProgressPanel = ({
   orderId,
   title = "Order PCB",
@@ -1889,35 +2085,35 @@ var StepwiseProgressPanel = ({
   const totalSteps = steps.length;
   const progress = Math.round(completedSteps.length / totalSteps * 100);
   const loading = isLoading || externalLoading;
-  return /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-flex-col rf-bg-white rf-rounded-xl rf-p-6 rf-max-w-xl rf-w-full rf-mx-auto", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-items-center rf-justify-between rf-mb-6", children: [
-      /* @__PURE__ */ jsx11("h2", { className: "rf-text-2xl rf-font-bold", children: title }),
-      /* @__PURE__ */ jsxs8("div", { className: "rf-text-sm rf-text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: "rf-flex rf-flex-col rf-bg-white rf-rounded-xl rf-p-6 rf-max-w-xl rf-w-full rf-mx-auto", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "rf-flex rf-items-center rf-justify-between rf-mb-6", children: [
+      /* @__PURE__ */ jsx13("h2", { className: "rf-text-2xl rf-font-bold", children: title }),
+      /* @__PURE__ */ jsxs9("div", { className: "rf-text-sm rf-text-muted-foreground", children: [
         completedSteps.length,
         " of ",
         totalSteps,
         " completed"
       ] })
     ] }),
-    /* @__PURE__ */ jsx11(Progress, { value: progress, className: "rf-h-2 rf-mb-8" }),
-    /* @__PURE__ */ jsxs8("div", { className: "rf-space-y-6 rf-mb-8", children: [
-      lastCompletedStep && /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-items-start rf-gap-4", children: [
-        /* @__PURE__ */ jsx11("div", { className: "rf-flex-shrink-0 rf-mt-0.5", children: /* @__PURE__ */ jsx11("div", { className: "rf-w-8 rf-h-8 rf-rounded-full rf-bg-green-100 rf-flex rf-items-center rf-justify-center", children: /* @__PURE__ */ jsx11(Check2, { className: "rf-h-5 rf-w-5 rf-text-green-600" }) }) }),
-        /* @__PURE__ */ jsxs8("div", { className: "rf-flex-1", children: [
-          /* @__PURE__ */ jsx11("p", { className: "rf-text-sm rf-font-medium rf-text-muted-foreground", children: "Last Completed" }),
-          /* @__PURE__ */ jsxs8("p", { className: "rf-font-medium rf-text-green-600", children: [
+    /* @__PURE__ */ jsx13(Progress, { value: progress, className: "rf-h-2 rf-mb-8" }),
+    /* @__PURE__ */ jsxs9("div", { className: "rf-space-y-6 rf-mb-8", children: [
+      lastCompletedStep && /* @__PURE__ */ jsxs9("div", { className: "rf-flex rf-items-start rf-gap-4", children: [
+        /* @__PURE__ */ jsx13("div", { className: "rf-flex-shrink-0 rf-mt-0.5", children: /* @__PURE__ */ jsx13("div", { className: "rf-w-8 rf-h-8 rf-rounded-full rf-bg-green-100 rf-flex rf-items-center rf-justify-center", children: /* @__PURE__ */ jsx13(Check3, { className: "rf-h-5 rf-w-5 rf-text-green-600" }) }) }),
+        /* @__PURE__ */ jsxs9("div", { className: "rf-flex-1", children: [
+          /* @__PURE__ */ jsx13("p", { className: "rf-text-sm rf-font-medium rf-text-muted-foreground", children: "Last Completed" }),
+          /* @__PURE__ */ jsxs9("p", { className: "rf-font-medium rf-text-green-600", children: [
             lastCompletedStep.order_step_id,
             ". ",
             lastCompletedStep.title
           ] })
         ] })
       ] }),
-      lastCompletedStep && activeStep && /* @__PURE__ */ jsx11("div", { className: "rf-pl-4", children: /* @__PURE__ */ jsx11(ArrowDown, { className: "rf-h-5 rf-w-5 rf-text-muted-foreground" }) }),
-      activeStep && /* @__PURE__ */ jsxs8("div", { className: "rf-flex rf-items-start rf-gap-4", children: [
-        /* @__PURE__ */ jsx11("div", { className: "rf-flex-shrink-0 rf-mt-0.5", children: /* @__PURE__ */ jsx11("div", { className: "rf-w-8 rf-h-8 rf-rounded-full rf-bg-blue-100 rf-flex rf-items-center rf-justify-center", children: loading ? /* @__PURE__ */ jsx11(Loader23, { className: "rf-h-5 rf-w-5 rf-text-blue-600 rf-animate-spin" }) : /* @__PURE__ */ jsx11("div", { className: "rf-h-2.5 rf-w-2.5 rf-rounded-full rf-bg-blue-600" }) }) }),
-        /* @__PURE__ */ jsxs8("div", { className: "rf-flex-1", children: [
-          /* @__PURE__ */ jsx11("p", { className: "rf-text-sm rf-font-medium rf-text-muted-foreground", children: "Current Step" }),
-          /* @__PURE__ */ jsxs8("p", { className: "rf-font-medium rf-text-blue-600", children: [
+      lastCompletedStep && activeStep && /* @__PURE__ */ jsx13("div", { className: "rf-pl-4", children: /* @__PURE__ */ jsx13(ArrowDown2, { className: "rf-h-5 rf-w-5 rf-text-muted-foreground" }) }),
+      activeStep && /* @__PURE__ */ jsxs9("div", { className: "rf-flex rf-items-start rf-gap-4", children: [
+        /* @__PURE__ */ jsx13("div", { className: "rf-flex-shrink-0 rf-mt-0.5", children: /* @__PURE__ */ jsx13("div", { className: "rf-w-8 rf-h-8 rf-rounded-full rf-bg-blue-100 rf-flex rf-items-center rf-justify-center", children: loading ? /* @__PURE__ */ jsx13(Loader23, { className: "rf-h-5 rf-w-5 rf-text-blue-600 rf-animate-spin" }) : /* @__PURE__ */ jsx13("div", { className: "rf-h-2.5 rf-w-2.5 rf-rounded-full rf-bg-blue-600" }) }) }),
+        /* @__PURE__ */ jsxs9("div", { className: "rf-flex-1", children: [
+          /* @__PURE__ */ jsx13("p", { className: "rf-text-sm rf-font-medium rf-text-muted-foreground", children: "Current Step" }),
+          /* @__PURE__ */ jsxs9("p", { className: "rf-font-medium rf-text-blue-600", children: [
             activeStep.order_step_id,
             ". ",
             activeStep.title
@@ -1925,12 +2121,12 @@ var StepwiseProgressPanel = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx11("div", { className: "rf-flex rf-justify-end rf-gap-3 rf-mt-auto", children: onCancel && /* @__PURE__ */ jsx11(Button, { variant: "outline", onClick: onCancel, className: "rf-px-6", children: "Cancel" }) })
+    /* @__PURE__ */ jsx13("div", { className: "rf-flex rf-justify-end rf-gap-3 rf-mt-auto", children: onCancel && /* @__PURE__ */ jsx13(Button, { variant: "outline", onClick: onCancel, className: "rf-px-6", children: "Cancel" }) })
   ] });
 };
 
 // lib/components/OrderDialog/OrderDialog.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var queryClient = new QueryClient();
 var OrderDialog = ({
   isOpen,
@@ -1939,8 +2135,8 @@ var OrderDialog = ({
   setStage,
   circuitJson
 }) => {
-  const [order, setOrder] = useState7(null);
-  const [loading, setLoading] = useState7(false);
+  const [order, setOrder] = useState8(null);
+  const [loading, setLoading] = useState8(false);
   const createOrder = async () => {
     const { order: order2 } = await ky3.post("registry/orders/create", {
       json: {
@@ -1957,15 +2153,15 @@ var OrderDialog = ({
     setOrder(order2);
     setStage("progress");
   };
-  return /* @__PURE__ */ jsx12(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx12(AlertDialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx12(AlertDialogContent, { className: "!rf-max-w-[660px] !rf-p-0", children: /* @__PURE__ */ jsxs9("div", { className: "rf-relative rf-w-full", children: [
-    stage === "initial" && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx14(AlertDialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsx14(AlertDialogContent, { className: "!rf-max-w-[660px] !rf-p-0", children: /* @__PURE__ */ jsxs10("div", { className: "rf-relative rf-w-full", children: [
+    stage === "initial" && /* @__PURE__ */ jsx14(
       InitialOrderScreen,
       {
         onCancel: onClose,
         onContinue: handleInitialContinue
       }
     ),
-    stage === "progress" && order?.order_id && /* @__PURE__ */ jsx12(
+    stage === "progress" && order?.order_id && /* @__PURE__ */ jsx14(
       StepwiseProgressPanel,
       {
         onCancel: onClose,
@@ -1974,7 +2170,7 @@ var OrderDialog = ({
         setStage
       }
     ),
-    stage === "checkout" && /* @__PURE__ */ jsx12(
+    stage === "checkout" && /* @__PURE__ */ jsx14(
       CheckoutOrder,
       {
         finalCost: 0,
@@ -1986,7 +2182,7 @@ var OrderDialog = ({
 };
 
 // lib/components/OrderDialog/CliOrderDialog.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var CliOrderDialog = ({
   isOpen,
   onClose,
@@ -1994,7 +2190,7 @@ var CliOrderDialog = ({
   setStage
 }) => {
   const circuitJson = useRunFrameStore((state) => state.circuitJson);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     OrderDialog,
     {
       isOpen,
@@ -2007,14 +2203,14 @@ var CliOrderDialog = ({
 };
 
 // lib/components/OrderDialog/useOrderDialog.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var OrderDialogComponent = ({
   isOpen,
   onClose,
   stage,
   setStage
 }) => {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     CliOrderDialog,
     {
       isOpen,
@@ -2025,9 +2221,9 @@ var OrderDialogComponent = ({
   );
 };
 var useOrderDialog = () => {
-  const [isOpen, setIsOpen] = useState8(false);
-  const [stage, setStage] = useState8("initial");
-  const [isRegistryConnected, setIsRegistryConnected] = useState8(false);
+  const [isOpen, setIsOpen] = useState9(false);
+  const [stage, setStage] = useState9("initial");
+  const [isRegistryConnected, setIsRegistryConnected] = useState9(false);
   const handleClose = () => {
     setIsOpen(false);
     setStage("initial");
@@ -2045,26 +2241,26 @@ var useOrderDialog = () => {
 };
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var RunframeCliLeftHeader = (props) => {
   const lastRunEvalVersion = useRunnerStore((s) => s.lastRunEvalVersion);
-  const [snippetName, setSnippetName] = useState9(null);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState9(false);
-  const [hasNeverBeenSaved, setHasNeverBeenSaved] = useState9(true);
-  const [isSaving, setIsSaving] = useState9(false);
-  const [requestToSaveSentAt, setRequestToSaveSentAt] = useState9(
+  const [snippetName, setSnippetName] = useState10(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState10(false);
+  const [hasNeverBeenSaved, setHasNeverBeenSaved] = useState10(true);
+  const [isSaving, setIsSaving] = useState10(false);
+  const [requestToSaveSentAt, setRequestToSaveSentAt] = useState10(
     null
   );
-  const [availableSnippets, setAvailableSnippets] = useState9(
+  const [availableSnippets, setAvailableSnippets] = useState10(
     null
   );
-  const [isSelectSnippetDialogOpen, setIsSelectSnippetDialogOpen] = useState9(false);
-  const [notificationMessage, setNotificationMessage] = useState9(
+  const [isSelectSnippetDialogOpen, setIsSelectSnippetDialogOpen] = useState10(false);
+  const [notificationMessage, setNotificationMessage] = useState10(
     null
   );
-  const [errorMessage, setErrorMessage] = useState9(null);
-  const [isError, setIsError] = useState9(false);
-  const [isExporting, setisExporting] = useState9(false);
+  const [errorMessage, setErrorMessage] = useState10(null);
+  const [isError, setIsError] = useState10(false);
+  const [isExporting, setisExporting] = useState10(false);
   const orderDialog = useOrderDialog();
   const pushEvent = useRunFrameStore((state) => state.pushEvent);
   const recentEvents = useRunFrameStore((state) => state.recentEvents);
@@ -2093,7 +2289,7 @@ var RunframeCliLeftHeader = (props) => {
       setisExporting(false);
     }
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isSaving || requestToSaveSentAt === null) return;
     const eventsSinceRequestToSave = recentEvents.filter(
       (event) => new Date(event.created_at).valueOf() > requestToSaveSentAt
@@ -2135,12 +2331,12 @@ var RunframeCliLeftHeader = (props) => {
     });
   };
   const circuitJson = useRunFrameStore((state) => state.circuitJson);
-  const [isImportDialogOpen, setIsImportDialogOpen] = useState9(false);
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    /* @__PURE__ */ jsxs10(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx15(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx15("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
-      /* @__PURE__ */ jsxs10(DropdownMenuContent, { children: [
-        /* @__PURE__ */ jsx15(
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState10(false);
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx17(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx17("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
+      /* @__PURE__ */ jsxs11(DropdownMenuContent, { children: [
+        /* @__PURE__ */ jsx17(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -2149,7 +2345,7 @@ var RunframeCliLeftHeader = (props) => {
             children: isSaving ? "Saving..." : "Push"
           }
         ),
-        parseInt(window.location.port) > 5e3 && /* @__PURE__ */ jsx15(
+        parseInt(window.location.port) > 5e3 && /* @__PURE__ */ jsx17(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -2159,7 +2355,7 @@ var RunframeCliLeftHeader = (props) => {
             children: "Order"
           }
         ),
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx17(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -2168,8 +2364,8 @@ var RunframeCliLeftHeader = (props) => {
             children: "Import"
           }
         ),
-        /* @__PURE__ */ jsxs10(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs11(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx17(
             DropdownMenuSubTrigger,
             {
               className: "rf-text-xs",
@@ -2177,7 +2373,7 @@ var RunframeCliLeftHeader = (props) => {
               children: isExporting ? "Exporting..." : "Export"
             }
           ),
-          /* @__PURE__ */ jsx15(DropdownMenuPortal, { children: /* @__PURE__ */ jsx15(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx17(DropdownMenuPortal, { children: /* @__PURE__ */ jsx17(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx17(
             DropdownMenuItem,
             {
               onSelect: () => {
@@ -2192,16 +2388,16 @@ var RunframeCliLeftHeader = (props) => {
                 });
               },
               disabled: isExporting,
-              children: /* @__PURE__ */ jsx15("span", { className: "rf-text-xs", children: exp.name })
+              children: /* @__PURE__ */ jsx17("span", { className: "rf-text-xs", children: exp.name })
             },
             i
           )) }) })
         ] }),
-        /* @__PURE__ */ jsxs10(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsx15(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
-          /* @__PURE__ */ jsx15(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs10(DropdownMenuSubContent, { children: [
-            /* @__PURE__ */ jsx15(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs10("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
-              /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsxs11(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx17(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
+          /* @__PURE__ */ jsx17(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs11(DropdownMenuSubContent, { children: [
+            /* @__PURE__ */ jsx17(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs11("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
+              /* @__PURE__ */ jsx17(
                 Checkbox,
                 {
                   id: "load-latest-eval",
@@ -2211,7 +2407,7 @@ var RunframeCliLeftHeader = (props) => {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx17(
                 "label",
                 {
                   htmlFor: "load-latest-eval",
@@ -2220,31 +2416,31 @@ var RunframeCliLeftHeader = (props) => {
                 }
               )
             ] }) }),
-            lastRunEvalVersion && /* @__PURE__ */ jsx15(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx15("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs10("span", { className: "rf-text-xs", children: [
+            lastRunEvalVersion && /* @__PURE__ */ jsx17(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx17("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs11("span", { className: "rf-text-xs", children: [
               "@tscircuit/eval@",
               lastRunEvalVersion
             ] }) }) }),
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx17(
               DropdownMenuItem,
               {
                 className: "rf-flex rf-items-center rf-gap-2",
                 onClick: () => {
                   window.open("/api/admin", "_blank");
                 },
-                children: /* @__PURE__ */ jsx15("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx15("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
+                children: /* @__PURE__ */ jsx17("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx17("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
               }
             )
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx15(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
-        /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
-          /* @__PURE__ */ jsx15(AlertDialogTitle, { children: "Error Saving Snippet" }),
-          /* @__PURE__ */ jsx15(AlertDialogDescription, { children: errorMessage })
+      /* @__PURE__ */ jsx17(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs11(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsxs11(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx17(AlertDialogTitle, { children: "Error Saving Snippet" }),
+          /* @__PURE__ */ jsx17(AlertDialogDescription, { children: errorMessage })
         ] }),
-        /* @__PURE__ */ jsx15(AlertDialogFooter, { children: /* @__PURE__ */ jsx15(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
+        /* @__PURE__ */ jsx17(AlertDialogFooter, { children: /* @__PURE__ */ jsx17(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
       ] }) }),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx17(
         SelectSnippetDialog,
         {
           snippetNames: availableSnippets ?? [],
@@ -2263,7 +2459,7 @@ var RunframeCliLeftHeader = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(
       ImportComponentDialog,
       {
         isOpen: isImportDialogOpen,
@@ -2292,8 +2488,8 @@ var RunframeCliLeftHeader = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx15(Toaster, { position: "top-center", reverseOrder: false }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(Toaster, { position: "top-center", reverseOrder: false }),
+    /* @__PURE__ */ jsx17(
       orderDialog.OrderDialog,
       {
         isOpen: orderDialog.isOpen,
@@ -2306,21 +2502,21 @@ var RunframeCliLeftHeader = (props) => {
 };
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var RunFrameForCli = (props) => {
   const [shouldLoadLatestEval, setLoadLatestEval] = useLocalStorageState(
     "load-latest-eval",
     true
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     RunFrameWithApi,
     {
       debug: props.debug,
       forceLatestEvalVersion: shouldLoadLatestEval,
       defaultToFullScreen: true,
       showToggleFullScreen: false,
-      leftHeaderContent: /* @__PURE__ */ jsxs11("div", { className: "rf-flex rf-items-center rf-justify-between", children: [
-        /* @__PURE__ */ jsx16(
+      leftHeaderContent: /* @__PURE__ */ jsxs12("div", { className: "rf-flex rf-items-center rf-justify-between", children: [
+        /* @__PURE__ */ jsx18(
           RunframeCliLeftHeader,
           {
             shouldLoadLatestEval,