@tscircuit/runframe 0.0.288 → 0.0.301

package/dist/runner.js

@@ -1,4 +1,5 @@
 import {
+  BomTable,
   Button,
   CircuitJsonPreview,
   DropdownMenu,
@@ -9,12 +10,16 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  PCBViewer,
+  PcbViewerWithContainerHeight,
+  SchematicViewer,
   Tabs,
   TabsList,
   TabsTrigger,
   buttonVariants,
-  cn
-} from "./chunk-QBYYLV3Y.js";
+  cn,
+  linkify
+} from "./chunk-MXMBJL7E.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -22,13 +27,6 @@ import { useEffect, useReducer, useRef as useRef2, useState } from "react";
 import Debug2 from "debug";
 import { Loader2, Play, Square } from "lucide-react";
 
-// lib/components/RunFrameWithApi/store.ts
-import { create } from "zustand";
-import { devtools } from "zustand/middleware";
-
-// lib/components/RunFrameWithApi/api-base.ts
-var API_BASE = window.API_BASE_URL ?? "/api";
-
 // lib/components/RunFrameWithApi/store.ts
 import { applyEditEventsToManualEditsFile } from "@tscircuit/core";
 
@@ -37,6 +35,13 @@ import Debug from "debug";
 var debug = Debug("run-frame");
 var debug_default = debug;
 
+// lib/components/RunFrameWithApi/store.ts
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+
+// lib/components/RunFrameWithApi/api-base.ts
+var API_BASE = window.API_BASE_URL ?? "/api";
+
 // lib/components/RunFrameWithApi/store.ts
 var debug2 = debug_default.extend("store");
 async function upsertFileApi(path, content) {
@@ -81,6 +86,7 @@ var useRunFrameStore = create()(
       circuitJson: null,
       lastManualEditsChangeSentAt: 0,
       recentEvents: [],
+      simulateScenarioOrder: void 0,
       loadInitialFiles: async () => {
         const fsMap = await getInitialFilesApi();
         debug2("loaded initial files", { fsMap });
@@ -181,7 +187,8 @@ var useRunFrameStore = create()(
           "manual-edits.json",
           JSON.stringify(updatedManualEditsFileContent, null, 2)
         );
-      }
+      },
+      setSimulateScenarioOrder: (scenarioOrder) => set({ simulateScenarioOrder: scenarioOrder })
     }),
     { name: "run-frame-store" }
   )
@@ -763,7 +770,7 @@ function useLocalStorageState(key, initialValue) {
 }
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { useEffect as useEffect8, useMemo as useMemo3, useState as useState8 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo3, useState as useState9 } from "react";
 
 // lib/components/RunFrameForCli/SelectSnippetDialog.tsx
 import { useState as useState4 } from "react";
@@ -1462,102 +1469,607 @@ var importComponentFromJlcpcb = async (jlcpcbPartNumber) => {
 };
 
 // lib/components/OrderDialog/useOrderDialog.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // lib/components/OrderDialog/OrderDialog.tsx
-import { useState as useState6 } from "react";
 import ky2 from "ky";
+import { useState as useState7 } from "react";
+
+// lib/components/OrderDialog/CheckoutOrder.tsx
+import { MapPin } from "lucide-react";
+import { useState as useState6 } from "react";
+import { toast as toast2 } from "react-hot-toast";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var OrderDialog = ({
-  isOpen,
-  onClose
+var CheckoutOrder = ({
+  finalCost,
+  onConfirmCheckout,
+  onBack
 }) => {
-  const [order, setOrder] = useState6(null);
-  const [stage, setStage] = useState6(
-    "setup"
+  const [selectedAddressId, setSelectedAddressId] = useState6(
+    null
   );
-  const circuitJson = useRunFrameStore((state) => state.circuitJson);
-  return /* @__PURE__ */ jsx8(AlertDialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs6(AlertDialogContent, { children: [
-    /* @__PURE__ */ jsxs6(AlertDialogHeader, { children: [
-      /* @__PURE__ */ jsx8(AlertDialogTitle, { children: "Order PCB" }),
-      /* @__PURE__ */ jsx8(AlertDialogDescription, { children: stage })
-    ] }),
-    stage === "order-progress" && /* @__PURE__ */ jsx8("div", { className: "rf-space-y-4 rf-py-4 ", children: /* @__PURE__ */ jsx8(
-      "pre",
+  const [savedAddresses] = useState6([
+    {
+      id: 1,
+      name: "Home",
+      street: "123 Main St",
+      city: "San Francisco",
+      state: "CA",
+      zipCode: "94105",
+      country: "USA",
+      isDefault: true
+    },
+    {
+      id: 2,
+      name: "Office",
+      street: "456 Market St",
+      city: "San Francisco",
+      state: "CA",
+      zipCode: "94103",
+      country: "USA",
+      isDefault: false
+    }
+  ]);
+  const [addressForm, setAddressForm] = useState6({
+    name: "",
+    street: "",
+    city: "",
+    state: "",
+    zipCode: "",
+    country: ""
+  });
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setAddressForm((prev) => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+  const handleSelectAddress = (addressId) => {
+    setSelectedAddressId(addressId);
+    const selectedAddress = savedAddresses.find((addr) => addr.id === addressId);
+    if (selectedAddress) {
+      setAddressForm({
+        name: selectedAddress.name,
+        street: selectedAddress.street,
+        city: selectedAddress.city,
+        state: selectedAddress.state,
+        zipCode: selectedAddress.zipCode,
+        country: selectedAddress.country
+      });
+    }
+  };
+  const handleConfirmCheckout = () => {
+    if (!selectedAddressId && (!addressForm.street || !addressForm.city || !addressForm.zipCode)) {
+      toast2.error("Please provide a complete shipping address.");
+      return;
+    }
+    toast2.success("Your PCB order has been placed successfully.");
+    onConfirmCheckout();
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "rf-bg-white rf-rounded-xl rf-p-6 rf-mx-auto", children: [
+    /* @__PURE__ */ jsx8("h2", { className: "rf-text-2xl rf-font-bold rf-mb-6", children: "Checkout" }),
+    /* @__PURE__ */ jsxs6("div", { className: "rf-grid rf-grid-cols-1 md:rf-grid-cols-2 rf-gap-8", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-6", children: [
+        /* @__PURE__ */ jsx8("h3", { className: "rf-text-lg rf-font-semibold", children: "Shipping Address" }),
+        savedAddresses.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-4", children: [
+          /* @__PURE__ */ jsx8("div", { className: "rf-text-sm rf-font-medium rf-text-gray-500", children: "Saved Addresses" }),
+          /* @__PURE__ */ jsx8("div", { className: "rf-flex rf-flex-wrap rf-gap-3", children: savedAddresses.map((address) => /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelectAddress(address.id),
+              className: cn(
+                "rf-flex rf-items-center rf-gap-2 rf-px-3 rf-py-2 rf-text-sm rf-rounded-md rf-border rf-transition-colors",
+                selectedAddressId === address.id ? "rf-border-blue-500 rf-bg-blue-50 rf-text-blue-700" : "rf-border-gray-200 rf-hover:bg-gray-50"
+              ),
+              children: [
+                /* @__PURE__ */ jsx8(MapPin, { className: "rf-h-4 rf-w-4" }),
+                /* @__PURE__ */ jsx8("span", { children: address.name }),
+                address.isDefault && /* @__PURE__ */ jsx8("span", { className: "rf-inline-flex rf-items-center rf-rounded-full rf-bg-blue-100 rf-px-2 rf-py-0.5 rf-text-xs rf-font-medium rf-text-blue-800", children: "Default" })
+              ]
+            },
+            address.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-4", children: [
+          /* @__PURE__ */ jsx8("div", { className: "rf-grid rf-grid-cols-2 rf-gap-4", children: /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-2", children: [
+            /* @__PURE__ */ jsx8("label", { htmlFor: "name", children: "Address Name" }),
+            /* @__PURE__ */ jsx8(
+              Input,
+              {
+                id: "name",
+                name: "name",
+                placeholder: "Home, Office, etc.",
+                value: addressForm.name,
+                onChange: handleInputChange
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-2", children: [
+            /* @__PURE__ */ jsx8("label", { htmlFor: "street", children: "Street Address" }),
+            /* @__PURE__ */ jsx8(
+              Input,
+              {
+                id: "street",
+                name: "street",
+                placeholder: "123 Main St",
+                value: addressForm.street,
+                onChange: handleInputChange
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "rf-grid rf-grid-cols-2 rf-gap-4", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-2", children: [
+              /* @__PURE__ */ jsx8("label", { htmlFor: "city", children: "City" }),
+              /* @__PURE__ */ jsx8(
+                Input,
+                {
+                  id: "city",
+                  name: "city",
+                  placeholder: "City",
+                  value: addressForm.city,
+                  onChange: handleInputChange
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-2", children: [
+              /* @__PURE__ */ jsx8("label", { htmlFor: "state", children: "State" }),
+              /* @__PURE__ */ jsx8(
+                Input,
+                {
+                  id: "state",
+                  name: "state",
+                  placeholder: "State",
+                  value: addressForm.state,
+                  onChange: handleInputChange
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "rf-grid rf-grid-cols-2 rf-gap-4", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-2", children: [
+              /* @__PURE__ */ jsx8("label", { htmlFor: "zipCode", children: "Zip Code" }),
+              /* @__PURE__ */ jsx8(
+                Input,
+                {
+                  id: "zipCode",
+                  name: "zipCode",
+                  placeholder: "Zip Code",
+                  value: addressForm.zipCode,
+                  onChange: handleInputChange
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-2", children: [
+              /* @__PURE__ */ jsx8("label", { htmlFor: "country", children: "Country" }),
+              /* @__PURE__ */ jsx8(
+                Input,
+                {
+                  id: "country",
+                  name: "country",
+                  placeholder: "Country",
+                  value: addressForm.country,
+                  onChange: handleInputChange
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "rf-bg-gray-50 rf-p-6 rf-rounded-lg", children: [
+        /* @__PURE__ */ jsx8("h3", { className: "rf-text-lg rf-font-semibold rf-mb-4", children: "Order Summary" }),
+        /* @__PURE__ */ jsxs6("div", { className: "rf-space-y-4", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-justify-between rf-py-2 rf-border-b rf-border-gray-200", children: [
+            /* @__PURE__ */ jsx8("span", { className: "rf-text-gray-600", children: "PCB Manufacturing" }),
+            /* @__PURE__ */ jsxs6("span", { className: "rf-font-medium", children: [
+              "$",
+              (finalCost * 0.6).toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-justify-between rf-py-2 rf-border-b rf-border-gray-200", children: [
+            /* @__PURE__ */ jsx8("span", { className: "rf-text-gray-600", children: "Components" }),
+            /* @__PURE__ */ jsxs6("span", { className: "rf-font-medium", children: [
+              "$",
+              (finalCost * 0.3).toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-justify-between rf-py-2 rf-border-b rf-border-gray-200", children: [
+            /* @__PURE__ */ jsx8("span", { className: "rf-text-gray-600", children: "Assembly" }),
+            /* @__PURE__ */ jsxs6("span", { className: "rf-font-medium", children: [
+              "$",
+              (finalCost * 0.1).toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-justify-between rf-py-2 rf-border-b rf-border-gray-200", children: [
+            /* @__PURE__ */ jsx8("span", { className: "rf-text-gray-600", children: "Shipping" }),
+            /* @__PURE__ */ jsx8("span", { className: "rf-font-medium", children: "$15.00" })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "rf-flex rf-justify-between rf-py-2 rf-text-lg rf-font-bold", children: [
+            /* @__PURE__ */ jsx8("span", { children: "Total" }),
+            /* @__PURE__ */ jsxs6("span", { children: [
+              "$",
+              (finalCost + 15).toFixed(2)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "rf-pt-4", children: [
+            /* @__PURE__ */ jsx8(
+              Button,
+              {
+                onClick: handleConfirmCheckout,
+                className: "rf-w-full rf-bg-gray-700 rf-hover:bg-gray-800 rf-text-white rf-py-3",
+                children: "Confirm and Place Order"
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              Button,
+              {
+                variant: "outline",
+                onClick: onBack,
+                className: "rf-w-full rf-mt-3",
+                children: "Back to PCB Order"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+
+// lib/components/OrderDialog/InitialOrder.tsx
+import { jsx as jsx9, jsxs as jsxs7 } 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(
+        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",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        Button,
+        {
+          onClick: onContinue,
+          className: "rf-px-8 rf-bg-gray-700 rf-hover:bg-gray-800",
+          children: "Continue"
+        }
+      )
+    ] })
+  ] });
+};
+
+// lib/components/OrderDialog/StepwiseProgress.tsx
+import { Check as Check2, Loader2 as Loader23, ArrowDown } from "lucide-react";
+
+// lib/components/ui/progress.tsx
+import * as React5 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(
+  ProgressPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "rf-relative rf-h-2 rf-w-full rf-overflow-hidden rf-rounded-full rf-bg-zinc-100 dark:rf-bg-zinc-800",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx10(
+      ProgressPrimitive.Indicator,
       {
-        style: {
-          maxHeight: "500px",
-          overflowY: "scroll",
-          fontSize: "8px"
-        },
-        children: JSON.stringify(order, null, 2)
+        className: "rf-h-full rf-w-full rf-flex-1 rf-bg-zinc-900 rf-transition-all dark:rf-bg-zinc-50",
+        style: { transform: `translateX(-${100 - (value || 0)}%)` }
       }
-    ) }),
-    /* @__PURE__ */ jsxs6(AlertDialogFooter, { children: [
-      /* @__PURE__ */ jsx8(AlertDialogCancel, { onClick: onClose, children: "Cancel" }),
-      stage === "setup" && /* @__PURE__ */ jsx8(
+    )
+  }
+));
+Progress.displayName = "Progress";
+
+// lib/components/OrderDialog/StepwiseProgress.tsx
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var StepwiseProgressPanel = ({
+  steps,
+  title = "Order PCB",
+  onCancel,
+  onContinue,
+  continueButtonText = "Continue",
+  cancelButtonText = "Cancel",
+  loading = false
+}) => {
+  const completedSteps = steps.filter((step) => step.completed);
+  const activeStep = steps.find((step) => step.active);
+  const totalSteps = steps.length;
+  const progress = Math.round(completedSteps.length / totalSteps * 100);
+  const displayedCompletedSteps = completedSteps.slice(-1);
+  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: [
+        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: [
+      displayedCompletedSteps.map((step, index) => /* @__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: index === displayedCompletedSteps.length - 1 ? "Last Completed" : "Completed" }),
+              /* @__PURE__ */ jsxs8("p", { className: "rf-font-medium rf-text-green-600", children: [
+                step.order_step_id,
+                ". ",
+                step.title
+              ] })
+            ] })
+          ]
+        },
+        step.order_step_id
+      )),
+      completedSteps.length > 0 && 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: [
+            activeStep.order_step_id,
+            ". ",
+            activeStep.title
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs8("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: cancelButtonText }),
+      onContinue && /* @__PURE__ */ jsx11(
         Button,
         {
-          onClick: async () => {
-            if (!circuitJson) {
-              return;
-            }
-            const { order: order2 } = await ky2.post("registry/orders/create", {
-              json: {
-                circuit_json: circuitJson
-              },
-              headers: {
-                Authorization: `Bearer account-1234`
-              }
-            }).json();
-            setOrder(order2);
-            setStage("order-progress");
-          },
-          children: "Submit Order"
+          onClick: onContinue,
+          className: "rf-px-6 rf-bg-gray-700 rf-hover:bg-gray-800",
+          disabled: loading || !activeStep,
+          children: loading ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsx11(Loader23, { className: "rf-mr-2 rf-h-4 rf-w-4 rf-animate-spin" }),
+            "Processing..."
+          ] }) : continueButtonText
         }
-      ),
-      stage === "order-progress" && /* @__PURE__ */ jsx8(Button, { disabled: true, children: "Continue to Shipping" })
+      )
     ] })
-  ] }) });
+  ] });
+};
+
+// lib/components/OrderDialog/OrderDialog.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var orderSteps = [
+  { order_step_id: 1, key: "are_gerbers_generated", title: "Generate Gerbers" },
+  { order_step_id: 2, key: "are_gerbers_uploaded", title: "Upload Gerbers" },
+  { order_step_id: 3, key: "is_gerber_analyzed", title: "Analyze Gerber" },
+  {
+    order_step_id: 4,
+    key: "are_initial_costs_calculated",
+    title: "Calculate Initial Costs"
+  },
+  { order_step_id: 5, key: "is_pcb_added_to_cart", title: "Add PCB to Cart" },
+  { order_step_id: 6, key: "is_bom_uploaded", title: "Upload BOM" },
+  { order_step_id: 7, key: "is_pnp_uploaded", title: "Upload PnP" },
+  { order_step_id: 8, key: "is_bom_pnp_analyzed", title: "Analyze BOM & PnP" },
+  {
+    order_step_id: 9,
+    key: "is_bom_parsing_complete",
+    title: "BOM Parsing Complete"
+  },
+  {
+    order_step_id: 10,
+    key: "are_components_available",
+    title: "Components Available"
+  },
+  {
+    order_step_id: 11,
+    key: "is_patch_map_generated",
+    title: "Generate Patch Map"
+  },
+  {
+    order_step_id: 12,
+    key: "is_json_merge_file_created",
+    title: "Create JSON Merge File"
+  },
+  {
+    order_step_id: 13,
+    key: "is_dfm_result_generated",
+    title: "Generate DFM Result"
+  },
+  { order_step_id: 14, key: "are_files_downloaded", title: "Download Files" },
+  {
+    order_step_id: 15,
+    key: "are_product_categories_fetched",
+    title: "Fetch Product Categories"
+  },
+  {
+    order_step_id: 16,
+    key: "are_final_costs_calculated",
+    title: "Calculate Final Costs"
+  },
+  {
+    order_step_id: 17,
+    key: "is_json_merge_file_updated",
+    title: "Update JSON Merge File"
+  },
+  { order_step_id: 18, key: "is_added_to_cart", title: "Add to Cart" }
+].map((step, index) => ({
+  ...step,
+  completed: false,
+  active: index === 0
+  // First step starts as active
+}));
+var OrderDialog = ({
+  isOpen,
+  onClose,
+  stage,
+  setStage
+}) => {
+  const [order, setOrder] = useState7(null);
+  const [orderState, setOrderState] = useState7(null);
+  const [steps, setSteps] = useState7(orderSteps);
+  const [loading, setLoading] = useState7(false);
+  const circuitJson = useRunFrameStore((state) => state.circuitJson);
+  const simulateScenarioOrder = useRunFrameStore(
+    (state) => state.simulateScenarioOrder
+  );
+  const createOrder = async () => {
+    const { order: order2 } = await ky2.post("registry/orders/create", {
+      json: {
+        circuit_json: circuitJson
+      },
+      headers: {
+        Authorization: `Bearer account-1234`
+      }
+    }).json();
+    return order2;
+  };
+  const getOrderState = async (orderId) => {
+    let response;
+    try {
+      response = await ky2.get("registry/orders/get", {
+        searchParams: {
+          order_id: orderId,
+          ...simulateScenarioOrder ? { _simulate_scenario: simulateScenarioOrder } : {}
+        },
+        headers: {
+          Authorization: `Bearer account-1234`
+        }
+      }).json();
+    } catch (error) {
+      console.error(error);
+    }
+    setOrder(response.order);
+    setOrderState(response.orderState);
+    setStage("progress");
+  };
+  const handleProgressContinue = async () => {
+    setLoading(true);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      setSteps((currentSteps) => {
+        const activeStepIndex = currentSteps.findIndex((step) => step.active);
+        if (activeStepIndex === -1) return currentSteps;
+        const newSteps = [...currentSteps];
+        newSteps[activeStepIndex] = {
+          ...newSteps[activeStepIndex],
+          completed: true,
+          active: false
+        };
+        if (activeStepIndex === currentSteps.length - 1) {
+          setTimeout(() => setStage("checkout"), 500);
+        } else {
+          newSteps[activeStepIndex + 1] = {
+            ...newSteps[activeStepIndex + 1],
+            active: true
+          };
+        }
+        return newSteps;
+      });
+    } catch (error) {
+      console.error(error);
+    }
+    setLoading(false);
+  };
+  const handleInitialContinue = () => {
+    setStage("progress");
+  };
+  return /* @__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(
+      InitialOrderScreen,
+      {
+        onCancel: onClose,
+        onContinue: handleInitialContinue
+      }
+    ),
+    stage === "progress" && /* @__PURE__ */ jsx12(
+      StepwiseProgressPanel,
+      {
+        steps,
+        onCancel: onClose,
+        onContinue: handleProgressContinue,
+        loading
+      }
+    ),
+    stage === "checkout" && /* @__PURE__ */ jsx12(
+      CheckoutOrder,
+      {
+        finalCost: 0,
+        onConfirmCheckout: () => onClose(),
+        onBack: () => setStage("progress")
+      }
+    )
+  ] }) }) });
 };
 
 // lib/components/OrderDialog/useOrderDialog.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var useOrderDialog = () => {
-  const [isOpen, setIsOpen] = useState7(false);
-  const [isRegistryConnected, setIsRegistryConnected] = useState7(false);
+  const [isOpen, setIsOpen] = useState8(false);
+  const [stage, setStage] = useState8("initial");
+  const [isRegistryConnected, setIsRegistryConnected] = useState8(false);
+  const handleClose = () => {
+    setIsOpen(false);
+    setStage("initial");
+  };
   return {
     isOpen,
+    stage,
     isRegistryConnected,
     open: () => setIsOpen(true),
-    close: () => setIsOpen(false),
+    close: handleClose,
+    setStage,
     OrderDialog: () => {
-      return /* @__PURE__ */ jsx9(OrderDialog, { isOpen, onClose: () => setIsOpen(false) });
+      return /* @__PURE__ */ jsx13(
+        OrderDialog,
+        {
+          isOpen,
+          onClose: handleClose,
+          stage,
+          setStage
+        }
+      );
     }
   };
 };
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var RunframeCliLeftHeader = (props) => {
   const lastRunEvalVersion = useRunnerStore((s) => s.lastRunEvalVersion);
-  const [snippetName, setSnippetName] = useState8(null);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState8(false);
-  const [hasNeverBeenSaved, setHasNeverBeenSaved] = useState8(true);
-  const [isSaving, setIsSaving] = useState8(false);
-  const [requestToSaveSentAt, setRequestToSaveSentAt] = useState8(
+  const [snippetName, setSnippetName] = useState9(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState9(false);
+  const [hasNeverBeenSaved, setHasNeverBeenSaved] = useState9(true);
+  const [isSaving, setIsSaving] = useState9(false);
+  const [requestToSaveSentAt, setRequestToSaveSentAt] = useState9(
     null
   );
-  const [availableSnippets, setAvailableSnippets] = useState8(
+  const [availableSnippets, setAvailableSnippets] = useState9(
     null
   );
-  const [isSelectSnippetDialogOpen, setIsSelectSnippetDialogOpen] = useState8(false);
-  const [notificationMessage, setNotificationMessage] = useState8(
+  const [isSelectSnippetDialogOpen, setIsSelectSnippetDialogOpen] = useState9(false);
+  const [notificationMessage, setNotificationMessage] = useState9(
     null
   );
-  const [errorMessage, setErrorMessage] = useState8(null);
-  const [isError, setIsError] = useState8(false);
-  const [isExporting, setisExporting] = useState8(false);
+  const [errorMessage, setErrorMessage] = useState9(null);
+  const [isError, setIsError] = useState9(false);
+  const [isExporting, setisExporting] = useState9(false);
   const orderDialog = useOrderDialog();
   const pushEvent = useRunFrameStore((state) => state.pushEvent);
   const recentEvents = useRunFrameStore((state) => state.recentEvents);
@@ -1586,7 +2098,7 @@ var RunframeCliLeftHeader = (props) => {
       setisExporting(false);
     }
   });
-  useEffect8(() => {
+  useEffect7(() => {
     if (!isSaving || requestToSaveSentAt === null) return;
     const eventsSinceRequestToSave = recentEvents.filter(
       (event) => new Date(event.created_at).valueOf() > requestToSaveSentAt
@@ -1628,12 +2140,12 @@ var RunframeCliLeftHeader = (props) => {
     });
   };
   const circuitJson = useRunFrameStore((state) => state.circuitJson);
-  const [isImportDialogOpen, setIsImportDialogOpen] = useState8(false);
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsxs7(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx10("div", { className: "rf-whitespace-nowrap rf-text-xs font-medium rf-p-2 rf-mx-1 rf-cursor-pointer rf-relative", children: "File" }) }),
-      /* @__PURE__ */ jsxs7(DropdownMenuContent, { children: [
-        /* @__PURE__ */ jsx10(
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState9(false);
+  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    /* @__PURE__ */ jsxs10(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx14(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx14("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__ */ jsx14(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -1642,7 +2154,7 @@ var RunframeCliLeftHeader = (props) => {
             children: isSaving ? "Saving..." : "Push"
           }
         ),
-        parseInt(window.location.port) > 5e3 && /* @__PURE__ */ jsx10(
+        parseInt(window.location.port) > 5e3 && /* @__PURE__ */ jsx14(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -1652,7 +2164,7 @@ var RunframeCliLeftHeader = (props) => {
             children: "Order"
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx14(
           DropdownMenuItem,
           {
             className: "rf-text-xs",
@@ -1661,8 +2173,8 @@ var RunframeCliLeftHeader = (props) => {
             children: "Import"
           }
         ),
-        /* @__PURE__ */ jsxs7(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs10(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx14(
             DropdownMenuSubTrigger,
             {
               className: "rf-text-xs",
@@ -1670,7 +2182,7 @@ var RunframeCliLeftHeader = (props) => {
               children: isExporting ? "Exporting..." : "Export"
             }
           ),
-          /* @__PURE__ */ jsx10(DropdownMenuPortal, { children: /* @__PURE__ */ jsx10(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx14(DropdownMenuPortal, { children: /* @__PURE__ */ jsx14(DropdownMenuSubContent, { children: availableExports.map((exp, i) => /* @__PURE__ */ jsx14(
             DropdownMenuItem,
             {
               onSelect: () => {
@@ -1685,16 +2197,16 @@ var RunframeCliLeftHeader = (props) => {
                 });
               },
               disabled: isExporting,
-              children: /* @__PURE__ */ jsx10("span", { className: "rf-text-xs", children: exp.name })
+              children: /* @__PURE__ */ jsx14("span", { className: "rf-text-xs", children: exp.name })
             },
             i
           )) }) })
         ] }),
-        /* @__PURE__ */ jsxs7(DropdownMenuSub, { children: [
-          /* @__PURE__ */ jsx10(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
-          /* @__PURE__ */ jsx10(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs7(DropdownMenuSubContent, { children: [
-            /* @__PURE__ */ jsx10(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs7("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
-              /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs10(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsx14(DropdownMenuSubTrigger, { className: "rf-text-xs", children: "Advanced" }),
+          /* @__PURE__ */ jsx14(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs10(DropdownMenuSubContent, { children: [
+            /* @__PURE__ */ jsx14(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__ */ jsx14(
                 Checkbox,
                 {
                   id: "load-latest-eval",
@@ -1704,7 +2216,7 @@ var RunframeCliLeftHeader = (props) => {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx14(
                 "label",
                 {
                   htmlFor: "load-latest-eval",
@@ -1713,31 +2225,31 @@ var RunframeCliLeftHeader = (props) => {
                 }
               )
             ] }) }),
-            lastRunEvalVersion && /* @__PURE__ */ jsx10(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx10("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs7("span", { className: "rf-text-xs", children: [
+            lastRunEvalVersion && /* @__PURE__ */ jsx14(DropdownMenuItem, { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx14("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsxs10("span", { className: "rf-text-xs", children: [
               "@tscircuit/eval@",
               lastRunEvalVersion
             ] }) }) }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx14(
               DropdownMenuItem,
               {
                 className: "rf-flex rf-items-center rf-gap-2",
                 onClick: () => {
                   window.open("/api/admin", "_blank");
                 },
-                children: /* @__PURE__ */ jsx10("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx10("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
+                children: /* @__PURE__ */ jsx14("div", { className: "rf-flex rf-items-center rf-gap-2", children: /* @__PURE__ */ jsx14("span", { className: "rf-text-xs", children: "CLI Admin Panel" }) })
               }
             )
           ] }) })
         ] })
       ] }),
-      /* @__PURE__ */ jsx10(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs7(AlertDialogContent, { children: [
-        /* @__PURE__ */ jsxs7(AlertDialogHeader, { children: [
-          /* @__PURE__ */ jsx10(AlertDialogTitle, { children: "Error Saving Snippet" }),
-          /* @__PURE__ */ jsx10(AlertDialogDescription, { children: errorMessage })
+      /* @__PURE__ */ jsx14(AlertDialog, { open: isError, onOpenChange: setIsError, children: /* @__PURE__ */ jsxs10(AlertDialogContent, { children: [
+        /* @__PURE__ */ jsxs10(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx14(AlertDialogTitle, { children: "Error Saving Snippet" }),
+          /* @__PURE__ */ jsx14(AlertDialogDescription, { children: errorMessage })
         ] }),
-        /* @__PURE__ */ jsx10(AlertDialogFooter, { children: /* @__PURE__ */ jsx10(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
+        /* @__PURE__ */ jsx14(AlertDialogFooter, { children: /* @__PURE__ */ jsx14(AlertDialogCancel, { onClick: () => setIsError(false), children: "Dismiss" }) })
       ] }) }),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx14(
         SelectSnippetDialog,
         {
           snippetNames: availableSnippets ?? [],
@@ -1756,7 +2268,7 @@ var RunframeCliLeftHeader = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx14(
       ImportComponentDialog,
       {
         isOpen: isImportDialogOpen,
@@ -1785,43 +2297,51 @@ var RunframeCliLeftHeader = (props) => {
         }
       }
     ),
-    /* @__PURE__ */ jsx10(Toaster, { position: "top-center", reverseOrder: false }),
-    /* @__PURE__ */ jsx10(orderDialog.OrderDialog, {})
+    /* @__PURE__ */ jsx14(Toaster, { position: "top-center", reverseOrder: false }),
+    /* @__PURE__ */ jsx14(orderDialog.OrderDialog, {})
   ] });
 };
 
 // lib/components/RunFrameForCli/RunFrameForCli.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 var RunFrameForCli = (props) => {
   const [shouldLoadLatestEval, setLoadLatestEval] = useLocalStorageState(
     "load-latest-eval",
     true
   );
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx15(
     RunFrameWithApi,
     {
       debug: props.debug,
       forceLatestEvalVersion: shouldLoadLatestEval,
       defaultToFullScreen: true,
       showToggleFullScreen: false,
-      leftHeaderContent: /* @__PURE__ */ jsx11("div", { className: "rf-flex", children: /* @__PURE__ */ jsx11(
-        RunframeCliLeftHeader,
-        {
-          shouldLoadLatestEval,
-          onChangeShouldLoadLatestEval: (newShouldLoadLatestEval) => {
-            setLoadLatestEval(newShouldLoadLatestEval);
-            globalThis.runFrameWorker = null;
+      leftHeaderContent: /* @__PURE__ */ jsxs11("div", { className: "rf-flex rf-items-center rf-justify-between", children: [
+        /* @__PURE__ */ jsx15(
+          RunframeCliLeftHeader,
+          {
+            shouldLoadLatestEval,
+            onChangeShouldLoadLatestEval: (newShouldLoadLatestEval) => {
+              setLoadLatestEval(newShouldLoadLatestEval);
+              globalThis.runFrameWorker = null;
+            }
           }
-        }
-      ) })
+        ),
+        props.scenarioSelectorContent
+      ] })
     }
   );
 };
 export {
+  BomTable,
   CircuitJsonPreview,
+  PCBViewer as PcbViewer,
+  PcbViewerWithContainerHeight,
   RunFrame,
   RunFrameForCli,
   RunFrameWithApi,
+  SchematicViewer,
   guessEntrypoint,
-  guessManualEditsFilePath
+  guessManualEditsFilePath,
+  linkify
 };