@tscircuit/fake-snippets 0.0.68 → 0.0.70

package/dist/index.d.ts

@@ -508,6 +508,7 @@ declare const packageSchema: z.ZodObject<{
     ai_description: z.ZodNullable<z.ZodString>;
     latest_license: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     ai_usage_instructions: z.ZodNullable<z.ZodString>;
+    default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     unscoped_name: string;
@@ -536,6 +537,7 @@ declare const packageSchema: z.ZodObject<{
     ai_usage_instructions: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     latest_license?: string | null | undefined;
+    default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
 }, {
     name: string;
     unscoped_name: string;
@@ -564,6 +566,7 @@ declare const packageSchema: z.ZodObject<{
     is_source_from_github?: boolean | undefined;
     website?: string | null | undefined;
     latest_license?: string | null | undefined;
+    default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
 }>;
 type Package = z.infer<typeof packageSchema>;
 declare const jlcpcbOrderStateSchema: z.ZodObject<{
@@ -778,6 +781,7 @@ declare const createDatabase: ({ seed }?: {
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }[];
     orders: {
         error: z.objectOutputType<{
@@ -1068,6 +1072,7 @@ declare const createDatabase: ({ seed }?: {
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }[];
     orders: {
         error: z.objectOutputType<{

package/dist/index.js

@@ -187,7 +187,8 @@ var packageSchema = z.object({
   star_count: z.number().default(0),
   ai_description: z.string().nullable(),
   latest_license: z.string().nullable().optional(),
-  ai_usage_instructions: z.string().nullable()
+  ai_usage_instructions: z.string().nullable(),
+  default_view: z.enum(["files", "3d", "pcb", "schematic"]).default("files").optional()
 });
 var jlcpcbOrderStateSchema = z.object({
   jlcpcb_order_state_id: z.string(),

package/dist/schema.d.ts

@@ -633,6 +633,7 @@ declare const packageSchema: z.ZodObject<{
     ai_description: z.ZodNullable<z.ZodString>;
     latest_license: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     ai_usage_instructions: z.ZodNullable<z.ZodString>;
+    default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     unscoped_name: string;
@@ -661,6 +662,7 @@ declare const packageSchema: z.ZodObject<{
     ai_usage_instructions: string | null;
     snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
     latest_license?: string | null | undefined;
+    default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
 }, {
     name: string;
     unscoped_name: string;
@@ -689,6 +691,7 @@ declare const packageSchema: z.ZodObject<{
     is_source_from_github?: boolean | undefined;
     website?: string | null | undefined;
     latest_license?: string | null | undefined;
+    default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
 }>;
 type Package = z.infer<typeof packageSchema>;
 declare const jlcpcbOrderStateSchema: z.ZodObject<{
@@ -1068,6 +1071,7 @@ declare const databaseSchema: z.ZodObject<{
         ai_description: z.ZodNullable<z.ZodString>;
         latest_license: z.ZodOptional<z.ZodNullable<z.ZodString>>;
         ai_usage_instructions: z.ZodNullable<z.ZodString>;
+        default_view: z.ZodOptional<z.ZodDefault<z.ZodEnum<["files", "3d", "pcb", "schematic"]>>>;
     }, "strip", z.ZodTypeAny, {
         name: string;
         unscoped_name: string;
@@ -1096,6 +1100,7 @@ declare const databaseSchema: z.ZodObject<{
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }, {
         name: string;
         unscoped_name: string;
@@ -1124,6 +1129,7 @@ declare const databaseSchema: z.ZodObject<{
         is_source_from_github?: boolean | undefined;
         website?: string | null | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }>, "many">>;
     orders: z.ZodDefault<z.ZodArray<z.ZodObject<{
         order_id: z.ZodString;
@@ -1572,6 +1578,7 @@ declare const databaseSchema: z.ZodObject<{
         ai_usage_instructions: string | null;
         snippet_type?: "board" | "package" | "model" | "footprint" | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }[];
     orders: {
         error: z.objectOutputType<{
@@ -1788,6 +1795,7 @@ declare const databaseSchema: z.ZodObject<{
         is_source_from_github?: boolean | undefined;
         website?: string | null | undefined;
         latest_license?: string | null | undefined;
+        default_view?: "files" | "3d" | "pcb" | "schematic" | undefined;
     }[] | undefined;
     orders?: {
         error: z.objectInputType<{

package/dist/schema.js

@@ -182,7 +182,8 @@ var packageSchema = z.object({
   star_count: z.number().default(0),
   ai_description: z.string().nullable(),
   latest_license: z.string().nullable().optional(),
-  ai_usage_instructions: z.string().nullable()
+  ai_usage_instructions: z.string().nullable(),
+  default_view: z.enum(["files", "3d", "pcb", "schematic"]).default("files").optional()
 });
 var jlcpcbOrderStateSchema = z.object({
   jlcpcb_order_state_id: z.string(),

package/fake-snippets-api/lib/db/schema.ts

@@ -219,6 +219,10 @@ export const packageSchema = z.object({
   ai_description: z.string().nullable(),
   latest_license: z.string().nullable().optional(),
   ai_usage_instructions: z.string().nullable(),
+  default_view: z
+    .enum(["files", "3d", "pcb", "schematic"])
+    .default("files")
+    .optional(),
 })
 export type Package = z.infer<typeof packageSchema>
 

package/fake-snippets-api/routes/api/packages/create.ts

@@ -55,6 +55,7 @@ export default withRouteSpec({
     is_public: is_private === true ? false : true,
     is_unlisted: is_private === true ? true : (is_unlisted ?? false),
     ai_usage_instructions: "placeholder ai usage instructions",
+    default_view: "files",
   })
 
   if (!newPackage) {

package/fake-snippets-api/routes/api/packages/get.ts

@@ -34,6 +34,18 @@ export default withRouteSpec({
     })
   }
 
+  if (
+    foundPackage.is_private &&
+    auth?.github_username !== foundPackage.owner_github_username
+  ) {
+    return ctx.error(404, {
+      error_code: "package_not_found",
+      message: `Package not found (searched using ${JSON.stringify(
+        req.commonParams,
+      )})`,
+    })
+  }
+
   return ctx.json({
     ok: true,
     package: {

package/fake-snippets-api/routes/api/packages/update.ts

@@ -20,6 +20,7 @@ export default withRouteSpec({
       website: z.string().optional(),
       is_private: z.boolean().optional(),
       is_unlisted: z.boolean().optional(),
+      default_view: z.enum(["files", "3d", "pcb", "schematic"]).optional(),
     })
     .transform((data) => ({
       ...data,
@@ -30,8 +31,15 @@ export default withRouteSpec({
     package: packageSchema,
   }),
 })(async (req, ctx) => {
-  const { package_id, name, description, website, is_private, is_unlisted } =
-    req.jsonBody
+  const {
+    package_id,
+    name,
+    description,
+    website,
+    is_private,
+    is_unlisted,
+    default_view,
+  } = req.jsonBody
 
   const packageIndex = ctx.db.packages.findIndex(
     (p) => p.package_id === package_id,
@@ -77,6 +85,7 @@ export default withRouteSpec({
     is_public:
       is_private !== undefined ? !is_private : existingPackage.is_public,
     is_unlisted: is_unlisted ?? existingPackage.is_unlisted,
+    default_view: default_view ?? existingPackage.default_view,
     updated_at: new Date().toISOString(),
   })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.68",
+  "version": "0.0.70",
   "type": "module",
   "repository": {
     "type": "git",
@@ -75,7 +75,7 @@
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/math-utils": "^0.0.10",
     "@tscircuit/mm": "^0.0.8",
-    "@tscircuit/props": "^0.0.143",
+    "@tscircuit/props": "^0.0.186",
     "@types/file-saver": "^2.0.7",
     "@types/ms": "^0.7.34",
     "@typescript/ata": "^0.9.7",
@@ -147,7 +147,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tscircuit/core": "^0.0.384",
     "@tscircuit/prompt-benchmarks": "^0.0.28",
-    "@tscircuit/runframe": "^0.0.485",
+    "@tscircuit/runframe": "^0.0.494",
     "@types/babel__standalone": "^7.1.7",
     "@types/bun": "^1.1.10",
     "@types/country-list": "^2.1.4",

package/src/components/CircuitJsonImportDialog.tsx

@@ -5,6 +5,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogFooter,
+  DialogDescription,
 } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
@@ -13,6 +14,10 @@ import { useToast } from "@/hooks/use-toast"
 import { useLocation } from "wouter"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { convertCircuitJsonToTscircuit } from "circuit-json-to-tscircuit"
+import { useCreatePackageMutation } from "@/hooks/use-create-package-mutation"
+import { generateRandomPackageName } from "./package-port/CodeAndPreview"
+import { useCreatePackageReleaseMutation } from "@/hooks/use-create-package-release-mutation"
+import { useCreatePackageFilesMutation } from "@/hooks/use-create-package-files-mutation"
 
 interface CircuitJsonImportDialogProps {
   open: boolean
@@ -36,11 +41,29 @@ export function CircuitJsonImportDialog({
   const [file, setFile] = useState<File | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-  const axios = useAxios()
+  const loggedInUser = useGlobalStore((s) => s.session)
   const { toast } = useToast()
+  const axios = useAxios()
   const [, navigate] = useLocation()
   const isLoggedIn = useGlobalStore((s) => Boolean(s.session))
-  const session = useGlobalStore((s) => s.session)
+  const createPackageMutation = useCreatePackageMutation()
+  const { mutate: createRelease } = useCreatePackageReleaseMutation({
+    onSuccess: () => {
+      toast({
+        title: "Package released",
+        description: "Your package has been released successfully.",
+      })
+    },
+  })
+
+  const createPackageFilesMutation = useCreatePackageFilesMutation({
+    onSuccess: () => {
+      toast({
+        title: "Package files created",
+        description: "Your package files have been created successfully.",
+      })
+    },
+  })
 
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = e.target.files?.[0]
@@ -54,80 +77,117 @@ export function CircuitJsonImportDialog({
   const handleImport = async () => {
     let importedCircuitJson
 
-    if (file) {
+    const parseJson = async (jsonString: string) => {
       try {
-        const fileText = await file.text()
-        importedCircuitJson = JSON.parse(fileText)
-      } catch (err) {
-        setError("Error reading JSON file. Please ensure it is valid.")
-        return
+        return JSON.parse(jsonString)
+      } catch {
+        throw new Error("Invalid JSON format.")
       }
-    } else if (isValidJSON(circuitJson)) {
-      setIsLoading(true)
-      setError(null)
-      importedCircuitJson = JSON.parse(circuitJson)
-    } else {
-      toast({
-        title: "Invalid Input",
-        description: "Please provide a valid JSON content or file.",
-        variant: "destructive",
-      })
-      return
     }
-    let tscircuit
-    try {
-      tscircuit = convertCircuitJsonToTscircuit(importedCircuitJson as any, {
-        componentName: "circuit",
-      })
-      console.info(tscircuit)
-    } catch {
+
+    const handleError = (message: string) => {
       toast({
         title: "Import Failed",
-        description: "Invalid Circuit JSON was provided.",
+        description: message,
         variant: "destructive",
       })
       setIsLoading(false)
-      return
+    }
+
+    const handleSuccess = (message: string) => {
+      toast({
+        title: "Success",
+        description: message,
+      })
     }
 
     try {
-      const newSnippetData = {
-        snippet_type: importedCircuitJson.type ?? "board",
-        circuit_json: importedCircuitJson,
-        code: tscircuit,
-      }
-      const response = await axios
-        .post("/snippets/create", newSnippetData)
-        .catch((e) => e)
-      const { snippet, message } = response.data
-      if (message) {
-        setError(message)
-        setIsLoading(false)
+      if (file) {
+        const fileText = await file.text()
+        importedCircuitJson = await parseJson(fileText)
+      } else if (isValidJSON(circuitJson)) {
+        setIsLoading(true)
+        setError(null)
+        importedCircuitJson = await parseJson(circuitJson)
+      } else {
+        handleError("Please provide a valid JSON content or file.")
         return
       }
-      toast({
-        title: "Import Successful",
-        description: "Circuit Json has been imported successfully.",
-      })
-      onOpenChange(false)
-      navigate(`/editor?snippet_id=${snippet.snippet_id}`)
+
+      const tscircuitComponentContent = convertCircuitJsonToTscircuit(
+        importedCircuitJson as any,
+        {
+          componentName: "circuit",
+        },
+      )
+      console.info(tscircuitComponentContent)
+
+      await createPackageMutation.mutateAsync(
+        {
+          name: `${loggedInUser?.github_username}/${generateRandomPackageName()}`,
+          description: "Imported from Circuit JSON",
+        },
+        {
+          onSuccess: (newPackage) => {
+            handleSuccess("Package has been created successfully.")
+            createRelease(
+              {
+                package_name_with_version: `${newPackage.name}@latest`,
+              },
+              {
+                onSuccess: (release) => {
+                  createPackageFilesMutation
+                    .mutateAsync({
+                      file_path: "index.tsx",
+                      content_text: tscircuitComponentContent,
+                      package_release_id: release.package_release_id,
+                    })
+                    .then(() => {
+                      navigate(`/editor?package_id=${newPackage.package_id}`)
+                    })
+                },
+                onError: (error) => {
+                  setError(error)
+                  handleError("Failed to create package release.")
+                },
+              },
+            )
+          },
+          onError: (error) => {
+            setError(error)
+            handleError("Failed to create package.")
+          },
+          onSettled: () => {
+            setIsLoading(false)
+            onOpenChange(false)
+          },
+        },
+      )
     } catch (error) {
       console.error("Error importing Circuit Json:", error)
-      toast({
-        title: "Import Failed",
-        description: "Failed to import the Circuit Json. Please try again.",
-        variant: "destructive",
-      })
+      handleError(
+        "The Circuit JSON appears to be invalid or malformed. Please check the format and try again.",
+      )
     } finally {
       setIsLoading(false)
     }
   }
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.ctrlKey && event.key === "Enter") {
+      handleImport()
+    }
+  }
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Import Circuit JSON</DialogTitle>
+          <DialogDescription>
+            Use this dialog to import a Circuit JSON file or paste the JSON
+            content directly.
+          </DialogDescription>
         </DialogHeader>
         <div className="pb-4">
           <Textarea
@@ -135,6 +195,7 @@ export function CircuitJsonImportDialog({
             placeholder="Paste the Circuit JSON."
             value={circuitJson}
             onChange={(e) => setcircuitJson(e.target.value)}
+            onKeyDown={handleKeyDown}
             disabled={!!file}
           />
           <div className="mt-4 flex flex-col gap-2">
@@ -150,7 +211,7 @@ export function CircuitJsonImportDialog({
                 type="file"
                 accept="application/json"
                 onChange={handleFileChange}
-                className="hidden" // Hide the default file input
+                className="hidden"
               />
               <label
                 htmlFor="file-input"

package/src/components/DownloadButtonAndMenu.tsx

@@ -34,7 +34,7 @@ export function DownloadButtonAndMenu({
 
   if (!circuitJson) {
     return (
-      <div>
+      <div className={className}>
         <Button
           disabled
           variant="ghost"

package/src/components/HeaderLogin.tsx

@@ -67,7 +67,7 @@ export const HeaderLogin = () => {
           </a>
         </DropdownMenuItem>
         <DropdownMenuItem asChild onClick={() => setSession(null)}>
-          <a href="/sign-out" className="cursor-pointer">
+          <a href="/" className="cursor-pointer">
             Sign out
           </a>
         </DropdownMenuItem>

package/src/components/ViewPackagePage/components/important-files-view.tsx

@@ -168,7 +168,7 @@ export default function ImportantFilesView({
   return (
     <div className="mt-4 border border-gray-200 dark:border-[#30363d] rounded-md overflow-hidden">
       <div className="flex items-center pl-2 pr-4 py-2 bg-gray-100 dark:bg-[#161b22] border-b border-gray-200 dark:border-[#30363d]">
-        <div className="flex items-center space-x-2">
+        <div className="flex items-center space-x-2 overflow-x-auto no-scrollbar">
           {/* AI Description Tab */}
           {hasAiContent && (
             <button

package/src/components/ViewPackagePage/components/mobile-sidebar.tsx

@@ -211,6 +211,7 @@ const MobileSidebar = ({
           packageAuthor={packageInfo.owner_github_username}
           onUpdate={handlePackageUpdate}
           packageName={packageInfo.name}
+          currentDefaultView={packageInfo.default_view}
         />
       )}
     </div>

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -1,7 +1,5 @@
-import React, { useEffect } from "react"
+import { useEffect } from "react"
 import { Link } from "wouter"
-
-import { TypeBadge } from "@/components/TypeBadge"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import {
@@ -10,7 +8,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
-import { LockClosedIcon } from "@radix-ui/react-icons"
+import { Lock, Globe } from "lucide-react"
 import { GitFork, Package, Star } from "lucide-react"
 
 import { useForkPackageMutation } from "@/hooks/use-fork-package-mutation"
@@ -106,13 +104,25 @@ export default function PackageHeader({
                     {packageName}
                   </Link>
                 </h1>
-                {packageInfo?.name && <TypeBadge type="package" />}
-                {isPrivate && (
-                  <div className="relative group pl-2">
-                    <LockClosedIcon className="h-4 w-4 text-gray-700" />
-                    <span className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-1 hidden group-hover:block bg-black text-white text-xs rounded py-1 px-2">
-                      private
-                    </span>
+                {packageInfo?.name && (
+                  <div
+                    className={`select-none inline-flex items-center px-2 py-1 rounded text-xs font-medium ${
+                      isPrivate
+                        ? "bg-gray-100 text-gray-700 border border-gray-200"
+                        : "bg-blue-50 text-blue-700 border border-blue-200"
+                    }`}
+                  >
+                    {isPrivate ? (
+                      <>
+                        <Lock className="w-3 h-3 mr-1 flex-shrink-0" />
+                        <span className="leading-none">Private</span>
+                      </>
+                    ) : (
+                      <>
+                        <Globe className="w-3 h-3 mr-1 flex-shrink-0" />
+                        <span className="leading-none">Public</span>
+                      </>
+                    )}
                   </div>
                 )}
               </>

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -19,6 +19,7 @@ import PackageHeader from "./package-header"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useLocation } from "wouter"
 import { Package } from "fake-snippets-api/lib/db/schema"
+import { useCurrentPackageCircuitJson } from "../hooks/use-current-package-circuit-json"
 
 interface PackageFile {
   package_file_id: string
@@ -43,22 +44,37 @@ export default function RepoPageContent({
   onFileClicked,
   onEditClicked,
 }: RepoPageContentProps) {
-  const [location, setLocation] = useLocation()
   const [activeView, setActiveView] = useState<string>("files")
   const session = useGlobalStore((s) => s.session)
+  const { circuitJson, isLoading: isCircuitJsonLoading } =
+    useCurrentPackageCircuitJson()
 
-  // Handle hash-based view selection
+  // Handle initial view selection and hash-based view changes
   useEffect(() => {
-    // Get the hash without the # character
+    if (isCircuitJsonLoading) return
     const hash = window.location.hash.slice(1)
-    // Valid views
     const validViews = ["files", "3d", "pcb", "schematic", "bom"]
+    const circuitDependentViews = ["3d", "pcb", "schematic", "bom"]
 
-    // If hash is a valid view, set it as active
-    if (validViews.includes(hash)) {
+    const availableViews = circuitJson
+      ? validViews
+      : validViews.filter((view) => !circuitDependentViews.includes(view))
+
+    if (hash && availableViews.includes(hash)) {
       setActiveView(hash)
+    } else if (
+      packageInfo?.default_view &&
+      availableViews.includes(packageInfo.default_view)
+    ) {
+      setActiveView(packageInfo.default_view)
+      window.location.hash = packageInfo.default_view
+    } else {
+      setActiveView("files")
+      if (!hash || !availableViews.includes(hash)) {
+        window.location.hash = "files"
+      }
     }
-  }, [])
+  }, [packageInfo?.default_view, circuitJson, isCircuitJsonLoading])
 
   const importantFilePaths = packageFiles
     ?.filter((pf) => isPackageFileImportant(pf.file_path))
@@ -138,6 +154,7 @@ export default function RepoPageContent({
       <Header />
       <PackageHeader
         packageInfo={packageInfo}
+        isPrivate={packageInfo?.is_private ?? false}
         isCurrentUserAuthor={
           packageInfo?.creator_account_id === session?.github_username
         }

package/src/components/ViewPackagePage/components/sidebar-about-section.tsx

@@ -172,6 +172,7 @@ export default function SidebarAboutSection() {
           packageAuthor={packageInfo.owner_github_username}
           onUpdate={handlePackageUpdate}
           packageName={packageInfo.name}
+          currentDefaultView={packageInfo.default_view}
         />
       )}
     </>