@tscircuit/runframe 0.0.105 → 0.0.107

package/dist/preview.d.ts

@@ -18,7 +18,7 @@ interface RenderLog {
     phaseTimings?: Record<string, number>;
 }
 
-type TabId = "code" | "pcb" | "schematic" | "assembly" | "cad" | "bom" | "circuitjson" | "error" | "render_log";
+type TabId = "code" | "pcb" | "schematic" | "assembly" | "cad" | "bom" | "circuit_json" | "errors" | "render_log";
 interface PreviewContentProps {
     code?: string;
     readOnly?: boolean;

package/dist/preview.js

@@ -1,6 +1,6 @@
 import {
   CircuitJsonPreview
-} from "./chunk-7F2R7RXD.js";
+} from "./chunk-WUXAA7XM.js";
 export {
   CircuitJsonPreview
 };

package/dist/runner.d.ts

@@ -16,6 +16,10 @@ interface Props {
      * The entry point file that will be executed first
      */
     entrypoint: string;
+    /**
+     * Whether to show a run button that controls when code executes
+     */
+    showRunButton?: boolean;
     /**
      * An optional left-side header, you can put a save button, a run button, or
      * a title here.

package/dist/runner.js

@@ -1,11 +1,12 @@
 import {
   CircuitJsonPreview
-} from "./chunk-7F2R7RXD.js";
+} from "./chunk-WUXAA7XM.js";
 
 // lib/components/RunFrame.tsx
 import { createCircuitWebWorker } from "@tscircuit/eval-webworker";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useReducer, useRef, useState } from "react";
 import Debug2 from "debug";
+import { Loader2, Play } from "lucide-react";
 import evalWebWorkerBlobUrl from "@tscircuit/eval-webworker/blob-url";
 
 // lib/components/RunFrameWithApi/store.ts
@@ -223,7 +224,7 @@ var getPhaseTimingsFromRenderEvents = (renderEvents) => {
 };
 
 // lib/components/RunFrame.tsx
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var numRenderPhases = 26;
 var debug3 = Debug2("run-frame:RunFrame");
 var RunFrame = (props) => {
@@ -232,6 +233,12 @@ var RunFrame = (props) => {
     s.setCircuitJson
   ]);
   const [error, setError] = useState(null);
+  const [runCountTrigger, incRunCountTrigger] = useReducer(
+    (acc, s) => acc + 1,
+    0
+  );
+  const lastRunCountTriggerRef = useRef(0);
+  const [isRunning, setIsRunning] = useState(false);
   const [renderLog, setRenderLog] = useState(null);
   const [activeTab, setActiveTab] = useState(
     props.defaultActiveTab ?? "pcb"
@@ -247,19 +254,24 @@ var RunFrame = (props) => {
   const lastEntrypointRef = useRef(null);
   useEffect(() => {
     if (!fsMap) return;
+    const wasTriggeredByRunButton = props.showRunButton && runCountTrigger !== lastRunCountTriggerRef.current;
     if (lastFsMapRef.current && circuitJson) {
       const changes = getChangesBetweenFsMaps(lastFsMapRef.current, fsMap);
       if (Object.keys(changes).length > 0) {
-        debug3("render triggered by changes:", changes);
+        debug3("code changes detected");
       } else if (lastEntrypointRef.current !== props.entrypoint) {
         debug3("render triggered by entrypoint change");
-      } else {
+      } else if (!wasTriggeredByRunButton) {
         debug3("render triggered without changes to fsMap, skipping");
         return;
       }
     }
+    if (props.showRunButton && runCountTrigger === lastRunCountTriggerRef.current) {
+      return;
+    }
     lastFsMapRef.current = fsMap;
     lastEntrypointRef.current = props.entrypoint;
+    setIsRunning(true);
     async function runWorker() {
       debug3("running render worker");
       setError(null);
@@ -322,6 +334,7 @@ var RunFrame = (props) => {
         debug3("error getting initial circuit json", e);
         props.onError?.(e);
         setError({ error: e.message, stack: e.stack });
+        setIsRunning(false);
         return null;
       });
       if (!circuitJson2) return;
@@ -342,14 +355,33 @@ var RunFrame = (props) => {
       }
       renderLog2.progress = 1;
       setRenderLog({ ...renderLog2 });
+      setIsRunning(false);
     }
     runWorker();
-  }, [props.fsMap, props.entrypoint]);
+  }, [props.fsMap, props.entrypoint, runCountTrigger]);
   return /* @__PURE__ */ jsx(
     CircuitJsonPreview,
     {
       defaultActiveTab: props.defaultActiveTab,
-      leftHeaderContent: props.leftHeaderContent,
+      leftHeaderContent: /* @__PURE__ */ jsxs(Fragment, { children: [
+        props.showRunButton && /* @__PURE__ */ jsxs(
+          "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 rf-text-white rf-rounded-md rf-mr-2 disabled:rf-opacity-50",
+            disabled: isRunning,
+            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" })
+            ]
+          }
+        ),
+        props.leftHeaderContent
+      ] }),
       onActiveTabChange: setActiveTab,
       circuitJson,
       renderLog,
@@ -422,7 +454,7 @@ var useEditEventController = () => {
 
 // lib/components/RunFrameWithApi/RunFrameWithApi.tsx
 import Debug3 from "debug";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var debug5 = Debug3("run-frame:RunFrameWithApi");
 var guessEntrypoint = (files) => files.find((file) => file.includes("entrypoint.")) ?? files.find((file) => file.includes("index.")) ?? files.find((file) => file.includes("main.")) ?? files.find((file) => file.endsWith(".tsx"));
 var RunFrameWithApi = (props) => {
@@ -463,7 +495,7 @@ var RunFrameWithApi = (props) => {
     });
   }, [entrypoint]);
   if (!fsMap.get(entrypoint)) {
-    return /* @__PURE__ */ jsxs("div", { children: [
+    return /* @__PURE__ */ jsxs2("div", { children: [
       "No entrypoint found for Run Frame! Found files:",
       " ",
       Array.from(fsMap.keys()).join(",")
@@ -504,7 +536,7 @@ import { useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } f
 
 // lib/components/RunFrameForCli/SelectSnippetDialog.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var SelectSnippetDialog = ({
   snippetNames,
   onSelect,
@@ -527,20 +559,20 @@ var SelectSnippetDialog = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx3("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[100]", children: /* @__PURE__ */ jsxs2("div", { className: "bg-white rounded-lg p-6 w-96", children: [
-    /* @__PURE__ */ jsx3("h2", { className: "text-lg font-semibold mb-4", children: "Select Snippet" }),
+  return /* @__PURE__ */ jsx3("div", { className: "rf-fixed rf-inset-0 rf-bg-black rf-bg-opacity-50 rf-flex rf-items-center rf-justify-center rf-z-[100]", children: /* @__PURE__ */ jsxs3("div", { className: "rf-bg-white rf-rounded-lg rf-p-6 rf-w-96", children: [
+    /* @__PURE__ */ jsx3("h2", { className: "rf-text-lg rf-font-semibold rf-mb-4", children: "Select Snippet" }),
     /* @__PURE__ */ jsx3(
       "input",
       {
         type: "text",
-        className: "w-full px-4 py-2 border rounded mb-4",
+        className: "rf-w-full rf-px-4 rf-py-2 rf-border rf-rounded rf-mb-4",
         placeholder: "Search snippets or new snippet name...",
         value: searchInput,
         onChange: (e) => setSearchInput(e.target.value),
         onKeyDown: handleKeyDown
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { className: "h-60 overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rf-h-60 rf-overflow-y-auto", children: [
       filteredSnippets.map((name) => /* @__PURE__ */ jsx3(
         "button",
         {
@@ -551,7 +583,7 @@ var SelectSnippetDialog = ({
         },
         name
       )),
-      showCreateNew && /* @__PURE__ */ jsxs2(
+      showCreateNew && /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
@@ -565,12 +597,12 @@ var SelectSnippetDialog = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "mt-4 flex justify-end gap-2", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rf-mt-4 rf-flex rf-justify-end rf-gap-2", children: [
       /* @__PURE__ */ jsx3(
         "button",
         {
           type: "button",
-          className: "px-4 py-2 text-gray-600 hover:text-gray-800",
+          className: "rf-px-4 rf-py-2 rf-text-gray-600 rf-hover:text-gray-800",
           onClick: onCancel,
           children: "Cancel"
         }
@@ -579,7 +611,7 @@ var SelectSnippetDialog = ({
         "button",
         {
           type: "button",
-          className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50",
+          className: "rf-px-4 rf-py-2 rf-bg-blue-500 rf-text-white rf-rounded rf-hover:bg-blue-600 rf-disabled:opacity-50",
           onClick: () => selectedName && onSelect(selectedName),
           disabled: !selectedName,
           children: selectedName === searchInput ? `Create "${selectedName}"` : `Save to ${selectedName}`
@@ -606,7 +638,7 @@ var useEventHandler = (callback) => {
 
 // lib/components/RunFrameForCli/SaveToSnippetsButton.tsx
 import { CheckCircle2 } from "lucide-react";
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var SaveToSnippetsButton = () => {
   const [snippetName, setSnippetName] = useState5(null);
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState5(false);
@@ -659,8 +691,8 @@ var SaveToSnippetsButton = () => {
       setRequestToSaveSentAt(null);
     }
   }, [recentEvents, isSaving]);
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -676,7 +708,7 @@ var SaveToSnippetsButton = () => {
         className: `px-3 flex items-center text-sm py-1.5 rounded-md ${isSaving ? "cursor-not-allowed" : "bg-white border border-gray-300 font-medium text-gray-900 shadow-sm"}`,
         children: [
           isSaving ? "Saving..." : "Save to Snippets",
-          isSaving || hasNeverBeenSaved ? null : /* @__PURE__ */ jsx4("span", { className: "ml-1.5 flex items-center", children: hasUnsavedChanges ? /* @__PURE__ */ jsx4("div", { className: "text-xs bg-orange-400 text-white p-0.5 px-1.5 rounded", children: "unsaved changes" }) : /* @__PURE__ */ jsx4(CheckCircle2, { className: "w-4 h-4 text-green-500" }) })
+          isSaving || hasNeverBeenSaved ? null : /* @__PURE__ */ jsx4("span", { className: "rf-ml-1.5 rf-flex rf-items-center", children: hasUnsavedChanges ? /* @__PURE__ */ jsx4("div", { className: "rf-text-xs rf-bg-orange-400 rf-text-white rf-p-0.5 rf-px-1.5 rf-rounded", children: "unsaved changes" }) : /* @__PURE__ */ jsx4(CheckCircle2, { className: "rf-w-4 rf-h-4 rf-text-green-500" }) })
         ]
       }
     ),