@tscircuit/fake-snippets 0.0.121 → 0.0.123

package/src/components/ErrorOutline.tsx

@@ -1,35 +0,0 @@
-import { AlertCircle } from "lucide-react"
-
-export function ErrorOutline({
-  error,
-  description,
-}: { error?: Error; description?: string; children?: React.ReactNode }) {
-  return (
-    <div className="flex items-center justify-center p-4">
-      <div className="max-w-lg w-full mx-auto p-6 sm:p-8 bg-red-100/80 rounded-xl shadow-lg border border-red-500">
-        <div className="flex flex-col items-center text-center">
-          <AlertCircle className="h-10 w-10 text-red-700 mb-4" />
-          <h2 className="text-xl sm:text-2xl font-bold text-red-700 mb-3">
-            Something strange happened
-          </h2>
-          <p className="text-red-600 font-medium mb-6 text-sm sm:text-base">
-            {description ||
-              "An unexpected error occurred while processing your request."}{" "}
-            <br />
-            Please try again or contact support if the problem persists.
-          </p>
-          {error?.message && (
-            <details className="w-full text-left bg-red-50 p-3 rounded-md border border-red-200">
-              <summary className="text-sm font-medium text-red-800 cursor-pointer hover:text-red-900">
-                Show Error Details
-              </summary>
-              <pre className="mt-2 text-xs text-red-700 bg-transparent p-0 rounded overflow-auto whitespace-pre-wrap break-words">
-                {error.message}
-              </pre>
-            </details>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/ErrorTabContent.tsx

@@ -1,122 +0,0 @@
-import { GitHubLogoIcon, MagicWandIcon } from "@radix-ui/react-icons"
-import { ClipboardIcon } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { useAiApi } from "@/hooks/use-ai-api"
-import { useAsyncMemo } from "use-async-memo"
-import { TextBlock } from "@anthropic-ai/sdk/resources/messages.mjs"
-import { encodeTextToUrlHash } from "@/lib/encodeTextToUrlHash"
-
-export const ErrorTabContent = ({
-  code,
-  isStreaming,
-  errorMessage,
-}: {
-  code?: string
-  isStreaming?: boolean
-  errorMessage?: string | null
-}) => {
-  const anthropic = useAiApi()
-  const simplifiedErrorMessage = useAsyncMemo(async () => {
-    if (isStreaming) return ""
-    if (!code) return ""
-    if (!errorMessage) return ""
-    // Only simplify for ZodErrors for now
-    if (!errorMessage.includes("ZodError")) return ""
-    const response = await anthropic.messages.create({
-      model: "claude-3-haiku-20240307",
-      max_tokens: 1000,
-      messages: [
-        {
-          role: "user",
-          content: `
-You are a helpful assistant that simplifies error messages. You only output the rewritten error message.
-
-Here is the code:
-${code}
-
-Here is the error message:
-${errorMessage}
-          `.trim(),
-        },
-      ],
-    })
-    return (response.content[0] as TextBlock).text
-  }, [code, errorMessage, isStreaming])
-
-  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-semibold font-mono whitespace-pre-wrap text-red-700">
-            {simplifiedErrorMessage}
-          </p>
-          <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={() => {
-            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/tscircuit.com/issues/new?title=${encodeURIComponent(title)}&body=${encodeURIComponent(body)}`,
-              "_blank",
-            )
-          }}
-        >
-          <GitHubLogoIcon className="w-4 h-4 mr-2" />
-          Report Issue
-        </Button>
-        <Button variant="outline">
-          <MagicWandIcon className="w-4 h-4 mr-2" />
-          Fix with AI
-        </Button>
-      </div>
-    </>
-  )
-}

package/src/components/ExpandableText.tsx

@@ -1,29 +0,0 @@
-import { useState } from "react"
-
-interface ExpandableTextProps {
-  text: string
-  maxChars?: number
-}
-
-const ExpandableText = ({ text, maxChars = 30 }: ExpandableTextProps) => {
-  const [expanded, setExpanded] = useState(false)
-
-  if (text.length <= maxChars) {
-    return <span>{text}</span>
-  }
-
-  return (
-    <span>
-      {expanded ? text : `${text.slice(0, maxChars)}...`}
-      <button
-        className="text-blue-600 underline ml-1"
-        type="button"
-        onClick={() => setExpanded((prev) => !prev)}
-      >
-        {expanded ? "Show less" : "Show more"}
-      </button>
-    </span>
-  )
-}
-
-export default ExpandableText

package/src/components/FAQ.tsx

@@ -1,189 +0,0 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion"
-
-const QUESTIONS = [
-  {
-    question: "Can I use tscircuit commercially?",
-    answer:
-      "You can use tscircuit for commercial purposes. tscircuit is under the same permissive MIT license as Node.js, React, and thousands of other popular projects you are likely already using! ",
-  },
-  {
-    question: "Can I import designs from other software?",
-    answer:
-      "tscircuit has some support for importing designs from other software, but it's not yet fully featured. You should file an issue on our Github if you'd like to see a specific format supported.",
-  },
-  {
-    question: "Can I use tscircuit locally?",
-    answer:
-      "Yes, you can use tscircuit locally using the tscircuit CLI, but we recommend starting with the web-based application for simplicity.",
-  },
-  {
-    question: "Can tscircuit make schematics? Is it extra effort?",
-    answer:
-      "tscircuit always renders both a schematic and PCB. Unlike traditional EDA where the schematic capture and PCB layout are separate processes, tscircuit combines them by allowing a user to specify constraints and automations. This means that you can design a schematic and then immediately see a PCB layout or vice versa.",
-  },
-  {
-    question: "What exactly is tscircuit?",
-    answer: (
-      <>
-        <p className="mb-2">
-          tscircuit is a <strong>React/TypeScript framework</strong> for
-          designing electronic circuits programmatically.
-        </p>
-        <p className="mb-2">
-          Instead of using traditional graphical interfaces, you write code to
-          define components, their connections, and layout constraints. This
-          "electronics design as code" approach unlocks powerful capabilities
-          like reusable packages, continuous automation, parameterization, and
-          integration with modern software development workflows (like version
-          control with Git).
-        </p>
-        <p className="mb-2">
-          While the core of tscircuit is the framework, the term "tscircuit"
-          often refers to the broader <strong>ecosystem</strong> built around
-          it. This includes:
-        </p>
-        <ul className="list-disc list-inside mb-2 pl-4">
-          <li>The online development platform and registry (tscircuit.com)</li>
-          <li>
-            The{" "}
-            <a
-              className="text-blue-600 underline hover:text-blue-800"
-              href="https://docs.tscircuit.com/intro/quickstart-cli"
-            >
-              command-line interface (CLI)
-            </a>{" "}
-            for local development
-          </li>
-        </ul>
-        <p>
-          tscircuit is a modern, web-first approach to hardware development. To
-          learn more about the core concepts and architecture, visit the{" "}
-          <a
-            href="https://docs.tscircuit.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline text-blue-600 hover:text-blue-800" // Optional styling
-          >
-            official documentation
-          </a>
-          .
-        </p>
-      </>
-    ),
-  },
-  {
-    question: "Can I use tscircuit programmatically?",
-    answer: (
-      <>
-        <p className="mb-2">
-          Yes, you can use tscircuit programmatically with these packages:
-        </p>
-        <ul className="list-disc list-inside mb-2 pl-4">
-          <li>
-            <a
-              className="text-blue-600 underline hover:text-blue-800"
-              href="https://github.com/tscircuit/core"
-            >
-              @tscircuit/core
-            </a>{" "}
-            - Execute tscircuit React code directly in Node, Bun or a browser to
-            create Circuit JSON
-          </li>
-          <li>
-            <a
-              className="text-blue-600 underline hover:text-blue-800"
-              href="https://github.com/tscircuit/eval"
-            >
-              @tscircuit/eval
-            </a>{" "}
-            - Dynamically run tscircuit code with automatic import handling and
-            transpilation support builtin
-          </li>
-          <li>
-            <a
-              className="text-blue-600 underline hover:text-blue-800"
-              href="https://github.com/tscircuit/runframe"
-            >
-              @tscircuit/runframe
-            </a>{" "}
-            - React components for viewing and running circuits in the browser
-          </li>
-        </ul>
-      </>
-    ),
-  },
-  {
-    question: "How do I display tscircuit circuits on my website?",
-    answer: (
-      <span>
-        tscircuit code builds into{" "}
-        <a
-          className="text-blue-600 underline hover:text-blue-800"
-          href="https://github.com/tscircuit/circuit-json"
-        >
-          Circuit JSON
-        </a>
-        , you can then use the <code>CircuitJsonViewer</code> component
-        inside&nbsp;
-        <a
-          className="text-blue-600 underline hover:text-blue-800"
-          href="https://github.com/tscircuit/runframe"
-        >
-          @tscircuit/runframe
-        </a>{" "}
-        to display the Circuit JSON on your website as a Schematic, PCB, or 3D
-        view.
-      </span>
-    ),
-  },
-  {
-    question: "What is Circuit JSON?",
-    answer: (
-      <span>
-        <a
-          className="text-blue-600 underline hover:text-blue-800"
-          href="https://github.com/tscircuit/circuit-json"
-        >
-          Circuit JSON
-        </a>{" "}
-        is a JSON format for representing electronic circuits. It is a sort of
-        assembly language electronic circuits. All tscircuit designs are
-        compiled to Circuit JSON as the intermediary format.
-      </span>
-    ),
-  },
-]
-
-export const FAQ = () => (
-  <section className="w-full py-12 md:py-24 lg:py-32" id="faq">
-    <div className="container px-4 md:px-6 mx-auto">
-      <div className="flex flex-col items-center justify-center space-y-4 text-center">
-        <div className="space-y-2">
-          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl">
-            Frequently Asked Questions
-          </h2>
-          <p className="max-w-[900px] text-muted-foreground md:text-xl">
-            Got questions? We've got answers.
-          </p>
-        </div>
-      </div>
-      <div className="mx-auto max-w-3xl space-y-4 py-12">
-        <Accordion type="single" collapsible>
-          {QUESTIONS.map((q, i) => (
-            <AccordionItem key={i} value={`item-${i + 1}`}>
-              <AccordionTrigger className="text-left">
-                {q.question}
-              </AccordionTrigger>{" "}
-              <AccordionContent>{q.answer}</AccordionContent>
-            </AccordionItem>
-          ))}
-        </Accordion>
-      </div>
-    </div>
-  </section>
-)

package/src/components/FileSidebar.tsx

@@ -1,271 +0,0 @@
-import React, { useMemo, useState } from "react"
-import { cn } from "@/lib/utils"
-import { PanelRightOpen, Plus, Loader2 } from "lucide-react"
-import { TreeView } from "@/components/ui/tree-view"
-import { Input } from "@/components/ui/input"
-import { transformFilesToTreeData } from "@/lib/utils/transformFilesToTreeData"
-import type {
-  ICreateFileProps,
-  ICreateFileResult,
-  IDeleteFileProps,
-  IDeleteFileResult,
-  IRenameFileProps,
-  IRenameFileResult,
-} from "@/hooks/useFileManagement"
-import type { Package } from "fake-snippets-api/lib/db/schema"
-type FileName = string
-
-interface FileSidebarProps {
-  files: Record<FileName, string>
-  currentFile: FileName | null
-  onFileSelect: (filename: FileName) => void
-  className?: string
-  fileSidebarState: ReturnType<typeof useState<boolean>>
-  handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
-  handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
-  handleRenameFile: (props: IRenameFileProps) => IRenameFileResult
-  isCreatingFile: boolean
-  setIsCreatingFile: React.Dispatch<React.SetStateAction<boolean>>
-  pkg?: Package
-  isLoadingFiles?: boolean
-  loadingProgress?: string | null
-}
-
-const FileSidebar: React.FC<FileSidebarProps> = ({
-  files,
-  currentFile,
-  onFileSelect,
-  className,
-  fileSidebarState,
-  handleCreateFile,
-  handleDeleteFile,
-  handleRenameFile,
-  isCreatingFile,
-  setIsCreatingFile,
-  pkg,
-  isLoadingFiles = true,
-  loadingProgress = null,
-}) => {
-  const [sidebarOpen, setSidebarOpen] = fileSidebarState
-  const [newFileName, setNewFileName] = useState("")
-  const [errorMessage, setErrorMessage] = useState("")
-  const [renamingFile, setRenamingFile] = useState<string | null>(null)
-  const [selectedFolderForCreation, setSelectedFolderForCreation] = useState<
-    string | null
-  >(null)
-  const selectedItemId = useMemo(() => currentFile || "", [currentFile])
-  const canModifyFiles = Boolean(pkg) && !isLoadingFiles
-
-  const onFolderSelect = (folderPath: string) => {
-    setSelectedFolderForCreation(folderPath)
-  }
-
-  const treeData = transformFilesToTreeData({
-    files,
-    currentFile,
-    renamingFile,
-    handleRenameFile,
-    handleDeleteFile,
-    setRenamingFile,
-    onFileSelect,
-    onFolderSelect,
-    canModifyFiles,
-    setErrorMessage,
-    setSelectedFolderForCreation,
-  })
-
-  const getCurrentFolderPath = (): string => {
-    if (selectedFolderForCreation) {
-      return selectedFolderForCreation
-    }
-
-    if (!selectedItemId || selectedItemId === "") return ""
-
-    const hasLeadingSlash = selectedItemId.startsWith("/")
-    const normalizedPath = hasLeadingSlash
-      ? selectedItemId.slice(1)
-      : selectedItemId
-    const pathParts = selectedItemId.split("/")
-
-    if (pathParts.length > 1) {
-      const folderPath = pathParts.slice(0, -1).join("/")
-      return hasLeadingSlash ? `/${folderPath}` : folderPath
-    }
-
-    return hasLeadingSlash ? "/" : ""
-  }
-
-  const constructFilePath = (fileName: string): string => {
-    const trimmedFileName = fileName.trim()
-
-    if (!trimmedFileName) {
-      return ""
-    }
-
-    const currentFolder = getCurrentFolderPath()
-
-    if (trimmedFileName.startsWith("/")) {
-      return trimmedFileName
-    }
-
-    if (!currentFolder || currentFolder === "/") {
-      const result =
-        currentFolder === "/" ? `/${trimmedFileName}` : trimmedFileName
-      return result
-    }
-
-    const result = `${currentFolder}/${trimmedFileName}`
-    return result
-  }
-  const handleCreateFileInline = () => {
-    const finalFileName = constructFilePath(newFileName)
-    if (!finalFileName) {
-      setErrorMessage("File name cannot be empty")
-      return
-    }
-
-    const { newFileCreated } = handleCreateFile({
-      newFileName: finalFileName,
-      onError: (error) => {
-        setErrorMessage(error.message)
-      },
-    })
-
-    if (newFileCreated) {
-      setIsCreatingFile(false)
-      setNewFileName("")
-      setErrorMessage("")
-      onFileSelect(finalFileName)
-      setSelectedFolderForCreation(null)
-    }
-  }
-
-  const handleCreateFileBlur = () => {
-    if (newFileName.trim() === "") {
-      setIsCreatingFile(false)
-      setNewFileName("")
-      setErrorMessage("")
-      setSelectedFolderForCreation(null)
-      return
-    }
-    handleCreateFileInline()
-  }
-
-  const toggleSidebar = () => {
-    setSidebarOpen(!sidebarOpen)
-    setErrorMessage("")
-    setIsCreatingFile(false)
-    setNewFileName("")
-    setSelectedFolderForCreation(null)
-  }
-
-  return (
-    <div
-      className={cn(
-        "flex-shrink-0 transition-all duration-300 border-r relative",
-        !sidebarOpen ? "w-0 overflow-hidden" : "w-[14rem]",
-        className,
-      )}
-    >
-      <div className="flex items-center justify-between px-2 py-2">
-        <button
-          onClick={toggleSidebar}
-          className={`text-gray-400 scale-90 transition-opacity duration-200 ${!sidebarOpen ? "opacity-0 pointer-events-none" : "opacity-100"}`}
-        >
-          <PanelRightOpen />
-        </button>
-        <div className="flex items-center gap-2">
-          {isLoadingFiles && (
-            <div className="flex items-center gap-1">
-              <Loader2 className="w-3 h-3 animate-spin text-gray-400" />
-              {loadingProgress && (
-                <span className="text-xs text-gray-400">{loadingProgress}</span>
-              )}
-            </div>
-          )}
-          <button
-            onClick={() => setIsCreatingFile(true)}
-            className="text-gray-400 hover:text-gray-600"
-            aria-label="Create new file"
-          >
-            <Plus className="w-5 h-5" />
-          </button>
-        </div>
-      </div>
-      {isCreatingFile && (
-        <div className="p-2">
-          <Input
-            autoFocus
-            value={newFileName}
-            spellCheck={false}
-            onChange={(e) => {
-              setNewFileName(e.target.value)
-              if (errorMessage) {
-                setErrorMessage("")
-              }
-            }}
-            onBlur={handleCreateFileBlur}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault()
-                handleCreateFileInline()
-              } else if (e.key === "Escape") {
-                e.preventDefault()
-                setIsCreatingFile(false)
-                setNewFileName("")
-                setErrorMessage("")
-                setSelectedFolderForCreation(null)
-              } else if (e.key === "Tab") {
-                e.preventDefault()
-                const currentFolder = getCurrentFolderPath()
-                if (currentFolder && !newFileName.includes("/")) {
-                  const displayPath = currentFolder.startsWith("/")
-                    ? currentFolder.slice(1)
-                    : currentFolder
-                  setNewFileName(`${displayPath}/`)
-                }
-              }
-            }}
-            placeholder={(() => {
-              const currentFolder = getCurrentFolderPath()
-              if (!currentFolder || currentFolder === "/") {
-                return "Enter file name (root folder)"
-              }
-              const displayPath = currentFolder.startsWith("/")
-                ? currentFolder.slice(1)
-                : currentFolder
-              return `Enter file name (${displayPath}/)`
-            })()}
-            className={
-              errorMessage ? "border-red-500 focus:border-red-500" : ""
-            }
-          />
-          {errorMessage && (
-            <div className="text-red-500 text-xs mt-1 px-1">{errorMessage}</div>
-          )}
-          <div className="text-gray-400 text-xs mt-1 px-1">
-            Tip: Use / for subfolders, Tab to auto-complete current folder
-          </div>
-        </div>
-      )}
-      <div className="flex-1 border-t h-full">
-        <TreeView
-          data={treeData}
-          setSelectedItemId={(value) => {
-            if (value && files[value]) {
-              onFileSelect(value)
-            }
-          }}
-          selectedItemId={selectedItemId}
-          onSelectChange={(item) => {
-            if (item?.onClick) {
-              item.onClick()
-            }
-          }}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default FileSidebar