@tscircuit/runframe 0.0.2350 → 0.0.2352

package/dist/{chunk-XOHF4YKS.js → chunk-6DCKAWL6.js}

@@ -2181,7 +2181,7 @@ var usePostHogActivity = (properties) => {
 };
 
 // package.json
-var version = "0.0.2349";
+var version = "0.0.2351";
 var package_default = {
   name: "@tscircuit/runframe",
   main: "dist/preview.js",
@@ -2237,7 +2237,7 @@ var package_default = {
     "@tscircuit/file-server": "^0.0.32",
     "@tscircuit/internal-dynamic-import": "^0.0.8",
     "@tscircuit/pcb-viewer": "1.11.376",
-    "@tscircuit/schematic-viewer": "^2.0.75",
+    "@tscircuit/schematic-viewer": "^2.0.76",
     "@types/bun": "latest",
     "@types/debug": "^4.1.12",
     "@types/react": "^19.1.10",

package/dist/preview.js

@@ -7,7 +7,7 @@ import {
   SchematicViewer,
   useOrderDialog,
   useOrderDialogCli
-} from "./chunk-XOHF4YKS.js";
+} from "./chunk-6DCKAWL6.js";
 export {
   BomTable,
   CadViewer,

package/dist/runner.js

@@ -39,7 +39,7 @@ import {
   useRunFrameStore,
   useRunnerStore,
   useStyles
-} from "./chunk-XOHF4YKS.js";
+} from "./chunk-6DCKAWL6.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -54,7 +54,8 @@ import { AlertTriangle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var RunFrameErrorFallback = ({
   error,
-  resetErrorBoundary
+  resetErrorBoundary,
+  componentStack
 }) => {
   const resolvedError = error instanceof Error ? error : new Error(String(error));
   return /* @__PURE__ */ jsx("section", { className: "rf-h-full rf-w-full rf-grid rf-place-items-center", children: /* @__PURE__ */ jsx("div", { className: "rf-min-h-full rf-flex rf-items-center rf-justify-center rf-px-4", children: /* @__PURE__ */ jsxs("div", { className: "rf-max-w-lg rf-w-full rf-text-center", children: [
@@ -66,6 +67,10 @@ var RunFrameErrorFallback = ({
       resolvedError.stack && /* @__PURE__ */ jsxs("details", { className: "rf-text-center rf-mb-6", children: [
         /* @__PURE__ */ jsx("summary", { className: "rf-text-xs rf-text-gray-500 rf-cursor-pointer hover:rf-text-gray-700", children: "View stack trace" }),
         /* @__PURE__ */ jsx("pre", { className: "rf-text-xs rf-font-mono no-scrollbar rf-whitespace-pre-wrap rf-text-gray-500 rf-bg-gray-100 rf-p-3 rf-rounded-lg rf-mt-2 rf-overflow-auto rf-text-left rf-max-h-[150px]", children: resolvedError.stack })
+      ] }),
+      componentStack && /* @__PURE__ */ jsxs("details", { className: "rf-text-center rf-mb-6", children: [
+        /* @__PURE__ */ jsx("summary", { className: "rf-text-xs rf-text-gray-500 rf-cursor-pointer hover:rf-text-gray-700", children: "View component stack" }),
+        /* @__PURE__ */ jsx("pre", { className: "rf-text-xs rf-font-mono no-scrollbar rf-whitespace-pre-wrap rf-text-gray-500 rf-bg-gray-100 rf-p-3 rf-rounded-lg rf-mt-2 rf-overflow-auto rf-text-left rf-max-h-[150px]", children: componentStack })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "rf-flex rf-flex-col rf-gap-2 rf-justify-center", children: [
@@ -323,6 +328,7 @@ var RunFrame = (props) => {
   const circuitJson = useRunFrameStore((s) => s.circuitJson);
   const setCircuitJson = useRunFrameStore((s) => s.setCircuitJson);
   const [error, setError] = useState(null);
+  const [componentStack, setComponentStack] = useState(null);
   const cancelExecutionRef = useRef2(null);
   const [autoroutingGraphics, setAutoroutingGraphics] = useState(null);
   const [runCountTrigger, incRunCountTrigger] = useReducer(
@@ -740,122 +746,138 @@ var RunFrame = (props) => {
   if (props.isLoadingFiles) {
     return /* @__PURE__ */ jsx3(LoadingSkeleton, {});
   }
-  return /* @__PURE__ */ jsx3(ErrorBoundary, { FallbackComponent: RunFrameErrorFallback, children: /* @__PURE__ */ jsx3(
-    CircuitJsonPreview,
+  return /* @__PURE__ */ jsx3(
+    ErrorBoundary,
     {
-      code: fsMap.get(props.entrypoint ?? props.mainComponentPath),
-      fsMap,
-      defaultActiveTab: props.defaultActiveTab ?? props.defaultTab,
-      defaultTab: props.defaultTab,
-      availableTabs: props.availableTabs,
-      schematicSvgOptions: props.schematicSvgOptions,
-      showToggleFullScreen: props.showToggleFullScreen,
-      autoroutingGraphics,
-      autoroutingLog,
-      onReportAutoroutingLog: props.onReportAutoroutingLog || handleReportAutoroutingLog,
-      leftHeaderContent: /* @__PURE__ */ jsxs3(Fragment, { children: [
-        props.showRunButton && /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsxs3(Tooltip, { children: [
-          /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3("div", { className: "rf-relative rf-inline-flex", children: [
-            /* @__PURE__ */ jsxs3(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  incRunCountTrigger(1);
-                },
-                className: "rf-flex rf-items-center rf-gap-2 rf-px-4 rf-py-2 rf-bg-blue-600 hover:rf-bg-blue-700 rf-text-white rf-rounded-md disabled:rf-opacity-50 transition-colors duration-200",
-                disabled: isRunning || !dependenciesLoaded,
-                children: [
-                  "Run",
-                  " ",
-                  isRunning || !dependenciesLoaded ? /* @__PURE__ */ jsx3(Loader2, { className: "rf-w-3 rf-h-3 rf-animate-spin" }) : /* @__PURE__ */ jsx3(Play, { className: "rf-w-3 rf-h-3" })
-                ]
-              }
-            ),
-            isRunning && /* @__PURE__ */ jsx3("div", { className: "rf-flex rf-items-center rf-ml-1", children: /* @__PURE__ */ jsx3(
-              Button,
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  setIsRunning(false);
-                  setRenderLog(null);
-                  setError(null);
-                  if (cancelExecutionRef.current) {
-                    cancelExecutionRef.current();
-                    cancelExecutionRef.current = null;
-                  }
-                  runMutex.cancel();
-                  setActiveAsyncEffects({});
-                  if (globalThis.runFrameWorker) {
-                    globalThis.runFrameWorker.kill();
-                    globalThis.runFrameWorker = null;
+      onError: (_error, info) => {
+        setComponentStack(info.componentStack ?? null);
+      },
+      onReset: () => setComponentStack(null),
+      fallbackRender: (fallbackProps) => /* @__PURE__ */ jsx3(
+        RunFrameErrorFallback,
+        {
+          ...fallbackProps,
+          componentStack
+        }
+      ),
+      children: /* @__PURE__ */ jsx3(
+        CircuitJsonPreview,
+        {
+          code: fsMap.get(props.entrypoint ?? props.mainComponentPath),
+          fsMap,
+          defaultActiveTab: props.defaultActiveTab ?? props.defaultTab,
+          defaultTab: props.defaultTab,
+          availableTabs: props.availableTabs,
+          schematicSvgOptions: props.schematicSvgOptions,
+          showToggleFullScreen: props.showToggleFullScreen,
+          autoroutingGraphics,
+          autoroutingLog,
+          onReportAutoroutingLog: props.onReportAutoroutingLog || handleReportAutoroutingLog,
+          leftHeaderContent: /* @__PURE__ */ jsxs3(Fragment, { children: [
+            props.showRunButton && /* @__PURE__ */ jsx3(TooltipProvider, { children: /* @__PURE__ */ jsxs3(Tooltip, { children: [
+              /* @__PURE__ */ jsx3(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3("div", { className: "rf-relative rf-inline-flex", children: [
+                /* @__PURE__ */ jsxs3(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      incRunCountTrigger(1);
+                    },
+                    className: "rf-flex rf-items-center rf-gap-2 rf-px-4 rf-py-2 rf-bg-blue-600 hover:rf-bg-blue-700 rf-text-white rf-rounded-md disabled:rf-opacity-50 transition-colors duration-200",
+                    disabled: isRunning || !dependenciesLoaded,
+                    children: [
+                      "Run",
+                      " ",
+                      isRunning || !dependenciesLoaded ? /* @__PURE__ */ jsx3(Loader2, { className: "rf-w-3 rf-h-3 rf-animate-spin" }) : /* @__PURE__ */ jsx3(Play, { className: "rf-w-3 rf-h-3" })
+                    ]
                   }
-                },
-                variant: "ghost",
-                size: "icon",
-                className: "rf-text-red-300 hover:rf-text-red-400 hover:!rf-bg-transparent [&>svg]:rf-text-red-300 [&>svg]:hover:rf-text-red-400 rf-flex rf-items-center rf-justify-center",
-                children: /* @__PURE__ */ jsx3(
-                  Square,
+                ),
+                isRunning && /* @__PURE__ */ jsx3("div", { className: "rf-flex rf-items-center rf-ml-1", children: /* @__PURE__ */ jsx3(
+                  Button,
                   {
-                    className: "!rf-h-2.5 !rf-w-2.5",
-                    fill: "currentColor",
-                    stroke: "currentColor"
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setIsRunning(false);
+                      setRenderLog(null);
+                      setError(null);
+                      if (cancelExecutionRef.current) {
+                        cancelExecutionRef.current();
+                        cancelExecutionRef.current = null;
+                      }
+                      runMutex.cancel();
+                      setActiveAsyncEffects({});
+                      if (globalThis.runFrameWorker) {
+                        globalThis.runFrameWorker.kill();
+                        globalThis.runFrameWorker = null;
+                      }
+                    },
+                    variant: "ghost",
+                    size: "icon",
+                    className: "rf-text-red-300 hover:rf-text-red-400 hover:!rf-bg-transparent [&>svg]:rf-text-red-300 [&>svg]:hover:rf-text-red-400 rf-flex rf-items-center rf-justify-center",
+                    children: /* @__PURE__ */ jsx3(
+                      Square,
+                      {
+                        className: "!rf-h-2.5 !rf-w-2.5",
+                        fill: "currentColor",
+                        stroke: "currentColor"
+                      }
+                    )
                   }
-                )
+                ) })
+              ] }) }),
+              /* @__PURE__ */ jsx3(
+                TooltipContent,
+                {
+                  sideOffset: 8,
+                  className: "rf-p-0 rf-bg-transparent rf-border-none rf-shadow-none rf-pointer-events-none",
+                  children: /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-items-center rf-gap-2 rf-px-2.5 rf-py-1.5 rf-bg-slate-900 rf-rounded-md rf-shadow-xl rf-border rf-border-slate-800/60", children: [
+                    /* @__PURE__ */ jsx3("kbd", { className: "rf-bg-slate-800 rf-px-1.5 rf-py-0.5 rf-rounded rf-text-[10px] rf-font-sans rf-font-medium rf-border rf-border-slate-700 rf-text-slate-200 rf-leading-none", children: "Ctrl" }),
+                    /* @__PURE__ */ jsx3("span", { className: "rf-text-slate-500 rf-text-[11px] rf-font-medium rf-leading-none", children: "+" }),
+                    /* @__PURE__ */ jsx3("kbd", { className: "rf-bg-slate-800 rf-px-1.5 rf-py-0.5 rf-rounded rf-text-[10px] rf-font-sans rf-font-medium rf-border rf-border-slate-700 rf-text-slate-200 rf-leading-none", children: "Enter" })
+                  ] })
+                }
+              )
+            ] }) }),
+            props.showFileMenu !== false && /* @__PURE__ */ jsx3(
+              FileMenuLeftHeader,
+              {
+                isWebEmbedded: props.isWebEmbedded,
+                onLoginRequired: props.onLoginRequired,
+                showSchematicDebugGrid,
+                onChangeShowSchematicDebugGrid: setShowSchematicDebugGrid,
+                showSchematicPorts,
+                onChangeShowSchematicPorts: setShowSchematicPorts,
+                autoroutingLog,
+                onReportAutoroutingLog: props.onReportAutoroutingLog || handleReportAutoroutingLog
               }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsx3(
-            TooltipContent,
-            {
-              sideOffset: 8,
-              className: "rf-p-0 rf-bg-transparent rf-border-none rf-shadow-none rf-pointer-events-none",
-              children: /* @__PURE__ */ jsxs3("div", { className: "rf-flex rf-items-center rf-gap-2 rf-px-2.5 rf-py-1.5 rf-bg-slate-900 rf-rounded-md rf-shadow-xl rf-border rf-border-slate-800/60", children: [
-                /* @__PURE__ */ jsx3("kbd", { className: "rf-bg-slate-800 rf-px-1.5 rf-py-0.5 rf-rounded rf-text-[10px] rf-font-sans rf-font-medium rf-border rf-border-slate-700 rf-text-slate-200 rf-leading-none", children: "Ctrl" }),
-                /* @__PURE__ */ jsx3("span", { className: "rf-text-slate-500 rf-text-[11px] rf-font-medium rf-leading-none", children: "+" }),
-                /* @__PURE__ */ jsx3("kbd", { className: "rf-bg-slate-800 rf-px-1.5 rf-py-0.5 rf-rounded rf-text-[10px] rf-font-sans rf-font-medium rf-border rf-border-slate-700 rf-text-slate-200 rf-leading-none", children: "Enter" })
-              ] })
-            }
-          )
-        ] }) }),
-        props.showFileMenu !== false && /* @__PURE__ */ jsx3(
-          FileMenuLeftHeader,
-          {
-            isWebEmbedded: props.isWebEmbedded,
-            onLoginRequired: props.onLoginRequired,
-            showSchematicDebugGrid,
-            onChangeShowSchematicDebugGrid: setShowSchematicDebugGrid,
-            showSchematicPorts,
-            onChangeShowSchematicPorts: setShowSchematicPorts,
-            autoroutingLog,
-            onReportAutoroutingLog: props.onReportAutoroutingLog || handleReportAutoroutingLog
-          }
-        ),
-        props.leftHeaderContent
-      ] }),
-      onActiveTabChange: setActiveTab,
-      circuitJson,
-      renderLog,
-      activeEffectName,
-      isRunningCode: isRunning,
-      errorMessage: error?.error,
-      errorStack: error?.stack,
-      onEditEvent: handleEditEvent,
-      editEvents: props.editEvents,
-      onPcbBoundsSelected: props.onPcbBoundsSelected,
-      defaultToFullScreen: props.defaultToFullScreen,
-      onRerunWithDebug: (debugOption) => {
-        setCurrentDebugOption(debugOption || "");
-        incRunCountTrigger(1);
-      },
-      solverEvents,
-      isCli: props.isCli,
-      showSchematicDebugGrid,
-      showSchematicPorts,
-      onChangeShowSchematicDebugGrid: setShowSchematicDebugGrid,
-      onChangeShowSchematicPorts: setShowSchematicPorts
+            ),
+            props.leftHeaderContent
+          ] }),
+          onActiveTabChange: setActiveTab,
+          circuitJson,
+          renderLog,
+          activeEffectName,
+          isRunningCode: isRunning,
+          errorMessage: error?.error,
+          errorStack: error?.stack,
+          onEditEvent: handleEditEvent,
+          editEvents: props.editEvents,
+          onPcbBoundsSelected: props.onPcbBoundsSelected,
+          defaultToFullScreen: props.defaultToFullScreen,
+          onRerunWithDebug: (debugOption) => {
+            setCurrentDebugOption(debugOption || "");
+            incRunCountTrigger(1);
+          },
+          solverEvents,
+          isCli: props.isCli,
+          showSchematicDebugGrid,
+          showSchematicPorts,
+          onChangeShowSchematicDebugGrid: setShowSchematicDebugGrid,
+          onChangeShowSchematicPorts: setShowSchematicPorts
+        }
+      )
     }
-  ) });
+  );
 };
 
 // lib/components/RunFrameWithApi/RunFrameWithApi.tsx