@tscircuit/fake-snippets 0.0.73 → 0.0.75

package/src/components/package-port/CodeAndPreview.tsx

@@ -164,9 +164,9 @@ export function CodeAndPreview({ pkg }: Props) {
     )
   }
 
-  if ((!pkg && urlParams.package_id) || isLoading) {
+  if (urlParams.package_id && (!pkg || isLoading)) {
     return (
-      <div className="flex items-center justify-center h-64">
+      <div className="flex items-center justify-center h-[60vh]">
         <div className="flex flex-col items-center justify-center">
           <div className="text-lg text-gray-500 mb-4">Loading</div>
           <Loader2 className="w-16 h-16 animate-spin text-gray-400" />
@@ -200,6 +200,7 @@ export function CodeAndPreview({ pkg }: Props) {
           )}
         >
           <CodeEditor
+            isSaving={isSaving}
             handleCreateFile={createFile}
             handleDeleteFile={deleteFile}
             currentFile={currentFile}

package/src/components/package-port/CodeEditor.tsx

@@ -49,6 +49,7 @@ export const CodeEditor = ({
   onCodeChange,
   readOnly = false,
   files = [],
+  isSaving = false,
   isStreaming = false,
   showImportAndFormatButtons = true,
   onFileContentChanged,
@@ -60,6 +61,7 @@ export const CodeEditor = ({
 }: {
   onCodeChange: (code: string, filename?: string) => void
   files: PackageFile[]
+  isSaving?: boolean
   handleCreateFile: (props: ICreateFileProps) => ICreateFileResult
   handleDeleteFile: (props: IDeleteFileProps) => IDeleteFileResult
   readOnly?: boolean
@@ -242,7 +244,7 @@ export const CodeEditor = ({
         ? json()
         : javascript({ typescript: true, jsx: true }),
       keymap.of([indentWithTab]),
-      EditorState.readOnly.of(readOnly),
+      EditorState.readOnly.of(readOnly || isSaving),
       EditorView.updateListener.of((update) => {
         if (update.docChanged) {
           const newContent = update.state.doc.toString()
@@ -448,7 +450,7 @@ export const CodeEditor = ({
     return () => {
       view.destroy()
     }
-  }, [!isStreaming, currentFile, code !== "", Boolean(highlighter)])
+  }, [!isStreaming, currentFile, code !== "", Boolean(highlighter), isSaving])
 
   const updateCurrentEditorContent = (newContent: string) => {
     if (viewRef.current) {

package/src/hooks/use-create-package-mutation.ts

@@ -2,7 +2,6 @@ import type { Package } from "fake-snippets-api/lib/db/schema"
 import { useMutation } from "react-query"
 import { useAxios } from "./use-axios"
 import { useGlobalStore } from "./use-global-store"
-import { useUrlParams } from "./use-url-params"
 
 export const useCreatePackageMutation = ({
   onSuccess,
@@ -42,13 +41,7 @@ export const useCreatePackageMutation = ({
     },
     {
       onSuccess: (pkg: Package) => {
-        const url = new URL(window.location.href)
-        url.searchParams.set("package_id", pkg.package_id)
-        url.searchParams.delete("template")
-        url.searchParams.delete("should_create_package")
-        window.history.pushState({}, "", url.toString())
         onSuccess?.(pkg)
-        window.dispatchEvent(new Event("popstate"))
       },
       onError: (error: any) => {
         console.error("Error creating package:", error)

package/src/hooks/use-current-package-release.ts

@@ -0,0 +1,28 @@
+import { useParams } from "wouter"
+import { useCurrentPackageId } from "./use-current-package-id"
+import { useUrlParams } from "./use-url-params"
+import { usePackageRelease } from "./use-package-release"
+
+export const useCurrentPackageRelease = () => {
+  const { packageId } = useCurrentPackageId()
+  const urlParams = useUrlParams()
+  const { author, packageName } = useParams()
+
+  const version = urlParams.version
+  const releaseId = urlParams.package_release_id
+
+  let query: Parameters<typeof usePackageRelease>[0] | null = null
+
+  if (releaseId) {
+    query = { package_release_id: releaseId }
+  } else if (version && author && packageName) {
+    query = { package_name_with_version: `${author}/${packageName}@${version}` }
+  } else if (author && packageName) {
+    query = { package_name: `${author}/${packageName}`, is_latest: true }
+  } else if (packageId) {
+    query = { package_id: packageId, is_latest: true }
+  }
+
+  const { data: packageRelease, ...rest } = usePackageRelease(query)
+  return { packageRelease, ...rest }
+}

package/src/hooks/useFileManagement.ts

@@ -91,7 +91,31 @@ export function useFileManagement({
         })
       },
     })
-  const createPackageMutation = useCreatePackageMutation()
+  const createPackageMutation = useCreatePackageMutation({
+    onSuccess: (newPackage) => {
+      createRelease(
+        {
+          package_name_with_version: `${newPackage.name}@latest`,
+        },
+        {
+          onSuccess: () => {
+            updatePackageFilesMutation.mutate({
+              package_name_with_version: `${newPackage.name}@latest`,
+              ...newPackage,
+            })
+            const url = new URL(window.location.href)
+            url.searchParams.set("package_id", newPackage.package_id)
+            url.searchParams.delete("template")
+            url.searchParams.delete("should_create_package")
+            window.history.pushState({}, "", url.toString())
+            window.dispatchEvent(new Event("popstate"))
+            updateLastUpdated()
+            setInitialFiles([...localFiles])
+          },
+        },
+      )
+    },
+  })
 
   useEffect(() => {
     if (!currentPackage || isLoadingPackageFilesWithContent) {
@@ -204,29 +228,10 @@ export function useFileManagement({
       return
     }
 
-    const newPackage = await createPackageMutation.mutateAsync({
+    await createPackageMutation.mutateAsync({
       name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
       is_private: isPrivate,
     })
-
-    if (newPackage) {
-      createRelease(
-        {
-          package_name_with_version: `${newPackage.name}@latest`,
-        },
-        {
-          onSuccess: () => {
-            updatePackageFilesMutation.mutate({
-              package_name_with_version: `${newPackage.name}@latest`,
-              ...newPackage,
-            })
-            updateLastUpdated()
-            setInitialFiles([...localFiles])
-          },
-        },
-      )
-    }
-    updateLastUpdated()
   }
 
   const saveFiles = () => {

package/src/lib/download-fns/download-pcb-svg.ts

@@ -0,0 +1,35 @@
+import { AnyCircuitElement } from "circuit-json"
+import { convertCircuitJsonToPcbSvg } from "circuit-to-svg"
+import { saveAs } from "file-saver"
+
+export interface DownloadPcbSvgOptions {
+  layer?: "all" | "top" | "bottom"
+  drawPaddingOutsideBoard?: boolean
+  backgroundColor?: string
+  matchAspectRatio?: boolean
+}
+
+export const downloadPcbSvg = (
+  circuitJson: AnyCircuitElement[],
+  fileName: string,
+  options: DownloadPcbSvgOptions = {},
+) => {
+  const convertOptions: any = {}
+  if (options.layer && options.layer !== "all") {
+    convertOptions.layer = options.layer
+  }
+  if (options.matchAspectRatio) {
+    convertOptions.matchBoardAspectRatio = true
+  }
+  if (typeof options.drawPaddingOutsideBoard === "boolean") {
+    convertOptions.drawPaddingOutsideBoard = options.drawPaddingOutsideBoard
+  }
+  if (options.backgroundColor) {
+    convertOptions.backgroundColor = options.backgroundColor
+  }
+
+  const svg = convertCircuitJsonToPcbSvg(circuitJson, convertOptions)
+
+  const blob = new Blob([svg], { type: "image/svg+xml" })
+  saveAs(blob, fileName + ".svg")
+}

package/src/lib/utils/timeAgo.ts

@@ -3,7 +3,18 @@ import en from "javascript-time-ago/locale/en"
 
 TimeAgo.addDefaultLocale(en)
 
-export const timeAgo = (date: Date) => {
-  const timeAgo = new TimeAgo("en-US")
-  return timeAgo.format(date)
+export const timeAgo = (
+  date: Date | string | null | undefined,
+  fallback = "???",
+) => {
+  if (!date) return fallback
+  if (typeof date === "string") {
+    date = new Date(date)
+  }
+  try {
+    const timeAgo = new TimeAgo("en-US")
+    return timeAgo.format(date)
+  } catch (error) {
+    return fallback
+  }
 }

package/src/pages/package-builds.tsx

@@ -6,7 +6,7 @@ import { Helmet } from "react-helmet-async"
 import { useCurrentPackageId } from "@/hooks/use-current-package-id"
 import { NotFound } from "@/components/NotFound"
 import { ErrorOutline } from "@/components/ErrorOutline"
-import { DeploymentDetailsPage } from "@/components/PackageBuildsPage/DeploymentDetailsPage"
+import { PackageBuildDetailsPage } from "@/components/PackageBuildsPage/PackageBuildDetailsPage"
 
 export const EditorPage = () => {
   const { packageId } = useCurrentPackageId()
@@ -26,7 +26,7 @@ export const EditorPage = () => {
         )}
       </Helmet>
       <Header />
-      <DeploymentDetailsPage />
+      <PackageBuildDetailsPage />
       <Footer />
     </div>
   )

package/src/components/PackageBuildsPage/DeploymentDetailsPage.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { BuildPreviewContent } from "./build-preview-content"
-import { DeploymentDetailsPanel } from "./deployment-details-panel"
-import { DeploymentHeader } from "./deployment-header"
-import { CollapsibleSection } from "./collapsible-section"
-
-export const DeploymentDetailsPage = () => {
-  const [openSections, setOpenSections] = useState<Record<string, boolean>>({})
-
-  const toggleSection = (section: string) => {
-    setOpenSections((prev) => ({
-      ...prev,
-      [section]: !prev[section],
-    }))
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-50 text-gray-900">
-      <DeploymentHeader />
-
-      <div className="px-6 py-6 container mx-auto">
-        {/* Main Content */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8 items-start">
-          {/* Preview Section */}
-          <div className="lg:col-span-2">
-            <div className="bg-white border border-gray-200 rounded-lg p-4 flex items-center justify-center max-h-[420px]">
-              <BuildPreviewContent />
-            </div>
-          </div>
-
-          {/* Details Panel */}
-          <DeploymentDetailsPanel />
-        </div>
-
-        {/* Collapsible Sections */}
-        <div className="space-y-4 mb-8">
-          <CollapsibleSection
-            title="Transpilation Logs"
-            duration="1m 15s"
-            isOpen={openSections.summary}
-            onToggle={() => toggleSection("summary")}
-          />
-
-          <CollapsibleSection
-            title="Circuit JSON Build Logs"
-            duration="2m 29s"
-            isOpen={openSections.logs}
-            onToggle={() => toggleSection("logs")}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/components/PackageBuildsPage/deployment-details-panel.tsx

@@ -1,84 +0,0 @@
-import { Globe, GitBranch, GitCommit, Clock } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
-
-export function DeploymentDetailsPanel() {
-  return (
-    <div className="space-y-6 bg-white p-4 border border-gray-200 rounded-lg">
-      {/* Created */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Created</h3>
-        <div className="flex items-center gap-2">
-          <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-xs font-bold">
-            I
-          </div>
-          <span className="text-sm">imrishabh18</span>
-          <span className="text-sm text-gray-500">48m ago</span>
-        </div>
-      </div>
-
-      {/* Status */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Status</h3>
-        <div className="flex items-center gap-2">
-          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-          <span className="text-sm">Ready</span>
-          <Badge
-            variant="secondary"
-            className="bg-gray-200 text-gray-700 text-xs"
-          >
-            Latest
-          </Badge>
-        </div>
-      </div>
-
-      {/* Time to Ready */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">
-          Time to Ready
-        </h3>
-        <div className="flex items-center gap-2">
-          <Clock className="w-4 h-4 text-gray-500" />
-          <span className="text-sm">1m 3s</span>
-          <span className="text-sm text-gray-500">47m ago</span>
-        </div>
-      </div>
-
-      {/* Version */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Version</h3>
-        <div className="flex items-center gap-2">
-          <Globe className="w-4 h-4 text-gray-500" />
-          <span className="text-sm">v1.0.3</span>
-          <Badge variant="default" className="bg-blue-600 text-white text-xs">
-            Current
-          </Badge>
-        </div>
-      </div>
-
-      {/* Outputs */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Outputs</h3>
-        <div>
-          <span className="text-sm text-gray-400">None</span>
-        </div>
-      </div>
-
-      {/* Source */}
-      <div>
-        <h3 className="text-sm font-medium text-gray-600 mb-2">Source</h3>
-        <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <GitBranch className="w-4 h-4 text-gray-500" />
-            <span className="text-sm">main</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <GitCommit className="w-4 h-4 text-gray-500" />
-            <span className="text-sm text-gray-500">
-              edfdc67 support empty file creation (#356)
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}