@tscircuit/runframe 0.0.11 → 0.0.12

package/lib/components/CircuitJsonPreview.tsx

@@ -1,348 +0,0 @@
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "lib/components/ui/tabs"
-import { cn } from "lib/utils"
-import { applyPcbEditEvents } from "lib/utils/pcbManualEditEventHandler"
-import { CadViewer } from "@tscircuit/3d-viewer"
-import { PCBViewer } from "@tscircuit/pcb-viewer"
-import { useEffect, useState } from "react"
-import { ErrorFallback } from "./ErrorFallback"
-import { ErrorBoundary } from "react-error-boundary"
-import { ErrorTabContent } from "./ErrorTabContent"
-import { SchematicViewer } from "@tscircuit/schematic-viewer"
-import PreviewEmptyState from "./PreviewEmptyState"
-import { CircuitJsonTableViewer } from "./CircuitJsonTableViewer/CircuitJsonTableViewer"
-import { BomTable } from "./BomTable"
-import {
-  CheckIcon,
-  EllipsisIcon,
-  EllipsisVerticalIcon,
-  FullscreenIcon,
-  MinimizeIcon,
-} from "lucide-react"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu"
-import { Button } from "./ui/button"
-import { PcbViewerWithContainerHeight } from "./PcbViewerWithContainerHeight"
-import { useStyles } from "lib/hooks/use-styles"
-
-export interface PreviewContentProps {
-  code?: string
-  readOnly?: boolean
-  onRunClicked?: () => void
-  tsxRunTriggerCount?: number
-  errorMessage?: string | null
-  circuitJson: any
-  circuitJsonKey?: string
-  className?: string
-  showCodeTab?: boolean
-  codeTabContent?: React.ReactNode
-  showJsonTab?: boolean
-  showImportAndFormatButtons?: boolean
-  headerClassName?: string
-  leftHeaderContent?: React.ReactNode
-  isRunningCode?: boolean
-  isStreaming?: boolean
-  onToggleFullScreen?: () => void
-  isFullScreen?: boolean
-  onCodeChange?: (code: string) => void
-  onDtsChange?: (dts: string) => void
-  manualEditsFileContent?: string
-  hasCodeChangedSinceLastRun?: boolean
-  onManualEditsFileContentChange?: (newmanualEditsFileContent: string) => void
-}
-
-export const CircuitJsonPreview = ({
-  code,
-  onRunClicked = () => {},
-  tsxRunTriggerCount,
-  errorMessage,
-  circuitJsonKey = "",
-  circuitJson,
-  showCodeTab = false,
-  codeTabContent,
-  showJsonTab = true,
-  showImportAndFormatButtons = true,
-  className,
-  headerClassName,
-  leftHeaderContent,
-  readOnly,
-  isStreaming,
-  onToggleFullScreen,
-  isFullScreen,
-  isRunningCode,
-  hasCodeChangedSinceLastRun,
-  onCodeChange,
-  onDtsChange,
-  manualEditsFileContent,
-  onManualEditsFileContentChange,
-}: PreviewContentProps) => {
-  useStyles()
-  const [activeTab, setActiveTab] = useState(showCodeTab ? "code" : "pcb")
-
-  useEffect(() => {
-    if (errorMessage) {
-      setActiveTab("error")
-    }
-  }, [errorMessage])
-
-  useEffect(() => {
-    if (activeTab === "code" && circuitJson && !errorMessage) {
-      setActiveTab("pcb")
-    }
-  }, [circuitJson])
-
-  return (
-    <div className={cn("flex flex-col relative", className)}>
-      <div className="md:sticky md:top-2">
-        <Tabs
-          value={activeTab}
-          onValueChange={setActiveTab}
-          className="flex-grow flex flex-col p-2"
-        >
-          <div className={cn("flex items-center gap-2", headerClassName)}>
-            {leftHeaderContent}
-            {leftHeaderContent && <div className="flex-grow" />}
-            {/* <RunButton
-              onClick={() => triggerRunTsx()}
-              disabled={!hasCodeChangedSinceLastRun && tsxRunTriggerCount !== 0}
-              isRunningCode={isRunningCode}
-            /> */}
-            {!leftHeaderContent && <div className="flex-grow" />}
-            <TabsList>
-              {showCodeTab && <TabsTrigger value="code">Code</TabsTrigger>}
-              <TabsTrigger value="pcb" className="whitespace-nowrap">
-                {circuitJson && (
-                  <span
-                    className={cn(
-                      "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
-                      !hasCodeChangedSinceLastRun
-                        ? "bg-blue-500"
-                        : "bg-gray-500",
-                    )}
-                  />
-                )}
-                PCB
-              </TabsTrigger>
-              <TabsTrigger value="schematic" className="whitespace-nowrap">
-                {circuitJson && (
-                  <span
-                    className={cn(
-                      "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
-                      !hasCodeChangedSinceLastRun
-                        ? "bg-blue-500"
-                        : "bg-gray-500",
-                    )}
-                  />
-                )}
-                Schematic
-              </TabsTrigger>
-              <TabsTrigger value="cad">
-                {circuitJson && (
-                  <span
-                    className={cn(
-                      "inline-flex items-center justify-center w-2 h-2 mr-1 text-xs font-bold text-white rounded-full",
-                      !hasCodeChangedSinceLastRun
-                        ? "bg-blue-500"
-                        : "bg-gray-500",
-                    )}
-                  />
-                )}
-                3D
-              </TabsTrigger>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <div className="whitespace-nowrap p-2 mr-1 cursor-pointer relative">
-                    <EllipsisIcon className="w-4 h-4" />
-                    {errorMessage && (
-                      <span className="inline-flex absolute top-[6px] right-[4px] items-center justify-center w-1 h-1 ml-2 text-[8px] font-bold text-white bg-red-500 rounded-full" />
-                    )}
-                  </div>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent className="*:text-xs">
-                  <DropdownMenuItem
-                    onSelect={() => setActiveTab("error")}
-                    className="flex"
-                  >
-                    <CheckIcon
-                      className={cn(
-                        "w-3 h-3 mr-2",
-                        activeTab !== "error" && "invisible",
-                      )}
-                    />
-                    <div className="flex-grow">Errors</div>
-                    {errorMessage && (
-                      <span className="inline-flex items-center justify-center w-3 h-3 ml-2 text-[8px] font-bold text-white bg-red-500 rounded-full">
-                        1
-                      </span>
-                    )}
-                  </DropdownMenuItem>
-                  <DropdownMenuItem onSelect={() => setActiveTab("bom")}>
-                    <CheckIcon
-                      className={cn(
-                        "w-3 h-3 mr-2",
-                        activeTab !== "bom" && "invisible",
-                      )}
-                    />
-                    Bill of Materials
-                  </DropdownMenuItem>
-                  <DropdownMenuItem
-                    onSelect={() => setActiveTab("circuitjson")}
-                  >
-                    <CheckIcon
-                      className={cn(
-                        "w-3 h-3 mr-2",
-                        activeTab !== "circuitjson" && "invisible",
-                      )}
-                    />
-                    JSON
-                  </DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </TabsList>
-            {onToggleFullScreen && (
-              <Button onClick={onToggleFullScreen} variant="ghost">
-                {isFullScreen ? (
-                  <MinimizeIcon size={16} />
-                ) : (
-                  <FullscreenIcon size={16} />
-                )}
-              </Button>
-            )}
-          </div>
-          {showCodeTab && (
-            <TabsContent value="code" className="flex-grow overflow-hidden">
-              <div className="h-full">{codeTabContent}</div>
-            </TabsContent>
-          )}
-
-          <TabsContent value="pcb">
-            <div
-              className={cn(
-                "overflow-hidden",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary fallback={<div>Error loading PCB viewer</div>}>
-                {circuitJson ? (
-                  <PcbViewerWithContainerHeight
-                    key={circuitJsonKey}
-                    soup={circuitJson}
-                    containerClassName={cn(
-                      "h-full w-full",
-                      isFullScreen
-                        ? "min-h-[calc(100vh-240px)]"
-                        : "min-h-[620px]",
-                    )}
-                    // onEditEventsChanged={(editEvents) => {
-                    //   if (editEvents.some((editEvent) => editEvent.in_progress))
-                    //     return
-                    //   // Update state with new edit events
-                    //   const newManualEditsFileContent = applyPcbEditEvents({
-                    //     editEvents,
-                    //     circuitJson,
-                    //     manualEditsFileContent,
-                    //   })
-                    //   onManualEditsFileContentChange?.(
-                    //     JSON.stringify(newManualEditsFileContent, null, 2),
-                    //   )
-                    // }}
-                  />
-                ) : (
-                  <PreviewEmptyState onRunClicked={onRunClicked} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="schematic">
-            <div
-              className={cn(
-                "overflow-auto",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary fallback={<div>Error loading Schematic</div>}>
-                {circuitJson ? (
-                  <SchematicViewer
-                    circuitJson={circuitJson}
-                    containerStyle={{
-                      height: "100%",
-                    }}
-                  />
-                ) : (
-                  <PreviewEmptyState onRunClicked={onRunClicked} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="cad">
-            <div
-              className={cn(
-                "overflow-auto",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary FallbackComponent={ErrorFallback}>
-                {circuitJson ? (
-                  <CadViewer soup={circuitJson as any} />
-                ) : (
-                  <PreviewEmptyState onRunClicked={onRunClicked} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="bom">
-            <div
-              className={cn(
-                "overflow-auto",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary fallback={<div>Error loading BOM</div>}>
-                {circuitJson ? (
-                  <BomTable circuitJson={circuitJson} />
-                ) : (
-                  <PreviewEmptyState onRunClicked={onRunClicked} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="circuitjson">
-            <div
-              className={cn(
-                "overflow-auto",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary fallback={<div>Error loading JSON viewer</div>}>
-                {circuitJson ? (
-                  <CircuitJsonTableViewer elements={circuitJson as any} />
-                ) : (
-                  <PreviewEmptyState onRunClicked={onRunClicked} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-          <TabsContent value="error">
-            {circuitJson || errorMessage ? (
-              <ErrorTabContent code={code} errorMessage={errorMessage} />
-            ) : (
-              <PreviewEmptyState onRunClicked={onRunClicked} />
-            )}
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
-  )
-}

package/lib/components/CircuitJsonTableViewer/CircuitJsonTableViewer.tsx

@@ -1,315 +0,0 @@
-import { useReducer, useState } from "react"
-import { ClickableText } from "./ClickableText"
-import { HeaderCell } from "./HeaderCell"
-import Modal from "./Modal"
-
-type Filters = {
-  component_type_filter?:
-    | "any"
-    | "source"
-    | "source/pcb"
-    | "source/schematic"
-    | string
-  id_search?: string
-  name_search?: string
-  selector_search?: string
-  focused_id?: string
-}
-
-type CommonProps = { name?: string; type: string }
-
-type ModalState =
-  | { open: false; element?: never }
-  | { open: true; element: Element; title: string }
-
-interface Element {
-  [key: string]: any
-  type: string
-  name?: string
-}
-
-interface ProcessedElement extends CommonProps {
-  primary_id: string
-  other_ids: { [key: string]: string }
-  selector_path?: string
-  _og_elm: Element
-}
-
-interface Column {
-  key: string
-  name: string
-  renderCell?: (row: ProcessedElement) => React.ReactNode
-  renderHeaderCell?: (col: Column) => React.ReactNode
-}
-
-export const CircuitJsonTableViewer: React.FC<{ elements: Element[] }> = ({
-  elements,
-}) => {
-  const [modal, setModal] = useState<ModalState>({ open: false })
-  const [filters, setFilter] = useReducer(
-    (s: Filters, a: Filters) => ({
-      ...s,
-      ...a,
-    }),
-    {},
-  )
-
-  const element_types = [...new Set(elements.map((e) => e.type))]
-
-  // Process elements to separate primary and non-primary ids
-  const elements2: ProcessedElement[] = elements.map((e) => {
-    const primary_id = e[`${e.type}_id`]
-
-    const other_ids = Object.fromEntries(
-      Object.entries(e).filter(([k]) => {
-        if (k === `${e.type}_id`) return false
-        if (!k.endsWith("_id")) return false
-        return true
-      }),
-    ) as { [key: string]: string }
-
-    const other_props: CommonProps = Object.fromEntries(
-      Object.entries(e).filter(([k]) => !k.endsWith("_id")),
-    ) as CommonProps
-
-    return {
-      primary_id,
-      other_ids,
-      ...other_props,
-      _og_elm: e,
-    }
-  })
-
-  const elements3 = elements2.map((e) => {
-    let selector_path = ""
-
-    const getSelectorPath = (e2: ProcessedElement): string => {
-      const parent_key = Object.keys(e2.other_ids).find((k) =>
-        k.startsWith("source_"),
-      )
-      if (!parent_key) return `.${e2.name}`
-      const parent_type = parent_key.slice(0, -3) // trim "_id"
-
-      const parent = elements2.find(
-        (p) =>
-          p.type === parent_type && p.primary_id === e2.other_ids[parent_key],
-      )
-
-      if (!parent) return `??? > .${e2.name}`
-
-      if (!("name" in parent)) return `#${parent.primary_id} > .${e2.name}`
-
-      return `${getSelectorPath(parent)} > .${e2.name}`
-    }
-
-    if ("name" in e) {
-      selector_path = getSelectorPath(e)
-    }
-
-    return {
-      ...e,
-      selector_path,
-    }
-  })
-
-  const columns: Column[] = [
-    {
-      key: "primary_id",
-      name: "primary_id",
-      renderCell: (row: ProcessedElement) => (
-        <div className="flex items-center">
-          <ClickableText
-            text={row.primary_id}
-            onClick={() =>
-              setFilter({
-                focused_id: row.primary_id,
-                id_search: undefined,
-                selector_search: undefined,
-              })
-            }
-          />
-          <span className="flex-grow" />
-          <ClickableText
-            text="(JSON)"
-            onClick={() =>
-              setModal({
-                open: true,
-                element: row._og_elm,
-                title: row.primary_id,
-              })
-            }
-          />
-        </div>
-      ),
-      renderHeaderCell: (col: Column) => (
-        <HeaderCell
-          column={col}
-          onTextChange={(v) => setFilter({ id_search: v })}
-          field={
-            !filters.focused_id
-              ? undefined
-              : () => (
-                  <div>
-                    Focus:{" "}
-                    <span className="underline">{filters.focused_id}</span>
-                    <ClickableText
-                      text="(unfocus)"
-                      onClick={() => setFilter({ focused_id: undefined })}
-                    />
-                  </div>
-                )
-          }
-        />
-      ),
-    },
-    {
-      key: "type",
-      name: "type",
-      renderHeaderCell: (col: Column) => (
-        <HeaderCell
-          column={col}
-          field={() => (
-            <select
-              onChange={(e) =>
-                setFilter({ component_type_filter: e.target.value })
-              }
-              className="border rounded p-1 w-full"
-            >
-              <option key="any" value="any">
-                any
-              </option>
-              <option key="source" value="source">
-                source
-              </option>
-              <option key="source/pcb" value="source/pcb">
-                source/pcb
-              </option>
-              <option key="source/schematic" value="source/schematic">
-                source/schematic
-              </option>
-              {element_types.map((type) => (
-                <option key={type} value={type}>
-                  {type}
-                </option>
-              ))}
-            </select>
-          )}
-        />
-      ),
-    },
-    {
-      key: "name",
-      name: "name",
-      renderHeaderCell: (col: Column) => (
-        <HeaderCell
-          column={col}
-          onTextChange={(t) => setFilter({ name_search: t })}
-        />
-      ),
-    },
-    {
-      key: "selector_path",
-      name: "selector_path",
-      renderHeaderCell: (col: Column) => (
-        <HeaderCell
-          column={col}
-          onTextChange={(t) => setFilter({ selector_search: t })}
-        />
-      ),
-    },
-    {
-      key: "other_ids",
-      name: "other_ids",
-      renderCell: (row: ProcessedElement) => (
-        <div className="space-x-2">
-          {Object.entries(row.other_ids).map(([other_id, v]) => (
-            <ClickableText
-              key={v}
-              text={v}
-              onClick={() => setFilter({ focused_id: v })}
-            />
-          ))}
-        </div>
-      ),
-    },
-  ]
-
-  const elements4 = elements3
-    .filter((e) => {
-      if (!filters.name_search) return true
-      return e.name?.toLowerCase()?.includes(filters.name_search.toLowerCase())
-    })
-    .filter((e) => {
-      if (!filters.component_type_filter) return true
-      if (filters.component_type_filter === "any") return true
-      if (filters.component_type_filter === "source") {
-        return e.type.startsWith("source_")
-      }
-      if (filters.component_type_filter === "source/pcb") {
-        return e.type.startsWith("source_") || e.type.startsWith("pcb_")
-      }
-      if (filters.component_type_filter === "source/schematic") {
-        return e.type.startsWith("source_") || e.type.startsWith("schematic_")
-      }
-      return e.type?.includes(filters.component_type_filter)
-    })
-    .filter((e) => {
-      if (!filters.selector_search) return true
-      const parts = filters.selector_search
-        .split(" ")
-        .filter((p) => p.length > 0)
-      return parts.every((part) => e.selector_path?.includes(part))
-    })
-    .filter((e) => {
-      if (!filters.id_search) return true
-      return e.primary_id?.includes(filters.id_search)
-    })
-    .filter((e) => {
-      if (!filters.focused_id) return true
-      if (e.primary_id === filters.focused_id) return true
-      if (Object.values(e.other_ids).includes(filters.focused_id)) return true
-      return false
-    })
-
-  return (
-    <div className="font-mono text-xs">
-      <div className="overflow-x-auto">
-        <table className="table-auto w-full text-left">
-          <thead>
-            <tr>
-              {columns.map((col) => (
-                <th key={col.key} className="px-4 py-2 border-b">
-                  {col.renderHeaderCell ? col.renderHeaderCell(col) : col.name}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {elements4.map((row, rowIndex) => (
-              <tr key={rowIndex} className="hover:bg-gray-100">
-                {columns.map((col) => (
-                  <td key={col.key} className="px-4 py-2 border-b">
-                    {col.renderCell
-                      ? col.renderCell(row)
-                      : (row as any)[col.key]}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <Modal
-        open={modal.open}
-        onClose={() => setModal({ open: false })}
-        title={modal.open ? modal.title : ""}
-      >
-        <div className="bg-gray-800 p-3 text-white rounded">
-          <pre className="whitespace-pre-wrap">
-            {modal.open ? JSON.stringify(modal.element, null, 2) : ""}
-          </pre>
-        </div>
-      </Modal>
-    </div>
-  )
-}

package/lib/components/CircuitJsonTableViewer/ClickableText.tsx

@@ -1,20 +0,0 @@
-import type React from "react"
-
-interface ClickableTextProps {
-  text: string
-  onClick: () => void
-}
-
-export const ClickableText: React.FC<ClickableTextProps> = ({
-  text,
-  onClick,
-}) => {
-  return (
-    <span
-      className="cursor-pointer underline text-blue-300 mx-2"
-      onClick={onClick}
-    >
-      {text}
-    </span>
-  )
-}

package/lib/components/CircuitJsonTableViewer/HeaderCell.tsx

@@ -1,26 +0,0 @@
-import type React from "react"
-
-interface HeaderCellProps {
-  column: { name: string }
-  field?: () => React.ReactNode
-  onTextChange?: (value: string) => void
-}
-
-export const HeaderCell: React.FC<HeaderCellProps> = (p) => {
-  return (
-    <div className="leading-5">
-      <div className="py-2 font-bold">{p.column.name}</div>
-      <div>
-        {p.field?.() ?? (
-          <input
-            type="text"
-            className="border rounded p-1 w-full"
-            onChange={(e) => {
-              p.onTextChange?.(e.target.value)
-            }}
-          />
-        )}
-      </div>
-    </div>
-  )
-}