@tscircuit/runframe 0.0.11 → 0.0.12

package/lib/components/CircuitJsonTableViewer/Modal.tsx

@@ -1,38 +0,0 @@
-import type React from "react"
-
-interface ModalProps {
-  open: boolean
-  children: React.ReactNode
-  title: string
-  onClose: () => void
-}
-
-const Modal: React.FC<ModalProps> = ({ open, children, title, onClose }) => {
-  if (!open) return null
-
-  return (
-    <div
-      className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
-      onClick={onClose}
-    >
-      <div
-        className="bg-white p-5 rounded-lg relative w-11/12 max-w-2xl"
-        onClick={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-        }}
-      >
-        <h2 className="mt-0 text-xl">{title}</h2>
-        <button
-          className="absolute top-4 right-4 text-2xl font-bold"
-          onClick={onClose}
-        >
-          &times;
-        </button>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default Modal

package/lib/components/ErrorFallback.tsx

@@ -1,25 +0,0 @@
-import React from "react"
-
-export const ErrorFallback = ({ error }: { error: Error }) => {
-  return (
-    <div
-      data-testid="error-container"
-      className="error-container mt-4 bg-red-50 rounded-md border border-red-200"
-    >
-      <div className="p-4">
-        <h2 className="text-lg font-semibold text-red-800 mb-3">
-          Error Loading 3D Viewer
-        </h2>
-        <p className="text-xs font-mono whitespace-pre-wrap text-red-700">
-          {error.message}
-        </p>
-        <details
-          style={{ whiteSpace: "pre-wrap" }}
-          className="text-xs font-mono text-red-600 mt-2"
-        >
-          {error.stack}
-        </details>
-      </div>
-    </div>
-  )
-}

package/lib/components/ErrorTabContent.tsx

@@ -1,86 +0,0 @@
-import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import { ClipboardIcon } from "lucide-react"
-import { Button } from "lib/components/ui/button"
-
-export const ErrorTabContent = ({
-  code,
-  isStreaming,
-  errorMessage,
-}: {
-  code?: string
-  isStreaming?: boolean
-  errorMessage?: string | null
-}) => {
-  if (!errorMessage) {
-    return (
-      <div className="mt-4 bg-green-50 rounded-md border border-green-200">
-        <div className="p-4">
-          <h3 className="text-lg font-semibold text-green-800 mb-3">
-            No Errors 👌
-          </h3>
-          <p className="text-sm text-green-700">
-            Your code is running without any errors.
-          </p>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className="mt-4 bg-red-50 rounded-md border border-red-200 max-h-[500px] overflow-y-auto">
-        <div className="p-4">
-          <h3 className="text-lg font-semibold text-red-800 mb-3">Error</h3>
-          <p className="text-xs font-mono whitespace-pre-wrap text-red-600 mt-2">
-            {errorMessage}
-          </p>
-        </div>
-      </div>
-      <div className="flex gap-2 mt-4 justify-end">
-        <Button
-          variant="outline"
-          onClick={() => {
-            if (!errorMessage) return
-            navigator.clipboard.writeText(errorMessage)
-            alert("Error copied to clipboard!")
-          }}
-        >
-          <ClipboardIcon className="w-4 h-4 mr-2" />
-          Copy Error
-        </Button>
-        <Button
-          variant="outline"
-          onClick={() => {
-            window.alert(
-              "Not supported yet! Please report/upvote an issue on github.com/tscircuit/tscircuit",
-            )
-            // const title = `Error: ${errorMessage
-            //   .replace("Render Error:", "")
-            //   .replace(/\"_errors\":\[\]/g, "")
-            //   .replace(/\{,/g, "{")
-            //   .replace(/"_errors":\[/g, "")
-            //   .replace(/[^a-zA-Z0-9 ]/g, " ")
-            //   .replace(/\s+/g, " ")
-            //   .replace(/ \d+ /g, " ")
-            //   .slice(0, 100)}`
-            // const url = encodeTextToUrlHash(code ?? "").replace(
-            //   "http://localhost:5173",
-            //   "https://snippets.tscircuit.com",
-            // )
-            // let body = `[Snippet code to reproduce](${url})\n\n### Error\n\`\`\`\n${errorMessage.slice(0, 600)}\n\`\`\``
-            // if (body.length > 4000) {
-            //   body = `\`\`\`tsx\n// Please paste the code here\`\`\`\n\n### Error\n\`\`\`\n${errorMessage.slice(0, 2000)}\n\`\`\``
-            // }
-            // window.open(
-            //   `https://github.com/tscircuit/snippets/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`,
-            //   "_blank",
-            // )
-          }}
-        >
-          <GitHubLogoIcon className="w-4 h-4 mr-2" />
-          Report Issue
-        </Button>
-      </div>
-    </>
-  )
-}

package/lib/components/PcbViewerWithContainerHeight.tsx

@@ -1,47 +0,0 @@
-import { useRef, useState, useLayoutEffect, type ComponentProps } from "react"
-import { PCBViewer } from "@tscircuit/pcb-viewer"
-
-export const PcbViewerWithContainerHeight = ({
-  containerClassName,
-  ...props
-}: {
-  containerClassName?: string
-} & ComponentProps<typeof PCBViewer>) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [computedHeight, setComputedHeight] = useState(620)
-
-  useLayoutEffect(() => {
-    const updateHeight = () => {
-      if (containerRef.current) {
-        const containerHeight = containerRef.current.clientHeight
-        const screenHeight = window.innerHeight
-        setComputedHeight(
-          Math.min(Math.max(containerHeight, 620), screenHeight),
-        )
-      }
-    }
-
-    // Immediate synchronous calculation
-    updateHeight()
-
-    // Resize listener for dynamic changes
-    const resizeObserver = new ResizeObserver(updateHeight)
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current)
-    }
-
-    // Fallback for window resize
-    window.addEventListener("resize", updateHeight)
-
-    return () => {
-      resizeObserver.disconnect()
-      window.removeEventListener("resize", updateHeight)
-    }
-  }, [])
-
-  return (
-    <div ref={containerRef} className={containerClassName || "w-full h-full"}>
-      <PCBViewer {...props} height={computedHeight} />
-    </div>
-  )
-}

package/lib/components/PreviewEmptyState.tsx

@@ -1,14 +0,0 @@
-import { Button } from "lib/components/ui/button"
-import { PlayIcon } from "lucide-react"
-
-const PreviewEmptyState = ({ onRunClicked }: { onRunClicked: () => void }) => (
-  <div className="flex items-center gap-3 bg-gray-100 text-center justify-center py-10">
-    No circuit json loaded
-    <Button className="bg-blue-600 hover:bg-blue-500" onClick={onRunClicked}>
-      Run Code
-      <PlayIcon className="w-3 h-3 ml-2" />
-    </Button>
-  </div>
-)
-
-export default PreviewEmptyState

package/lib/components/RunFrame.tsx

@@ -1,68 +0,0 @@
-import { createCircuitWebWorker } from "@tscircuit/eval-webworker"
-import { CircuitJsonPreview } from "./CircuitJsonPreview"
-import { useEffect, useState } from "react"
-
-// @ts-ignore
-import evalWebWorkerBlobUrl from "@tscircuit/eval-webworker/blob-url"
-
-interface Props {
-  /**
-   * Map of filenames to file contents that will be available in the worker
-   */
-  fsMap: { [filename: string]: string }
-
-  /**
-   * The entry point file that will be executed first
-   */
-  entrypoint: string
-
-  /**
-   * Called when the circuit JSON changes
-   */
-  onCircuitJsonChange?: (circuitJson: any) => void
-
-  /**
-   * Called when rendering is finished
-   */
-  onRenderingFinished?: (params: { circuitJson: any }) => void
-
-  /**
-   * Called for each render event
-   */
-  onRenderEvent?: (event: any) => void
-
-  /**
-   * Called when an error occurs
-   */
-  onError?: (error: Error) => void
-}
-
-export const RunFrame = (props: Props) => {
-  const [circuitJson, setCircuitJson] = useState<any>(null)
-
-  useEffect(() => {
-    async function runWorker() {
-      const worker = await createCircuitWebWorker({
-        webWorkerUrl: evalWebWorkerBlobUrl,
-        verbose: true,
-      })
-      const $finished = worker.executeWithFsMap({
-        entrypoint: props.entrypoint,
-        fsMap: props.fsMap,
-      })
-      console.log("waiting for execution to finish...")
-      await $finished
-      console.log("waiting for initial circuit json...")
-      setCircuitJson(await worker.getCircuitJson())
-      console.log("got initial circuit json")
-      await $finished.catch((e) => {
-        console.error(e)
-      })
-      setCircuitJson(await worker.getCircuitJson())
-    }
-    runWorker()
-  }, [props.fsMap])
-
-  console.log({ circuitJson })
-  return <CircuitJsonPreview circuitJson={circuitJson} />
-}

package/lib/components/RunFrameWithApi/index.tsx

@@ -1,44 +0,0 @@
-import { useEffect } from "react"
-import { RunFrame } from "../RunFrame"
-import { useRunFrameStore, selectCurrentFileMap } from "./store"
-import type { RunFrameWithApiProps } from "./types"
-
-const guessEntrypoint = (files: string[]) =>
-  files.find((file) => file.includes("entrypoint.")) ??
-  files.find((file) => file.includes("index.")) ??
-  files.find((file) => file.includes("main.")) ??
-  files.find((file) => file.endsWith(".tsx"))
-
-export const RunFrameWithApi = ({ apiBaseUrl }: RunFrameWithApiProps) => {
-  const { startPolling, stopPolling } = useRunFrameStore()
-  const fsMap = useRunFrameStore(selectCurrentFileMap)
-
-  // Initialize API base URL
-  useEffect(() => {
-    if (apiBaseUrl) {
-      window.API_BASE_URL = apiBaseUrl
-    }
-  }, [apiBaseUrl])
-
-  // Start/stop polling
-  useEffect(() => {
-    startPolling()
-    return () => stopPolling()
-  }, [startPolling, stopPolling])
-
-  const entrypoint = guessEntrypoint(Object.keys(fsMap)) ?? "entrypoint.tsx"
-
-  if (!fsMap[entrypoint]) {
-    return <div>No entrypoint found for Run Frame!</div>
-  }
-
-  return (
-    <RunFrame
-      fsMap={fsMap}
-      entrypoint={entrypoint}
-      onError={(error) => {
-        console.error("RunFrame error:", error)
-      }}
-    />
-  )
-}

package/lib/components/RunFrameWithApi/standalone.tsx

@@ -1,6 +0,0 @@
-import { createRoot } from "react-dom/client"
-import { RunFrameWithApi } from "./index"
-
-const root = createRoot(document.getElementById("root")!)
-
-root.render(<RunFrameWithApi />)

package/lib/components/RunFrameWithApi/store.ts

@@ -1,122 +0,0 @@
-import { create } from "zustand"
-import { devtools } from "zustand/middleware"
-import type {
-  FilePath,
-  FileContent,
-  File,
-  FileEvent,
-  RunFrameState,
-} from "./types"
-
-const API_BASE = window.API_BASE_URL ?? "/api"
-
-async function upsertFileApi(
-  path: FilePath,
-  content: FileContent,
-): Promise<File> {
-  const response = await fetch(`${API_BASE}/files/upsert`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ file_path: path, text_content: content }),
-  })
-  const data = await response.json()
-  return data.file
-}
-
-async function getFileApi(path: FilePath): Promise<File> {
-  const response = await fetch(
-    `${API_BASE}/files/get?file_path=${encodeURIComponent(path)}`,
-  )
-  const data = await response.json()
-  return data.file
-}
-
-async function getEvents(since: string | null): Promise<FileEvent[]> {
-  const url = since
-    ? `${API_BASE}/events/list?since=${encodeURIComponent(since)}`
-    : `${API_BASE}/events/list`
-  const response = await fetch(url)
-  const data = await response.json()
-  return data.event_list
-}
-
-// Create store
-export const useRunFrameStore = create<RunFrameState>()(
-  devtools(
-    (set, get) => ({
-      fsMap: new Map(),
-      lastEventTime: null,
-      isPolling: false,
-      error: null,
-
-      upsertFile: async (path, content) => {
-        try {
-          const file = await upsertFileApi(path, content)
-          set((state) => ({
-            fsMap: new Map(state.fsMap).set(file.file_path, file.text_content),
-          }))
-        } catch (error) {
-          set({ error: error as Error })
-        }
-      },
-
-      getFile: async (path) => {
-        try {
-          const file = await getFileApi(path)
-          set((state) => ({
-            fsMap: new Map(state.fsMap).set(file.file_path, file.text_content),
-          }))
-        } catch (error) {
-          set({ error: error as Error })
-        }
-      },
-
-      startPolling: () => {
-        const poll = async () => {
-          const state = get()
-          if (!state.isPolling) return
-
-          try {
-            const events = await getEvents(state.lastEventTime)
-
-            if (events.length > 0) {
-              // Update lastEventTime to most recent event
-              const newLastEventTime = events[events.length - 1].created_at
-
-              // Process all file updates
-              const updates = new Map(state.fsMap)
-              for (const event of events) {
-                if (event.event_type === "FILE_UPDATED") {
-                  const file = await getFileApi(event.file_path)
-                  updates.set(file.file_path, file.text_content)
-                }
-              }
-
-              set({
-                fsMap: updates,
-                lastEventTime: newLastEventTime,
-              })
-            }
-          } catch (error) {
-            set({ error: error as Error })
-          }
-
-          // Schedule next poll
-          setTimeout(poll, 1000)
-        }
-
-        set({ isPolling: true })
-        poll()
-      },
-
-      stopPolling: () => {
-        set({ isPolling: false })
-      },
-    }),
-    { name: "run-frame-store" },
-  ),
-)
-
-// Export selector for current file map
-export const selectCurrentFileMap = (state: RunFrameState) =>
-  Object.fromEntries(state.fsMap.entries())

package/lib/components/RunFrameWithApi/types.ts

@@ -1,43 +0,0 @@
-// Types
-export type FilePath = string
-export type FileContent = string
-export type FileId = string
-
-export interface File {
-  file_id: FileId
-  file_path: FilePath
-  text_content: FileContent
-}
-
-export interface FileEvent {
-  event_id: string
-  event_type: "FILE_UPDATED"
-  file_path: FilePath
-  created_at: string
-}
-
-export interface RunFrameState {
-  fsMap: Map<FilePath, FileContent>
-  lastEventTime: string | null
-  isPolling: boolean
-  error: Error | null
-
-  // Actions
-  upsertFile: (path: FilePath, content: FileContent) => Promise<void>
-  getFile: (path: FilePath) => Promise<void>
-  startPolling: () => void
-  stopPolling: () => void
-}
-
-export interface RunFrameWithApiProps {
-  /**
-   * Base URL for the API endpoints
-   */
-  apiBaseUrl?: string
-}
-
-declare global {
-  interface Window {
-    API_BASE_URL: string
-  }
-}

package/lib/components/ui/button.tsx

@@ -1,57 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:pointer-events-none disabled:opacity-50 dark:focus-visible:ring-slate-300",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-slate-900 text-slate-50 shadow hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
-        destructive:
-          "bg-red-500 text-slate-50 shadow-sm hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
-        outline:
-          "border border-slate-200 bg-white shadow-sm hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
-        secondary:
-          "bg-slate-100 text-slate-900 shadow-sm hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
-        ghost:
-          "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
-        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-)
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  },
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }