@tscircuit/fake-snippets 0.0.67 → 0.0.69

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))

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}
         />
       )}
     </>

package/src/components/dialogs/confirm-delete-package-dialog.tsx

@@ -2,24 +2,32 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
 import { Button } from "../ui/button"
 import { createUseDialog } from "./create-use-dialog"
 import { useDeletePackage } from "@/hooks/use-delete-package"
+import { useQueryClient } from "react-query"
 
 export const ConfirmDeletePackageDialog = ({
   open,
   onOpenChange,
   packageId,
   packageName,
+  packageOwner,
   refetchUserPackages,
 }: {
   open: boolean
   onOpenChange: (open: boolean) => void
   packageId: string
   packageName: string
+  packageOwner: string
   refetchUserPackages?: () => void
 }) => {
+  const queryClient = useQueryClient()
+
   const { mutate: deletePackage, isLoading } = useDeletePackage({
     onSuccess: () => {
       onOpenChange(false)
       refetchUserPackages?.()
+      queryClient.invalidateQueries({
+        queryKey: ["userPackages", packageOwner],
+      })
     },
   })
 

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -16,6 +16,7 @@ import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "../ui/dialog"
@@ -34,6 +35,7 @@ interface EditPackageDetailsDialogProps {
   currentDescription: string
   currentWebsite: string
   currentLicense?: string | null
+  currentDefaultView?: string
   isPrivate?: boolean
   packageName: string
   packageReleaseId: string | null
@@ -42,6 +44,7 @@ interface EditPackageDetailsDialogProps {
     newDescription: string,
     newWebsite: string,
     newLicense: string | null,
+    newDefaultView: string,
   ) => void
 }
 
@@ -52,6 +55,7 @@ export const EditPackageDetailsDialog = ({
   currentDescription,
   currentWebsite,
   currentLicense,
+  currentDefaultView = "files",
   isPrivate = false,
   packageName,
   packageReleaseId,
@@ -67,12 +71,14 @@ export const EditPackageDetailsDialog = ({
     setFormData,
     websiteError,
     hasLicenseChanged,
+    hasDefaultViewChanged,
     hasChanges,
     isFormValid,
   } = usePackageDetailsForm({
     initialDescription: currentDescription,
     initialWebsite: currentWebsite,
     initialLicense: currentLicense || null,
+    initialDefaultView: currentDefaultView,
     isDialogOpen: open,
     initialVisibility: isPrivate ? "private" : "public",
   })
@@ -107,6 +113,7 @@ export const EditPackageDetailsDialog = ({
         description: formData.description,
         website: formData.website,
         is_private: formData.visibility == "private",
+        default_view: formData.defaultView,
       })
       const privacyUpdateResponse = await axios.post("/snippets/update", {
         snippet_id: packageId,
@@ -148,6 +155,7 @@ export const EditPackageDetailsDialog = ({
         website: formData.website,
         license: formData.license,
         visibility: formData.visibility,
+        defaultView: formData.defaultView,
       }
     },
     onMutate: async () => {
@@ -159,11 +167,12 @@ export const EditPackageDetailsDialog = ({
         website: formData.website,
         license: formData.license,
         is_private: formData.visibility == "private",
+        default_view: formData.defaultView,
       }))
       return { previous }
     },
     onSuccess: (data) => {
-      onUpdate?.(data.description, data.website, data.license)
+      onUpdate?.(data.description, data.website, data.license, data.defaultView)
       onOpenChange(false)
       qc.invalidateQueries([
         "packageFile",
@@ -217,151 +226,180 @@ export const EditPackageDetailsDialog = ({
         </DialogContent>
       </Dialog>
       <Dialog open={open !== showConfirmDelete} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-[500px] lg:h-[70vh] sm:h-[90vh] overflow-y-auto w-[95vw] p-6 gap-6 rounded-2xl shadow-lg">
-          <DialogHeader>
-            <DialogTitle>Edit Package Details</DialogTitle>
-            <DialogDescription>
-              Update your package’s description, website, visibility, or delete
-              it.
-            </DialogDescription>
-          </DialogHeader>
+        <DialogContent className="sm:max-w-[500px] lg:h-[85vh] sm:h-[90vh] overflow-y-auto no-scrollbar w-[95vw] h-[80vh] p-6 gap-6 rounded-2xl shadow-lg">
+          <div className="flex flex-col gap-10">
+            <DialogHeader>
+              <DialogTitle>Edit Package Details</DialogTitle>
+              <DialogDescription>
+                Update your package's description, website, visibility, or
+                delete it.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="">
+              <div className="grid gap-2">
+                <div className="space-y-1">
+                  <Label htmlFor="website">Website</Label>
+                  <Input
+                    id="website"
+                    value={formData.website}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        website: e.target.value,
+                      }))
+                    }
+                    placeholder="https://example.com"
+                    disabled={updatePackageDetailsMutation.isLoading}
+                    className="w-full"
+                    aria-invalid={!!websiteError}
+                  />
+                  {websiteError && (
+                    <p className="text-sm text-red-500">{websiteError}</p>
+                  )}
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="visibility">Visibility</Label>
+                  <Select
+                    value={formData.visibility}
+                    onValueChange={(val) => {
+                      setFormData((prev) => ({
+                        ...prev,
+                        visibility: val,
+                      }))
+                    }}
+                    disabled={updatePackageDetailsMutation.isLoading}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select visibility" />
+                    </SelectTrigger>
+                    <SelectContent className="!z-[999]">
+                      <SelectItem value="public">public</SelectItem>
+                      <SelectItem value="private">private</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="description">Description</Label>
+                  <Textarea
+                    id="description"
+                    value={formData.description}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        description: e.target.value,
+                      }))
+                    }
+                    placeholder="Enter package description"
+                    disabled={updatePackageDetailsMutation.isLoading}
+                    className="w-full min-h-[80px] resize-none"
+                  />
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="license">License</Label>
+                  <Select
+                    value={formData.license || "unset"}
+                    onValueChange={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        license: value === "unset" ? null : value,
+                      }))
+                    }
+                    disabled={updatePackageDetailsMutation.isLoading}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select a license" />
+                    </SelectTrigger>
+                    <SelectContent className="!z-[999]">
+                      <SelectItem value="MIT">MIT</SelectItem>
+                      <SelectItem value="Apache-2.0">Apache-2.0</SelectItem>
+                      <SelectItem value="BSD-3-Clause">BSD-3-Clause</SelectItem>
+                      <SelectItem value="GPL-3.0">GPL-3.0</SelectItem>
+                      <SelectItem value="unset">Unset</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-1">
+                  <Label htmlFor="defaultView">Default View</Label>
+                  <Select
+                    value={formData.defaultView}
+                    onValueChange={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        defaultView: value,
+                      }))
+                    }
+                    disabled={updatePackageDetailsMutation.isLoading}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select default view" />
+                    </SelectTrigger>
+                    <SelectContent className="!z-[999]">
+                      <SelectItem value="files">Files</SelectItem>
+                      <SelectItem value="3d">3D</SelectItem>
+                      <SelectItem value="pcb">PCB</SelectItem>
+                      <SelectItem value="schematic">Schematic</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
 
-          <div className="grid gap-4">
-            <div className="space-y-1">
-              <Label htmlFor="website">Website</Label>
-              <Input
-                id="website"
-                value={formData.website}
-                onChange={(e) =>
-                  setFormData((prev) => ({
-                    ...prev,
-                    website: e.target.value,
-                  }))
-                }
-                placeholder="https://example.com"
-                disabled={updatePackageDetailsMutation.isLoading}
-                className="w-full"
-                aria-invalid={!!websiteError}
-              />
-              {websiteError && (
-                <p className="text-sm text-red-500">{websiteError}</p>
-              )}
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="visibility">Visibility</Label>
-              <Select
-                value={formData.visibility}
-                onValueChange={(val) => {
-                  setFormData((prev) => ({
-                    ...prev,
-                    visibility: val,
-                  }))
-                }}
-                disabled={updatePackageDetailsMutation.isLoading}
+              <details
+                className="mt-2 rounded-md"
+                onToggle={(e) => setDangerOpen(e.currentTarget.open)}
               >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="Select visibility" />
-                </SelectTrigger>
-                <SelectContent className="!z-[999]">
-                  <SelectItem value="public">public</SelectItem>
-                  <SelectItem value="private">private</SelectItem>
-                </SelectContent>
-              </Select>
+                <summary className="cursor-pointer p-2 font-medium text-sm text-black list-none flex justify-between items-center">
+                  Danger Zone
+                  <ChevronDown
+                    className={`w-4 h-4 mr-1 transition-transform ${dangerOpen ? "rotate-180" : ""}`}
+                  />
+                </summary>
+                <div className="p-2 pr-2">
+                  <div className="flex justify-between items-center">
+                    <div>
+                      <p className="text-sm text-muted-foreground">
+                        Once deleted, it cannot be recovered.
+                      </p>
+                    </div>
+                    <Button
+                      variant="destructive"
+                      size="default"
+                      onClick={() => setShowConfirmDelete(true)}
+                      disabled={deleting}
+                      className="shrink-0 lg:w-[115px] w-[70px]"
+                    >
+                      {deleting ? "Deleting..." : "Delete"}
+                    </Button>
+                  </div>
+                </div>
+              </details>
             </div>
-            <div className="space-y-1">
-              <Label htmlFor="description">Description</Label>
-              <Textarea
-                id="description"
-                value={formData.description}
-                onChange={(e) =>
-                  setFormData((prev) => ({
-                    ...prev,
-                    description: e.target.value,
-                  }))
-                }
-                placeholder="Enter package description"
+          </div>
+
+          <DialogFooter className="mt-auto">
+            <div className="lg:px-2 flex flex-col sm:flex-row justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => onOpenChange(false)}
                 disabled={updatePackageDetailsMutation.isLoading}
-                className="w-full min-h-[100px] resize-none"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="license">License</Label>
-              <Select
-                value={formData.license || "unset"}
-                onValueChange={(value) =>
-                  setFormData((prev) => ({
-                    ...prev,
-                    license: value === "unset" ? null : value,
-                  }))
+                className="sm:w-auto w-full"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={() => updatePackageDetailsMutation.mutate()}
+                disabled={
+                  updatePackageDetailsMutation.isLoading ||
+                  !hasChanges ||
+                  !isFormValid
                 }
-                disabled={updatePackageDetailsMutation.isLoading}
+                className="sm:w-auto lg:w-[115px]"
               >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="Select a license" />
-                </SelectTrigger>
-                <SelectContent className="!z-[999]">
-                  <SelectItem value="MIT">MIT</SelectItem>
-                  <SelectItem value="Apache-2.0">Apache-2.0</SelectItem>
-                  <SelectItem value="BSD-3-Clause">BSD-3-Clause</SelectItem>
-                  <SelectItem value="GPL-3.0">GPL-3.0</SelectItem>
-                  <SelectItem value="unset">Unset</SelectItem>
-                </SelectContent>
-              </Select>
+                {updatePackageDetailsMutation.isLoading
+                  ? "Updating..."
+                  : "Save Changes"}
+              </Button>
             </div>
-          </div>
-          <details
-            className="mt-2 rounded-md"
-            onToggle={(e) => setDangerOpen(e.currentTarget.open)}
-          >
-            <summary className="cursor-pointer p-2 font-medium text-sm text-black list-none flex justify-between items-center">
-              Danger Zone
-              <ChevronDown
-                className={`w-4 h-4 mr-1 transition-transform ${dangerOpen ? "rotate-180" : ""}`}
-              />
-            </summary>
-            <div className="p-2 pr-2">
-              <div className="flex justify-between items-center">
-                <div>
-                  <p className="text-sm text-muted-foreground">
-                    Once deleted, it cannot be recovered.
-                  </p>
-                </div>
-                <Button
-                  variant="destructive"
-                  size="default"
-                  onClick={() => setShowConfirmDelete(true)}
-                  disabled={deleting}
-                  className="shrink-0 lg:w-[115px] w-[70px]"
-                >
-                  {deleting ? "Deleting..." : "Delete"}
-                </Button>
-              </div>
-            </div>
-          </details>
-
-          <div className=" lg:px-2 flex flex-col sm:flex-row justify-end gap-3">
-            <Button
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={updatePackageDetailsMutation.isLoading}
-              className="sm:w-auto w-full"
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={() => updatePackageDetailsMutation.mutate()}
-              disabled={
-                updatePackageDetailsMutation.isLoading ||
-                !hasChanges ||
-                !isFormValid
-              }
-              className="sm:w-auto lg:w-[115px]"
-            >
-              {updatePackageDetailsMutation.isLoading
-                ? "Updating..."
-                : "Save Changes"}
-            </Button>
-          </div>
+          </DialogFooter>
         </DialogContent>
       </Dialog>
     </div>

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

@@ -22,6 +22,8 @@ import { usePackageFilesLoader } from "@/hooks/usePackageFilesLoader"
 import { findTargetFile } from "@/lib/utils/findTargetFile"
 import { toastManualEditConflicts } from "@/lib/utils/toastManualEditConflicts"
 import { ManualEditEvent } from "@tscircuit/props"
+import { isValidFileName } from "@/lib/utils/isValidFileName"
+import { useFileManagement } from "@/hooks/useFileManagement"
 
 interface Props {
   pkg?: Package
@@ -32,12 +34,19 @@ export interface PackageFile {
   content: string
 }
 
-interface CodeAndPreviewState {
+export interface CreateFileProps {
+  newFileName: string
+  setErrorMessage: (message: string) => void
+  onFileSelect: (fileName: string) => void
+  setNewFileName: (fileName: string) => void
+  setIsCreatingFile: (isCreatingFile: boolean) => void
+}
+
+export interface CodeAndPreviewState {
   pkgFilesWithContent: PackageFile[]
   initialFilesLoad: PackageFile[]
   showPreview: boolean
   fullScreen: boolean
-  dts: string
   lastSavedAt: number
   circuitJson: null | any
   isPrivate: boolean
@@ -92,7 +101,6 @@ export function CodeAndPreview({ pkg }: Props) {
     initialFilesLoad: [],
     showPreview: true,
     fullScreen: false,
-    dts: "",
     lastSavedAt: Date.now(),
     circuitJson: null,
     isPrivate: false,
@@ -148,7 +156,6 @@ export function CodeAndPreview({ pkg }: Props) {
 
     if (loadedFiles && !isLoadingFiles) {
       const processedResults = [...loadedFiles]
-
       setState((prev) => ({
         ...prev,
         pkgFilesWithContent: processedResults,
@@ -159,13 +166,7 @@ export function CodeAndPreview({ pkg }: Props) {
           defaultCode,
       }))
     }
-  }, [
-    isLoadingFiles,
-    pkg,
-    pkgFiles.data,
-    state.pkgFilesWithContent.length,
-    defaultCode,
-  ])
+  }, [isLoadingFiles, pkg, pkgFiles.data, defaultCode])
 
   const createPackageMutation = useCreatePackageMutation()
   const { mutate: createRelease } = useCreatePackageReleaseMutation({
@@ -250,10 +251,21 @@ export function CodeAndPreview({ pkg }: Props) {
     setState((prev) => ({ ...prev, lastSavedAt: Date.now() }))
 
     if (pkg) {
-      updatePackageFilesMutation.mutate({
-        package_name_with_version: `${pkg.name}@latest`,
-        ...pkg,
-      })
+      updatePackageFilesMutation.mutate(
+        {
+          package_name_with_version: `${pkg.name}@latest`,
+          ...pkg,
+        },
+        {
+          onSuccess: () => {
+            setState((prev) => ({
+              ...prev,
+              initialFilesLoad: [...prev.pkgFilesWithContent],
+            }))
+            pkgFiles.refetch()
+          },
+        },
+      )
     }
   }
 
@@ -284,10 +296,17 @@ export function CodeAndPreview({ pkg }: Props) {
     state.pkgFilesWithContent,
   ])
   const mainComponentPath = useMemo(() => {
-    return state.currentFile?.endsWith(".tsx") &&
+    const isReactComponentExported =
+      /export function\s+\w+/.test(currentFileCode) ||
+      /export const\s+\w+\s*=/.test(currentFileCode) ||
+      /export default\s+\w+/.test(currentFileCode) ||
+      /export default\s+function\s*(\w*)\s*\(/.test(currentFileCode) ||
+      /export default\s*\(\s*\)\s*=>/.test(currentFileCode)
+
+    return (state.currentFile?.endsWith(".tsx") ||
+      state.currentFile?.endsWith(".ts")) &&
       !!state.pkgFilesWithContent.some((x) => x.path == state.currentFile) &&
-      (currentFileCode.match(/export function (\w+)/) ||
-        currentFileCode.match(/export const (\w+) ?=/))
+      isReactComponentExported
       ? state.currentFile
       : state.defaultComponentFile
   }, [state.currentFile, state.pkgFilesWithContent, currentFileCode])
@@ -327,6 +346,8 @@ export function CodeAndPreview({ pkg }: Props) {
     })
   }
 
+  const { handleCreateFile } = useFileManagement(state, setState)
+
   if ((!pkg && urlParams.package_id) || pkgFiles.isLoading || isLoadingFiles) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -363,6 +384,7 @@ export function CodeAndPreview({ pkg }: Props) {
           )}
         >
           <CodeEditor
+            handleCreateFile={handleCreateFile}
             currentFile={state.currentFile}
             setCurrentFile={(file) =>
               setState((prev) => ({ ...prev, currentFile: file }))
@@ -379,7 +401,6 @@ export function CodeAndPreview({ pkg }: Props) {
                 ),
               }))
             }}
-            onDtsChange={(dts) => setState((prev) => ({ ...prev, dts }))}
             pkgFilesLoaded={state.pkgFilesLoaded}
           />
         </div>