@tscircuit/runframe 0.0.1

package/lib/components/RunFrameWithApi/store.ts

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,43 @@
+// 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

@@ -0,0 +1,57 @@
+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 }

package/lib/components/ui/dropdown-menu.tsx

@@ -0,0 +1,203 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white p-1 text-slate-950 shadow-md dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

package/lib/components/ui/tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/lib/dev/render-to-circuit-json.ts

@@ -0,0 +1,7 @@
+import * as Core from "@tscircuit/core"
+
+export const renderToCircuitJson = (board: React.ReactElement) => {
+  const circuit = new Core.Circuit()
+  circuit.add(board)
+  return circuit.getCircuitJson()
+}

package/lib/hooks/use-styles.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react"
+import styles from "./styles.generated"
+
+export const useStyles = () => {
+  useEffect(() => {
+    // Check if styles are already added
+    const existingStyle = document.querySelector(
+      'style[data-styles="tscircuit-runframe"]',
+    )
+    if (existingStyle) return
+
+    const styleElement = document.createElement("style")
+    styleElement.setAttribute("data-styles", "tscircuit-runframe")
+    styleElement.textContent = styles
+    document.head.appendChild(styleElement)
+  }, [])
+}

package/lib/preview.ts

@@ -0,0 +1 @@
+export * from "./components/CircuitJsonPreview"

package/lib/runner.ts

@@ -0,0 +1,2 @@
+export * from "./preview"
+export * from "./components/RunFrame"

package/lib/utils/index.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/lib/utils/pcbManualEditEventHandler.ts

@@ -0,0 +1,156 @@
+import type { ManualTraceHint } from "@tscircuit/layout"
+import { getManualTraceHintFromEvent } from "@tscircuit/layout"
+import type { EditEvent } from "@tscircuit/manual-edit-events"
+import type {
+  AnyCircuitElement,
+  PcbComponent,
+  SourceComponentBase,
+} from "circuit-json"
+
+export interface PCBPlacement {
+  selector: string
+  center: { x: number; y: number }
+  relative_to: "group_center"
+  _edit_event_id?: string
+}
+
+export interface ManualEditState {
+  pcb_placements: PCBPlacement[]
+  edit_events: EditEvent[]
+  manual_trace_hints: ManualTraceHint[]
+}
+
+export const createInitialManualEditState = (): ManualEditState => ({
+  pcb_placements: [],
+  edit_events: [],
+  manual_trace_hints: [],
+})
+
+export const applyPcbEditEvents = ({
+  editEvents,
+  circuitJson,
+  manualEditsFileContent,
+}: {
+  editEvents: EditEvent[]
+  circuitJson: AnyCircuitElement[]
+  manualEditsFileContent?: string
+}): ManualEditState => {
+  try {
+    // Ensure we have a valid state to work with
+    const validatedManualEdits = ensureValidState(manualEditsFileContent)
+
+    // Create a new state object with properly initialized arrays
+    const newManualEditState: ManualEditState = {
+      pcb_placements: [...validatedManualEdits.pcb_placements],
+      edit_events: [...validatedManualEdits.edit_events],
+      manual_trace_hints: [...validatedManualEdits.manual_trace_hints],
+    }
+
+    // Create a set of handled event IDs
+    const handledEventIds = new Set<string>()
+
+    // Add existing event IDs to the set
+    newManualEditState.pcb_placements.forEach((placement) => {
+      if (placement._edit_event_id) {
+        handledEventIds.add(placement._edit_event_id)
+      }
+    })
+
+    newManualEditState.edit_events.forEach((event) => {
+      if (event.edit_event_id) {
+        handledEventIds.add(event.edit_event_id)
+      }
+    })
+
+    // Process new edit events
+    for (const editEvent of editEvents) {
+      if (
+        (editEvent.in_progress && !editEvent.edit_event_id) ||
+        handledEventIds.has(editEvent.edit_event_id)
+      )
+        continue
+
+      if (
+        editEvent.pcb_edit_event_type === "edit_component_location" &&
+        editEvent.pcb_component_id
+      ) {
+        // Find the component in the circuitJson
+        const pcbComponent = circuitJson.find(
+          (item: AnyCircuitElement) =>
+            item.type === "pcb_component" &&
+            item.pcb_component_id === editEvent.pcb_component_id,
+        ) as PcbComponent
+
+        if (!pcbComponent?.pcb_component_id) continue
+
+        const nameofComponent = circuitJson.find(
+          (item: AnyCircuitElement) =>
+            item.type === "source_component" &&
+            item.source_component_id === pcbComponent.source_component_id,
+        ) as SourceComponentBase
+
+        // Update or add placement
+        const existingPlacementIndex =
+          newManualEditState.pcb_placements.findIndex(
+            (p) => p.selector === nameofComponent.name,
+          )
+
+        const newPlacement: PCBPlacement = {
+          selector: nameofComponent.name,
+          center: editEvent.new_center,
+          relative_to: "group_center",
+          _edit_event_id: editEvent.edit_event_id,
+        }
+
+        if (existingPlacementIndex !== -1) {
+          // Update existing placement
+          newManualEditState.pcb_placements[existingPlacementIndex] =
+            newPlacement
+        } else {
+          // Add new placement
+          newManualEditState.pcb_placements.push(newPlacement)
+        }
+      } else if (editEvent.pcb_edit_event_type === "edit_trace_hint") {
+        const newTraceHint = getManualTraceHintFromEvent(circuitJson, editEvent)
+        if (newTraceHint) {
+          newManualEditState.manual_trace_hints = [
+            ...newManualEditState.manual_trace_hints.filter(
+              (th) => th.pcb_port_selector !== newTraceHint.pcb_port_selector,
+            ),
+            newTraceHint,
+          ]
+        }
+      } else {
+        // Add any other type of event to edit_events array
+        newManualEditState.edit_events.push(editEvent)
+      }
+
+      handledEventIds.add(editEvent.edit_event_id)
+    }
+
+    return newManualEditState
+  } catch (error) {
+    console.error("Error handling edit events:", error)
+    // Return a fresh state if there's an error
+    return createInitialManualEditState()
+  }
+}
+
+// Helper function to ensure we have a valid state
+const ensureValidState = (manualEditsFileContent?: string): ManualEditState => {
+  if (!manualEditsFileContent) return createInitialManualEditState()
+
+  const manualEditState = JSON.parse(manualEditsFileContent)
+
+  return {
+    pcb_placements: Array.isArray(manualEditState.pcb_placements)
+      ? manualEditState.pcb_placements
+      : [],
+    edit_events: Array.isArray(manualEditState.edit_events)
+      ? manualEditState.edit_events
+      : [],
+    manual_trace_hints: Array.isArray(manualEditState.manual_trace_hints)
+      ? manualEditState.manual_trace_hints
+      : [],
+  }
+}