@tscircuit/fake-snippets 0.0.1

package/src/lib/templates/manual-edits-template.ts

@@ -0,0 +1,5 @@
+export default {
+  pcb_placements: [],
+  edit_events: [],
+  manual_trace_hints: [],
+}

package/src/lib/templates/usb-c-led-flashlight-template.ts

@@ -0,0 +1,22 @@
+export const usbCLedFlashlightTemplate = {
+  type: "board",
+  code: `
+import { useRedLed } from "@tsci/seveibar.red-led"
+import { usePushButton } from "@tsci/seveibar.push-button"
+import { useUsbC } from "@tsci/seveibar.smd-usb-c"
+
+export default () => {
+  const USBC = useUsbC("USBC")
+  const Button = usePushButton("SW1")
+  const Led = useRedLed("LED")
+  return (
+    <board width="12mm" height="30mm" schAutoLayoutEnabled autorouter="auto-cloud">
+      <USBC GND1="net.GND" GND2="net.GND" pcbY={-10} VBUS1="net.VBUS" VBUS2="net.VBUS" />
+      <Led neg="net.GND" pcbY={12} />
+      <Button pcbY={0} pin2=".R1 > .pos" pin3="net.VBUS" />
+      <resistor name="R1" footprint="0603" resistance="1k" pcbY={7} />
+      <trace from=".R1 > .neg" to={Led.pos} />
+    </board>
+  )
+}`.trim(),
+}

package/src/lib/utils/checkIfManualEditsImported.ts

@@ -0,0 +1,6 @@
+export const checkIfManualEditsImported = (files: Record<string, string>) => {
+  const importRegex =
+    /import\s+(?:\*\s+as\s+)?([a-zA-Z_$][\w$]*)\s+from\s+["']\.\/manual-edits\.json["'];?/
+  const hasManualEditsImported = importRegex.test(files["index.tsx"])
+  return files["manual-edits.json"].length > 0 && !hasManualEditsImported
+}

package/src/lib/utils/getSyntaxError.ts

@@ -0,0 +1,13 @@
+import * as Babel from "@babel/standalone"
+
+export function getSyntaxError(code: string): string | null {
+  try {
+    Babel.transform(code, {
+      filename: "index.tsx",
+      presets: ["react", "typescript"],
+    })
+    return null
+  } catch (error: unknown) {
+    return (error as Error).message
+  }
+}

package/src/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/src/lib/utils/load-prettier.ts

@@ -0,0 +1,18 @@
+export async function loadPrettier() {
+  if (window.prettier) return
+
+  await Promise.all([
+    loadScript("https://unpkg.com/prettier@2.8.8/standalone.js"),
+    loadScript("https://unpkg.com/prettier@2.8.8/parser-typescript.js"),
+  ])
+}
+
+function loadScript(src: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script")
+    script.src = src
+    script.onload = () => resolve()
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+}

package/src/lib/utils/parseFootprintParams.ts

@@ -0,0 +1,52 @@
+export interface FootprintParams {
+  [key: string]: string | number | boolean | string[]
+}
+
+/**
+ * Parses and normalizes footprint parameters
+ * @param params Raw parameters from footprint
+ * @returns Normalized parameters with proper formatting
+ */
+export function parseFootprintParams(params: FootprintParams): FootprintParams {
+  if (params.grid) {
+    const grid = params.grid
+    if (typeof grid === "object" && grid !== null) {
+      const { x, y } = grid as any
+      params.grid = `${x}x${y}`
+    } else if (typeof grid === "string") {
+      const gridMatch = grid.match(/^(\d+)(?:x(\d+)?)?$/)
+      if (gridMatch) {
+        const [, x, y = x] = gridMatch
+        params.grid = `${x}x${y}`
+      }
+    } else if (typeof grid === "number") {
+      params.grid = `${grid}x${grid}`
+    }
+    delete params.grid3x3
+  }
+
+  if ("missing" in params && typeof params.missing === "string") {
+    const value = params.missing
+    if (value === "") {
+      params.missing = []
+    } else if (!Array.isArray(value)) {
+      if (value.startsWith("missing(") && value.endsWith(")")) {
+        const pinsStr = value.slice(8, -1)
+        params.missing = pinsStr ? pinsStr.split(",").map((p) => p.trim()) : []
+      } else {
+        params.missing = value
+          .split(",")
+          .map((p) => p.trim())
+          .filter(Boolean)
+      }
+    }
+  }
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (typeof value === "string" && !isNaN(Number(value)) && key !== "grid") {
+      params[key] = Number(Number(value).toFixed(2))
+    }
+  })
+
+  return params
+}

package/src/lib/utils/parseJsonOrNull.ts

@@ -0,0 +1,8 @@
+export const parseJsonOrNull = (string: string | null): any => {
+  if (!string) return null
+  try {
+    return JSON.parse(string)
+  } catch {
+    return null
+  }
+}

package/src/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
+      : [],
+  }
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App.tsx"
+import "./index.css"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/pages/ai.tsx

@@ -0,0 +1,92 @@
+import AIChatInterface from "@/components/AiChatInterface"
+import Header from "@/components/Header"
+import { PreviewContent } from "@/components/PreviewContent"
+import { useRunTsx } from "@/hooks/use-run-tsx"
+import { useSaveSnippet } from "@/hooks/use-save-snippet"
+import { useSnippet } from "@/hooks/use-snippet"
+import { useToast } from "@/hooks/use-toast"
+import { useEffect, useState } from "react"
+import { useLocation } from "wouter"
+
+export const AiPage = () => {
+  const [code, setCode] = useState("")
+  const [manualEditsFileContent, setManualEditsFileContent] = useState("")
+  const [dts, setDts] = useState("")
+  const [isStreaming, setIsStreaming] = useState(false)
+  const { saveSnippet, isLoading: isSaving } = useSaveSnippet()
+  const snippetIdFromUrl = new URLSearchParams(window.location.search).get(
+    "snippet_id",
+  )
+  const [snippetId, setSnippetId] = useState<string | null>(snippetIdFromUrl)
+  const { data: snippet } = useSnippet(snippetId)
+  const { toast } = useToast()
+  const [, navigate] = useLocation()
+  const {
+    message: errorMessage,
+    circuitJson,
+    triggerRunTsx,
+    isRunningCode,
+    tsxRunTriggerCount,
+    circuitJsonKey,
+  } = useRunTsx({
+    code,
+    type: "board",
+    isStreaming,
+    circuitDisplayName: snippet?.name,
+  })
+
+  useEffect(() => {
+    if (!code && snippet && snippetIdFromUrl) {
+      setCode(snippet.code)
+    }
+  }, [code, snippet])
+
+  const hasUnsavedChanges = snippet?.code !== code
+
+  return (
+    <div>
+      <Header />
+      <div className="flex bg-gray-100">
+        <div className="w-1/2">
+          <AIChatInterface
+            code={code}
+            hasUnsavedChanges={hasUnsavedChanges}
+            snippetId={snippet?.snippet_id}
+            onCodeChange={setCode}
+            errorMessage={errorMessage}
+            onStartStreaming={() => {
+              setIsStreaming(true)
+            }}
+            onStopStreaming={() => {
+              setIsStreaming(false)
+            }}
+          />
+        </div>
+        <div className="w-1/2">
+          <div className="p-4 h-full">
+            <PreviewContent
+              className="bg-white h-full p-4 rounded-lg shadow"
+              code={code}
+              isStreaming={isStreaming}
+              isRunningCode={isRunningCode}
+              onCodeChange={setCode}
+              onDtsChange={setDts}
+              showCodeTab
+              triggerRunTsx={triggerRunTsx}
+              errorMessage={errorMessage}
+              circuitJson={circuitJson}
+              circuitJsonKey={circuitJsonKey}
+              manualEditsFileContent={manualEditsFileContent}
+              onManualEditsFileContentChange={(
+                newManualEditsFileContent: string,
+              ) => {
+                setManualEditsFileContent(newManualEditsFileContent)
+              }}
+              tsxRunTriggerCount={tsxRunTriggerCount}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/authorize.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import Header from "@/components/Header"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useEffect, useState } from "react"
+import * as jose from "jose"
+import Footer from "@/components/Footer"
+import { useLocation } from "wouter"
+
+const AuthenticatePageInnerContent = () => {
+  const [location, setLocation] = useLocation()
+  const setSession = useGlobalStore((s) => s.setSession)
+  const [message, setMessage] = useState("logging you in...")
+  const searchParams = new URLSearchParams(window.location.search.split("?")[1])
+  const session_token = searchParams.get("session_token")
+  useEffect(() => {
+    async function login() {
+      if (!session_token) {
+        setMessage("couldn't log in - no token")
+        return
+      }
+
+      if (session_token) {
+        const decodedToken = jose.decodeJwt(session_token)
+        setSession({
+          ...(decodedToken as any),
+          token: session_token,
+        })
+        setLocation("/")
+        return
+      }
+    }
+    login().catch((e) => {
+      setMessage(`error logging you in\n\n${e.toString()}`)
+    })
+  }, [session_token])
+
+  return (
+    <div className="bg-white p-8 min-h-screen">
+      <div>Authentication Redirect</div>
+      <pre>{message}</pre>
+    </div>
+  )
+}
+
+export const AuthorizePage = () => (
+  <div>
+    <Header />
+    <AuthenticatePageInnerContent />
+    <Footer />
+  </div>
+)
+
+export default AuthorizePage

package/src/pages/dashboard.tsx

@@ -0,0 +1,165 @@
+import React from "react"
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import Header from "@/components/Header"
+import Footer from "@/components/Footer"
+import { Snippet } from "fake-snippets-api/lib/db/schema"
+import { Link } from "wouter"
+import { CreateNewSnippetWithAiHero } from "@/components/CreateNewSnippetWithAiHero"
+import { Edit2, Star } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { PrefetchPageLink } from "@/components/PrefetchPageLink"
+
+export const DashboardPage = () => {
+  const axios = useAxios()
+
+  const currentUser = useGlobalStore((s) => s.session?.github_username)
+
+  const {
+    data: mySnippets,
+    isLoading,
+    error,
+  } = useQuery<Snippet[]>("userSnippets", async () => {
+    const response = await axios.get(`/snippets/list?owner_name=${currentUser}`)
+    return response.data.snippets.sort(
+      (a: any, b: any) =>
+        new Date(b.updated_at || b.created_at).getTime() -
+        new Date(a.updated_at || a.created_at).getTime(),
+    )
+  })
+
+  const { data: trendingSnippets } = useQuery<Snippet[]>(
+    "trendingSnippets",
+    async () => {
+      const response = await axios.get("/snippets/list_trending")
+      return response.data.snippets
+    },
+  )
+
+  const { data: newestSnippets } = useQuery<Snippet[]>(
+    "newestSnippets",
+    async () => {
+      const response = await axios.get("/snippets/list_newest")
+      return response.data.snippets
+    },
+  )
+
+  return (
+    <div>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">Dashboard</h1>
+        <div className="flex md:flex-row flex-col">
+          <div className="md:w-3/4 p-0 md:pr-6">
+            <div className="mt-6 mb-4">
+              <div className="flex items-center">
+                <h2 className="text-sm text-gray-600 whitespace-nowrap">
+                  Edit Recent
+                </h2>
+                <div className="flex gap-2 items-center overflow-x-scroll md:overflow-hidden ">
+                  {mySnippets &&
+                    mySnippets.slice(0, 3).map((snippet) => (
+                      <div key={snippet.snippet_id}>
+                        <PrefetchPageLink
+                          href={`/editor?snippet_id=${snippet.snippet_id}`}
+                          className="text-blue-600 hover:underline"
+                        >
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="font-medium"
+                          >
+                            {snippet.unscoped_name}
+                            <Edit2 className="w-3 h-3 ml-2" />
+                          </Button>
+                        </PrefetchPageLink>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            </div>
+            <CreateNewSnippetWithAiHero />
+            <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
+              Your Recent Snippets
+            </h2>
+            {isLoading && <div>Loading...</div>}
+            {mySnippets && (
+              <ul className="space-y-1">
+                {mySnippets.slice(0, 10).map((snippet) => (
+                  <li
+                    key={snippet.snippet_id}
+                    className="flex items-center justify-between"
+                  >
+                    <Link
+                      href={`/${snippet.owner_name}/${snippet.unscoped_name}`}
+                      className="text-blue-600 hover:underline text-sm"
+                    >
+                      {snippet.unscoped_name}
+                    </Link>
+                    <span className="text-xs text-gray-500">
+                      {new Date(snippet.created_at).toLocaleDateString()}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+            {mySnippets && mySnippets.length > 10 && (
+              <Link
+                href={`/${currentUser}`}
+                className="text-sm text-blue-600 hover:underline mt-2 inline-block"
+              >
+                View all snippets
+              </Link>
+            )}
+          </div>
+          <div className="md:w-1/4">
+            <h2 className="text-sm font-bold mb-2 text-gray-700 border-b border-gray-200">
+              Trending Snippets
+            </h2>
+            {trendingSnippets && (
+              <ul className="space-y-1">
+                {trendingSnippets.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>
+            )}
+            <h2 className="text-sm font-bold mt-8 mb-2 text-gray-700 border-b border-gray-200">
+              Newest Snippets
+            </h2>
+            {newestSnippets && (
+              <ul className="space-y-1">
+                {newestSnippets.map((snippet) => (
+                  <li key={snippet.snippet_id}>
+                    <Link
+                      href={`/${snippet.name}`}
+                      className="text-blue-600 hover:underline text-sm"
+                    >
+                      {snippet.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  )
+}

package/src/pages/dev-login.tsx

@@ -0,0 +1,68 @@
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
+import { useState } from "react"
+import { useLocation } from "wouter"
+
+export const DevLoginPage = () => {
+  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
+  const [username, setUsername] = useState("")
+  const setSession = useGlobalStore((s) => s.setSession)
+  const [, setLocation] = useLocation()
+
+  const handleDevLogin = async () => {
+    try {
+      // Call passwordless login endpoint
+      const response = await fetch(
+        `${snippetsBaseApiUrl}/sessions/create_passwordless`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            github_username: username,
+          }),
+        },
+      )
+
+      const data = await response.json()
+      const token = data.session.token
+
+      if (!token) {
+        throw new Error("No token received from server")
+      }
+
+      // Set session in global store
+      setSession({
+        token,
+        account_id: data.session.account_id,
+        session_id: data.session.session_id,
+        github_username: username,
+      })
+
+      // Redirect to home page
+      setLocation("/")
+    } catch (error) {
+      console.error("Dev login failed:", error)
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
+      <h1 className="text-2xl font-bold mb-4">Development Login</h1>
+      <input
+        type="text"
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+        placeholder="Enter GitHub username"
+        className="mb-4 p-2 border border-gray-300 rounded"
+      />
+      <button
+        onClick={handleDevLogin}
+        className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Login
+      </button>
+    </div>
+  )
+}