@tscircuit/runframe 0.0.306 → 0.0.307

package/dist/runner.js

@@ -458,7 +458,6 @@ var RunFrame = (props) => {
       }).then(() => {
         return { success: true };
       }).catch((e) => {
-        console.log("error", e);
         const message = e.message.replace("Error: ", "");
         props.onError?.(e);
         setError({ error: message, stack: e.stack });
@@ -1473,8 +1472,9 @@ var importComponentFromJlcpcb = async (jlcpcbPartNumber) => {
 import { useState as useState8 } from "react";
 
 // lib/components/OrderDialog/OrderDialog.tsx
-import ky2 from "ky";
+import ky3 from "ky";
 import { useState as useState7 } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 // lib/components/OrderDialog/CheckoutOrder.tsx
 import { MapPin } from "lucide-react";
@@ -1484,7 +1484,7 @@ import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var CheckoutOrder = ({
   finalCost,
   onConfirmCheckout,
-  onBack
+  onCancel
 }) => {
   const [selectedAddressId, setSelectedAddressId] = useState6(
     null
@@ -1706,9 +1706,9 @@ var CheckoutOrder = ({
               Button,
               {
                 variant: "outline",
-                onClick: onBack,
+                onClick: onCancel,
                 className: "rf-w-full rf-mt-3",
-                children: "Back to PCB Order"
+                children: "Cancel"
               }
             )
           ] })
@@ -1750,7 +1750,7 @@ var InitialOrderScreen = ({
 };
 
 // lib/components/OrderDialog/StepwiseProgress.tsx
-import { Check as Check2, Loader2 as Loader23, ArrowDown } from "lucide-react";
+import ky2 from "ky";
 
 // lib/components/ui/progress.tsx
 import * as React5 from "react";
@@ -1777,84 +1777,10 @@ var Progress = React5.forwardRef(({ className, value, ...props }, ref) => /* @__
 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: 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
-        }
-      )
-    ] })
-  ] });
-};
+import { ArrowDown, Check as Check2, Loader2 as Loader23 } from "lucide-react";
+import { useQuery } from "react-query";
 
-// lib/components/OrderDialog/OrderDialog.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+// lib/utils/order-steps.ts
 var orderSteps = [
   { order_step_id: 1, key: "are_gerbers_generated", title: "Generate Gerbers" },
   { order_step_id: 2, key: "are_gerbers_uploaded", title: "Upload Gerbers" },
@@ -1916,6 +1842,96 @@ var orderSteps = [
   active: index === 0
   // First step starts as active
 }));
+
+// lib/components/OrderDialog/StepwiseProgress.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var StepwiseProgressPanel = ({
+  orderId,
+  title = "Order PCB",
+  onCancel,
+  loading: externalLoading = false,
+  setStage
+}) => {
+  const { data, isLoading } = useQuery({
+    queryKey: ["orderState", orderId],
+    queryFn: async () => {
+      const response = await ky2.get("registry/orders/get", {
+        searchParams: { order_id: orderId },
+        headers: {
+          Authorization: `Bearer account-1234`
+        }
+      }).json();
+      if (response.orderState.current_step === "is_added_to_cart") {
+        setStage("checkout");
+      }
+      return response;
+    },
+    refetchInterval: 2e3,
+    refetchIntervalInBackground: true
+  });
+  const steps = orderSteps.map((step) => {
+    if (!data?.orderState) return step;
+    const currentStepIndex = orderSteps.findIndex(
+      (orderStep) => orderStep.key === data.orderState.current_step
+    );
+    const stepIndex = orderSteps.findIndex(
+      (orderStep) => orderStep.key === step.key
+    );
+    return {
+      ...step,
+      completed: stepIndex < currentStepIndex,
+      active: stepIndex === currentStepIndex
+    };
+  });
+  const completedSteps = steps.filter((step) => step.completed);
+  const activeStep = steps.find((step) => step.active);
+  const lastCompletedStep = completedSteps[completedSteps.length - 1];
+  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: [
+        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: [
+            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: [
+            activeStep.order_step_id,
+            ". ",
+            activeStep.title
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__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" }) })
+  ] });
+};
+
+// lib/components/OrderDialog/OrderDialog.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var queryClient = new QueryClient();
 var OrderDialog = ({
   isOpen,
   onClose,
@@ -1923,15 +1939,13 @@ var OrderDialog = ({
   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", {
+    const { order: order2 } = await ky3.post("registry/orders/create", {
       json: {
         circuit_json: circuitJson
       },
@@ -1941,57 +1955,12 @@ var OrderDialog = ({
     }).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 = () => {
+  const handleInitialContinue = async () => {
+    const order2 = await createOrder();
+    setOrder(order2);
     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: [
+  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(
       InitialOrderScreen,
       {
@@ -1999,13 +1968,13 @@ var OrderDialog = ({
         onContinue: handleInitialContinue
       }
     ),
-    stage === "progress" && /* @__PURE__ */ jsx12(
+    stage === "progress" && order?.order_id && /* @__PURE__ */ jsx12(
       StepwiseProgressPanel,
       {
-        steps,
         onCancel: onClose,
-        onContinue: handleProgressContinue,
-        loading
+        loading,
+        orderId: order?.order_id,
+        setStage
       }
     ),
     stage === "checkout" && /* @__PURE__ */ jsx12(
@@ -2013,14 +1982,30 @@ var OrderDialog = ({
       {
         finalCost: 0,
         onConfirmCheckout: () => onClose(),
-        onBack: () => setStage("progress")
+        onCancel: () => onClose()
       }
     )
-  ] }) }) });
+  ] }) }) }) });
 };
 
 // lib/components/OrderDialog/useOrderDialog.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
+var OrderDialogComponent = ({
+  isOpen,
+  onClose,
+  stage,
+  setStage
+}) => {
+  return /* @__PURE__ */ jsx13(
+    OrderDialog,
+    {
+      isOpen,
+      onClose,
+      stage,
+      setStage
+    }
+  );
+};
 var useOrderDialog = () => {
   const [isOpen, setIsOpen] = useState8(false);
   const [stage, setStage] = useState8("initial");
@@ -2036,22 +2021,13 @@ var useOrderDialog = () => {
     open: () => setIsOpen(true),
     close: handleClose,
     setStage,
-    OrderDialog: () => {
-      return /* @__PURE__ */ jsx13(
-        OrderDialog,
-        {
-          isOpen,
-          onClose: handleClose,
-          stage,
-          setStage
-        }
-      );
-    }
+    OrderDialog: OrderDialogComponent
+    // returns reference and not factory
   };
 };
 
 // lib/components/RunFrameForCli/LeftHeader.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 var RunframeCliLeftHeader = (props) => {
   const lastRunEvalVersion = useRunnerStore((s) => s.lastRunEvalVersion);
   const [snippetName, setSnippetName] = useState9(null);
@@ -2142,7 +2118,7 @@ var RunframeCliLeftHeader = (props) => {
   };
   const circuitJson = useRunFrameStore((state) => state.circuitJson);
   const [isImportDialogOpen, setIsImportDialogOpen] = useState9(false);
-  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs10(Fragment2, { 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: [
@@ -2299,7 +2275,15 @@ var RunframeCliLeftHeader = (props) => {
       }
     ),
     /* @__PURE__ */ jsx14(Toaster, { position: "top-center", reverseOrder: false }),
-    /* @__PURE__ */ jsx14(orderDialog.OrderDialog, {})
+    /* @__PURE__ */ jsx14(
+      orderDialog.OrderDialog,
+      {
+        isOpen: orderDialog.isOpen,
+        onClose: orderDialog.close,
+        stage: orderDialog.stage,
+        setStage: orderDialog.setStage
+      }
+    )
   ] });
 };