@tscircuit/fake-snippets 0.0.65 → 0.0.67

package/src/components/PreviewContent.tsx

@@ -1,372 +0,0 @@
-import { CodeEditor } from "@/components/CodeEditor"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/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 { SchematicViewer } from "@tscircuit/schematic-viewer"
-import { useEffect, useRef, useState } from "react"
-import { ErrorFallback } from "./ErrorFallback"
-import { ErrorBoundary } from "react-error-boundary"
-import { ErrorTabContent } from "./ErrorTabContent"
-import PreviewEmptyState from "./PreviewEmptyState"
-import { RunButton } from "./RunButton"
-import { CircuitJsonTableViewer } from "./TableViewer/CircuitJsonTableViewer"
-import { CircuitToSvgWithMouseControl } from "./CircuitToSvgWithMouseControl"
-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 type { EditEvent } from "@tscircuit/manual-edit-events"
-
-export interface PreviewContentProps {
-  code: string
-  readOnly?: boolean
-  triggerRunTsx: () => void
-  tsxRunTriggerCount: number
-  errorMessage: string | null
-  circuitJson: any
-  circuitJsonKey?: string
-  className?: string
-  showCodeTab?: boolean
-  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
-  onManualEditsFileContentChange?: (newmanualEditsFileContent: string) => void
-}
-
-export const PreviewContent = ({
-  code,
-  triggerRunTsx,
-  tsxRunTriggerCount,
-  errorMessage,
-  circuitJsonKey = "",
-  circuitJson,
-  showCodeTab = false,
-  showJsonTab = true,
-  showImportAndFormatButtons = true,
-  className,
-  headerClassName,
-  leftHeaderContent,
-  readOnly,
-  isStreaming,
-  onToggleFullScreen,
-  isFullScreen,
-  isRunningCode,
-  onCodeChange,
-  onDtsChange,
-  manualEditsFileContent,
-  onManualEditsFileContentChange,
-}: PreviewContentProps) => {
-  const [activeTab, setActiveTab] = useState(showCodeTab ? "code" : "pcb")
-  const [lastRunHash, setLastRunHash] = useState("")
-  const threeJsObjectRef = useRef<any>(null)
-
-  useEffect(() => {
-    window.TSCIRCUIT_3D_OBJECT_REF = threeJsObjectRef
-  }, [])
-
-  const currentCodeHash = code + "\n" + manualEditsFileContent
-  const hasCodeChangedSinceLastRun = lastRunHash !== currentCodeHash
-
-  useEffect(() => {
-    if (tsxRunTriggerCount === 0) return
-    setLastRunHash(currentCodeHash)
-  }, [tsxRunTriggerCount])
-
-  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"
-        >
-          <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">
-                <CodeEditor
-                  initialCode={code}
-                  manualEditsFileContent={manualEditsFileContent ?? ""}
-                  isStreaming={isStreaming}
-                  onCodeChange={onCodeChange!}
-                  onDtsChange={onDtsChange!}
-                  readOnly={readOnly}
-                  showImportAndFormatButtons={showImportAndFormatButtons}
-                />
-              </div>
-            </TabsContent>
-          )}
-
-          <TabsContent value="pcb">
-            <div
-              className={cn(
-                "mt-4 overflow-hidden",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary fallback={<div>Error loading PCB viewer</div>}>
-                {circuitJson ? (
-                  <PcbViewerWithContainerHeight
-                    key={circuitJsonKey}
-                    circuitJson={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: editEvents as EditEvent[],
-                        circuitJson,
-                        manualEditsFileContent,
-                      })
-                      onManualEditsFileContentChange?.(
-                        JSON.stringify(newManualEditsFileContent, null, 2),
-                      )
-                    }}
-                  />
-                ) : (
-                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="schematic">
-            <div
-              className={cn(
-                "mt-4 overflow-auto",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary fallback={<div>Error loading Schematic</div>}>
-                {circuitJson ? (
-                  <CircuitToSvgWithMouseControl
-                    key={tsxRunTriggerCount}
-                    circuitJson={circuitJson}
-                  />
-                  // Waiting for Schematic Viewer to stablize
-                  // <Schematic
-                  //   style={{ height: "500px" }}
-                  //   key={tsxRunTriggerCount}
-                  //   soup={circuitJson}
-                  // />
-                ) : (
-                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="cad">
-            <div
-              className={cn(
-                "mt-4 overflow-auto",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary FallbackComponent={ErrorFallback}>
-                {circuitJson ? (
-                  <CadViewer
-                    circuitJson={circuitJson as any}
-                    ref={threeJsObjectRef}
-                  />
-                ) : (
-                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="bom">
-            <div
-              className={cn(
-                "mt-4 overflow-auto",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary fallback={<div>Error loading BOM</div>}>
-                {circuitJson ? (
-                  <BomTable circuitJson={circuitJson} />
-                ) : (
-                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-
-          <TabsContent value="circuitjson">
-            <div
-              className={cn(
-                "mt-4 overflow-auto",
-                isFullScreen ? "h-[calc(100vh-96px)]" : "h-[620px]",
-              )}
-            >
-              <ErrorBoundary fallback={<div>Error loading JSON viewer</div>}>
-                {circuitJson ? (
-                  <CircuitJsonTableViewer elements={circuitJson as any} />
-                ) : (
-                  <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
-                )}
-              </ErrorBoundary>
-            </div>
-          </TabsContent>
-          <TabsContent value="error">
-            {circuitJson || errorMessage ? (
-              <ErrorTabContent code={code} errorMessage={errorMessage} />
-            ) : (
-              <PreviewEmptyState triggerRunTsx={triggerRunTsx} />
-            )}
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
-  )
-}

package/src/components/SnippetCard.tsx

@@ -1,159 +0,0 @@
-import React from "react"
-import { Link } from "wouter"
-import { Snippet } from "fake-snippets-api/lib/db/schema"
-import { GitHubLogoIcon, StarIcon, LockClosedIcon } from "@radix-ui/react-icons"
-import { GlobeIcon, MoreVertical, PencilIcon, Trash2 } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { OptimizedImage } from "./OptimizedImage"
-import { SnippetTypeIcon } from "./SnippetTypeIcon"
-import { timeAgo } from "@/lib/utils/timeAgo"
-
-export interface SnippetCardProps {
-  /** The snippet data to display */
-  snippet: Snippet
-  /** Base URL for snippet images */
-  baseUrl: string
-  /** Whether to show the owner name (useful in starred views) */
-  showOwner?: boolean
-  /** Whether this is the current user's snippet (enables edit/delete options) */
-  isCurrentUserSnippet?: boolean
-  /** Callback when delete is clicked */
-  onDeleteClick?: (e: React.MouseEvent, snippet: Snippet) => void
-  /** Custom class name for the card container */
-  className?: string
-  /** Custom image size (default is h-16 w-16) */
-  imageSize?: string
-  /** Custom image transform style */
-  imageTransform?: string
-  /** Whether to render the card with a link to the snippet page */
-  withLink?: boolean
-  /** Custom render function for actions */
-  renderActions?: (snippet: Snippet) => React.ReactNode
-}
-
-export const SnippetCard: React.FC<SnippetCardProps> = ({
-  snippet,
-  baseUrl,
-  showOwner = false,
-  isCurrentUserSnippet = false,
-  onDeleteClick,
-  className = "",
-  imageSize = "h-16 w-16",
-  imageTransform = "transition-transform duration-300 -rotate-45 hover:rotate-0 hover:scale-110 scale-150",
-  withLink = true,
-  renderActions,
-}) => {
-  const handleDeleteClick = (e: React.MouseEvent) => {
-    e.preventDefault() // Prevent navigation
-    if (onDeleteClick) {
-      onDeleteClick(e, snippet)
-    }
-  }
-
-  const cardContent = (
-    <div
-      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
-    >
-      <div className="flex items-start gap-4">
-        <div
-          className={`${imageSize} flex-shrink-0 rounded-md overflow-hidden`}
-        >
-          <OptimizedImage
-            src={`${baseUrl}/snippets/images/${snippet.owner_name}/${snippet.unscoped_name}/pcb.svg`}
-            alt={`${snippet.owner_name}'s profile`}
-            className={`object-cover h-full w-full ${imageTransform}`}
-          />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex justify-between items-start mb-[2px] -mt-[3px]">
-            <h2 className="text-md font-semibold truncate pr-[30px]">
-              {showOwner && (
-                <>
-                  <span className="text-gray-700 text-md">
-                    {snippet.owner_name}
-                  </span>
-                  <span className="mx-1">/</span>
-                </>
-              )}
-              <span className="text-gray-900">{snippet.unscoped_name}</span>
-            </h2>
-            <div className="flex items-center gap-2">
-              <SnippetTypeIcon
-                type={snippet.snippet_type}
-                className="pt-[2.5px]"
-              />
-              <div className="flex items-center gap-1 text-gray-600">
-                <StarIcon className="w-4 h-4 pt-[2.5px]" />
-                <span className="text-[16px]">{snippet.star_count || 0}</span>
-              </div>
-              {isCurrentUserSnippet && onDeleteClick && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-[1.5rem] w-[1.5rem]"
-                    >
-                      <MoreVertical className="h-4 w-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    <DropdownMenuItem
-                      className="text-xs text-red-600"
-                      onClick={handleDeleteClick}
-                    >
-                      <Trash2 className="mr-2 h-3 w-3" />
-                      Delete Snippet
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-              {renderActions && renderActions(snippet)}
-            </div>
-          </div>
-          <p
-            className={`${!snippet.description && "h-[1.25rem]"} text-sm text-gray-500 mb-1 truncate max-w-xs`}
-          >
-            {snippet.description ? snippet.description : " "}
-          </p>
-          <div className={`flex items-center gap-4`}>
-            {snippet.is_private ? (
-              <div className="flex items-center text-xs gap-1 text-gray-500">
-                <LockClosedIcon height={12} width={12} />
-                <span>Private</span>
-              </div>
-            ) : (
-              <div className="flex items-center text-xs gap-1 text-gray-500">
-                <GlobeIcon height={12} width={12} />
-                <span>Public</span>
-              </div>
-            )}
-            <div className="flex items-center text-xs gap-1 text-gray-500">
-              <PencilIcon height={12} width={12} />
-              <span>{timeAgo(new Date(snippet.updated_at))}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-
-  if (withLink) {
-    return (
-      <Link
-        key={snippet.snippet_id}
-        href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
-      >
-        {cardContent}
-      </Link>
-    )
-  }
-
-  return cardContent
-}

package/src/components/SnippetList.tsx

@@ -1,71 +0,0 @@
-import { Button } from "@/components/ui/button"
-import { ChevronDown, ChevronUp, Star } from "lucide-react"
-import { Link } from "wouter"
-import { Snippet } from "fake-snippets-api/lib/db/schema"
-
-interface SnippetListProps {
-  title: string
-  snippets?: Snippet[]
-  showAll?: boolean
-  onToggleShowAll?: () => void
-  maxItems?: number
-}
-
-export const SnippetList = ({
-  title,
-  snippets = [],
-  showAll = false,
-  onToggleShowAll,
-  maxItems = 5,
-}: SnippetListProps) => {
-  const displayedSnippets = showAll ? snippets : snippets.slice(0, maxItems)
-
-  return (
-    <div>
-      <div className="flex items-center justify-between">
-        <h2 className="text-sm font-bold text-gray-700">{title}</h2>
-        {snippets.length > maxItems && onToggleShowAll && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onToggleShowAll}
-            className="text-blue-600 hover:text-blue-700 hover:bg-transparent"
-          >
-            {showAll ? (
-              <>
-                Show less <ChevronUp className="w-3 h-3 ml-1" />
-              </>
-            ) : (
-              <>
-                Show more <ChevronDown className="w-3 h-3 ml-1" />
-              </>
-            )}
-          </Button>
-        )}
-      </div>
-      <div className="border-b border-gray-200" />
-      {snippets && (
-        <ul className="space-y-1 mt-2">
-          {displayedSnippets.map((snippet) => (
-            <li key={snippet.snippet_id}>
-              <div className="flex items-center">
-                <Link
-                  href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
-                  className="text-blue-600 hover:underline text-sm"
-                >
-                  {snippet.owner_name}/{snippet.unscoped_name}
-                </Link>
-                {snippet.star_count > 0 && (
-                  <span className="ml-2 text-gray-500 text-xs flex items-center">
-                    <Star className="w-3 h-3 mr-1" />
-                    {snippet.star_count}
-                  </span>
-                )}
-              </div>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}

package/src/hooks/use-compiled-tsx.ts

@@ -1,37 +0,0 @@
-import { useMemo } from "react"
-import * as Babel from "@babel/standalone"
-
-export const safeCompileTsx = (
-  code: string,
-):
-  | { success: true; compiledTsx: string; error?: undefined }
-  | { success: false; error: Error; compiledTsx?: undefined } => {
-  try {
-    return {
-      success: true,
-      compiledTsx:
-        Babel.transform(code, {
-          presets: ["react", "typescript"],
-          plugins: ["transform-modules-commonjs"],
-          filename: "virtual.tsx",
-        }).code || "",
-    }
-  } catch (error: any) {
-    return { success: false, error }
-  }
-}
-
-export const useCompiledTsx = (
-  code?: string,
-  { isStreaming = false }: { isStreaming?: boolean } = {},
-) => {
-  return useMemo(() => {
-    if (!code) return ""
-    if (isStreaming) return ""
-    const result = safeCompileTsx(code)
-    if (result.success) {
-      return result.compiledTsx
-    }
-    return `Error: ${result.error.message}`
-  }, [code, isStreaming])
-}