@tscircuit/runframe 0.0.558 → 0.0.560

package/dist/{chunk-AEWBBJRD.js → chunk-7VN46VEY.js}

@@ -1105,7 +1105,7 @@ var RenderLogViewer = ({
 };
 
 // package.json
-var version = "0.0.557";
+var version = "0.0.559";
 
 // lib/components/CircuitJsonPreview/CircuitJsonPreview.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -1146,7 +1146,8 @@ var CircuitJsonPreview = ({
   autoRotate3dViewerDisabled,
   showSchematicDebugGrid = false,
   showToggleFullScreen = true,
-  defaultToFullScreen = false
+  defaultToFullScreen = false,
+  activeEffectName
 }) => {
   useStyles();
   const circuitJsonErrors = useMemo2(() => {
@@ -1213,7 +1214,7 @@ var CircuitJsonPreview = ({
                       !leftHeaderContent && isRunningCode && /* @__PURE__ */ jsx16(Loader2, { className: "rf-w-4 rf-h-4 rf-animate-spin" }),
                       !leftHeaderContent && /* @__PURE__ */ jsx16("div", { className: "rf-flex-grow" }),
                       renderLog && renderLog.progress !== 1 && !errorMessage && /* @__PURE__ */ jsxs12("div", { className: "rf-flex rf-items-center rf-gap-2", children: [
-                        renderLog.lastRenderEvent && /* @__PURE__ */ jsx16("div", { className: "rf-text-xs rf-text-gray-500", children: renderLog.lastRenderEvent?.phase ?? "" }),
+                        activeEffectName ? /* @__PURE__ */ jsx16("div", { className: "rf-text-xs rf-text-gray-500", children: activeEffectName }) : renderLog.lastRenderEvent && /* @__PURE__ */ jsx16("div", { className: "rf-text-xs rf-text-gray-500", children: renderLog.lastRenderEvent?.phase ?? "" }),
                         /* @__PURE__ */ jsx16("div", { className: "rf-w-4 rf-h-4 rf-bg-blue-500 rf-opacity-50 rf-rounded-full rf-text-white", children: /* @__PURE__ */ jsx16(LoaderCircleIcon, { className: "rf-w-4 rf-h-4 rf-animate-spin" }) }),
                         /* @__PURE__ */ jsxs12("div", { className: "rf-text-xs rf-font-bold rf-text-gray-700 rf-tabular-nums", children: [
                           ((renderLog.progress ?? 0) * 100).toFixed(1),

package/dist/preview.d.ts

@@ -67,6 +67,10 @@ interface PreviewContentProps {
     hasCodeChangedSinceLastRun?: boolean;
     defaultActiveTab?: TabId;
     renderLog?: RenderLog | null;
+    /**
+     * Name of the currently running async effect from @tscircuit/core, if any
+     */
+    activeEffectName?: string;
     onEditEvent?: (editEvent: ManualEditEvent) => void;
     editEvents?: ManualEditEvent[];
     onActiveTabChange?: (tab: TabId) => any;
@@ -83,7 +87,7 @@ declare global {
     }
 }
 
-declare const CircuitJsonPreview: ({ code, onRunClicked, errorMessage, errorStack, circuitJson, autoroutingGraphics, showRightHeaderContent, showCodeTab, codeTabContent, showJsonTab, showRenderLogTab, onActiveTabChange, renderLog, showImportAndFormatButtons, className, headerClassName, leftHeaderContent, readOnly, isStreaming, autoroutingLog, onReportAutoroutingLog, isRunningCode, hasCodeChangedSinceLastRun, onEditEvent, editEvents, defaultActiveTab, autoRotate3dViewerDisabled, showSchematicDebugGrid, showToggleFullScreen, defaultToFullScreen, }: PreviewContentProps) => react_jsx_runtime.JSX.Element;
+declare const CircuitJsonPreview: ({ code, onRunClicked, errorMessage, errorStack, circuitJson, autoroutingGraphics, showRightHeaderContent, showCodeTab, codeTabContent, showJsonTab, showRenderLogTab, onActiveTabChange, renderLog, showImportAndFormatButtons, className, headerClassName, leftHeaderContent, readOnly, isStreaming, autoroutingLog, onReportAutoroutingLog, isRunningCode, hasCodeChangedSinceLastRun, onEditEvent, editEvents, defaultActiveTab, autoRotate3dViewerDisabled, showSchematicDebugGrid, showToggleFullScreen, defaultToFullScreen, activeEffectName, }: PreviewContentProps) => react_jsx_runtime.JSX.Element;
 
 interface BomTableProps {
     circuitJson: AnyCircuitElement[];

package/dist/preview.js

@@ -8,7 +8,7 @@ import {
   linkify,
   useOrderDialog,
   useOrderDialogCli
-} from "./chunk-AEWBBJRD.js";
+} from "./chunk-7VN46VEY.js";
 export {
   BomTable,
   CadViewer,

package/dist/runner.js

@@ -27,7 +27,7 @@ import {
   useOrderDialog,
   useOrderDialogCli,
   useRunFrameStore
-} from "./chunk-AEWBBJRD.js";
+} from "./chunk-7VN46VEY.js";
 
 // lib/components/RunFrame/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval/worker";
@@ -164,6 +164,11 @@ var RunFrame = (props) => {
   const lastRunCountTriggerRef = useRef2(0);
   const runMutex = useMutex();
   const [isRunning, setIsRunning] = useState(false);
+  const [dependenciesLoaded, setDependenciesLoaded] = useState(false);
+  const [activeAsyncEffects, setActiveAsyncEffects] = useState({});
+  const activeEffectName = Object.values(activeAsyncEffects).sort(
+    (a, b) => a.startTime - b.startTime
+  )[0]?.effectName;
   useEffect(() => {
     const handleKeyDown = (e) => {
       if ((e.ctrlKey || e.metaKey) && e.key === "Enter" && !isRunning) {
@@ -173,6 +178,29 @@ var RunFrame = (props) => {
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isRunning]);
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      try {
+        if (!globalThis.runFrameWorker) {
+          const worker = await createCircuitWebWorker({
+            evalVersion: props.evalVersion ?? "latest",
+            webWorkerBlobUrl: props.evalWebWorkerBlobUrl,
+            verbose: true
+          });
+          if (cancelled) return;
+          globalThis.runFrameWorker = worker;
+        }
+        if (!cancelled) setDependenciesLoaded(true);
+      } catch (err) {
+        console.error("Failed to preload eval worker", err);
+      }
+    };
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [props.evalVersion, props.evalWebWorkerBlobUrl]);
   const [renderLog, setRenderLog] = useState(null);
   const [autoroutingLog, setAutoroutingLog] = useState({});
   const [activeTab, setActiveTab] = useState(
@@ -220,6 +248,7 @@ var RunFrame = (props) => {
       debug("running render worker");
       setError(null);
       setRenderLog(null);
+      setActiveAsyncEffects({});
       const renderLog2 = { progress: 0 };
       let cancelled = false;
       cancelExecutionRef.current = () => {
@@ -252,6 +281,20 @@ var RunFrame = (props) => {
       const renderIds = /* @__PURE__ */ new Set();
       const startRenderTime = Date.now();
       let lastRenderLogSet = Date.now();
+      worker.on("asyncEffect:start", (event) => {
+        const id = `${event.phase}|${event.componentDisplayName ?? ""}|${event.effectName}`;
+        setActiveAsyncEffects((effects) => ({
+          ...effects,
+          [id]: { ...event, startTime: Date.now() }
+        }));
+      });
+      worker.on("asyncEffect:end", (event) => {
+        const id = `${event.phase}|${event.componentDisplayName ?? ""}|${event.effectName}`;
+        setActiveAsyncEffects((effects) => {
+          const { [id]: _removed, ...rest } = effects;
+          return rest;
+        });
+      });
       worker.on("autorouting:start", (event) => {
         setAutoroutingLog({
           ...autoroutingLog,
@@ -306,6 +349,7 @@ var RunFrame = (props) => {
       });
       if (!evalResult.success) {
         setIsRunning(false);
+        setActiveAsyncEffects({});
         return;
       }
       const $renderResult = worker.renderUntilSettled();
@@ -316,6 +360,7 @@ var RunFrame = (props) => {
         setError({ error: e.message, stack: e.stack });
         setRenderLog(null);
         setIsRunning(false);
+        setActiveAsyncEffects({});
         return null;
       });
       if (!circuitJson2) return;
@@ -340,6 +385,7 @@ var RunFrame = (props) => {
         setRenderLog({ ...renderLog2 });
       }
       setIsRunning(false);
+      setActiveAsyncEffects({});
       cancelExecutionRef.current = null;
     };
     runMutex.runWithMutex(runWorker);
@@ -416,11 +462,11 @@ var RunFrame = (props) => {
                 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,
+              disabled: isRunning || !dependenciesLoaded,
               children: [
                 "Run",
                 " ",
-                isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "rf-w-3 rf-h-3 rf-animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "rf-w-3 rf-h-3" })
+                isRunning || !dependenciesLoaded ? /* @__PURE__ */ jsx(Loader2, { className: "rf-w-3 rf-h-3 rf-animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "rf-w-3 rf-h-3" })
               ]
             }
           ),
@@ -437,6 +483,7 @@ var RunFrame = (props) => {
                   cancelExecutionRef.current = null;
                 }
                 runMutex.cancel();
+                setActiveAsyncEffects({});
                 if (globalThis.runFrameWorker) {
                   globalThis.runFrameWorker.kill();
                   globalThis.runFrameWorker = null;
@@ -461,6 +508,7 @@ var RunFrame = (props) => {
       onActiveTabChange: setActiveTab,
       circuitJson,
       renderLog,
+      activeEffectName,
       isRunningCode: isRunning,
       errorMessage: error?.error,
       errorStack: error?.stack,