@tscircuit/fake-snippets 0.0.101 → 0.0.103

package/src/components/dialogs/GitHubRepositorySelector.tsx

@@ -0,0 +1,183 @@
+import { useRef } from "react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { useAxios } from "@/hooks/use-axios"
+import { useApiBaseUrl } from "@/hooks/use-packages-base-api-url"
+import { useQuery } from "react-query"
+import { Button } from "../ui/button"
+import { Label } from "../ui/label"
+import { Minus, Plus } from "lucide-react"
+import { Switch } from "../ui/switch"
+
+interface GitHubRepositorySelectorProps {
+  selectedRepository?: string
+  setSelectedRepository?: (value: string | null) => void
+  disabled?: boolean
+  open?: boolean
+  addFormContent?: (data: {
+    enablePrPreview?: boolean
+    privateBuild?: boolean
+  }) => void
+  formData?: any
+}
+
+export const GitHubRepositorySelector = ({
+  selectedRepository,
+  setSelectedRepository,
+  disabled = false,
+  open = false,
+  addFormContent,
+  formData,
+}: GitHubRepositorySelectorProps) => {
+  const axios = useAxios()
+  const apiBaseUrl = useApiBaseUrl()
+  const initialValue = useRef(selectedRepository).current
+  // Fetch available repositories
+  const { data: repositoriesData, error: repositoriesError } = useQuery(
+    ["github-repositories"],
+    async () => {
+      const response = await axios.get("/github/repos/list_available")
+      return response.data
+    },
+    {
+      enabled: open, // Only fetch when needed
+      retry: false,
+    },
+  )
+
+  const handleConnectMoreRepos = async () => {
+    window.location.href = `${apiBaseUrl}/github/installations/create_new_installation_redirect?return_to_page=${window.location.pathname}`
+  }
+
+  const handleValueChange = (newValue: string) => {
+    if (newValue === "connect-more") {
+      handleConnectMoreRepos()
+    } else if (newValue === "unlink//repo") {
+      setSelectedRepository?.("unlink//repo")
+    } else {
+      setSelectedRepository?.(newValue)
+    }
+  }
+
+  return (
+    <>
+      <div className="space-y-1 mb-3">
+        <Label htmlFor="repository">GitHub Repository</Label>
+        {(repositoriesError as any)?.response?.status === 400 &&
+        (repositoriesError as any)?.response?.data?.error_code ===
+          "github_not_connected" ? (
+          <div className="space-y-2">
+            <div className="text-sm text-muted-foreground">
+              Connect your GitHub account to link this package to a repository.
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleConnectMoreRepos}
+              className="w-full"
+              disabled={disabled}
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+              >
+                <path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
+              </svg>
+              Connect GitHub Account
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            <Select
+              value={selectedRepository}
+              onValueChange={handleValueChange}
+              disabled={disabled}
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue placeholder="Select a repository" />
+              </SelectTrigger>
+              <SelectContent className="!z-[999]">
+                {repositoriesData?.repos?.map((repo: any) => (
+                  <SelectItem key={repo.full_name} value={repo.full_name}>
+                    <div className="flex items-center space-x-2">
+                      <span>{repo.unscoped_name}</span>
+                      {repo.private && (
+                        <span className="text-xs text-muted-foreground">
+                          (private)
+                        </span>
+                      )}
+                    </div>
+                  </SelectItem>
+                ))}
+                <SelectItem value="connect-more">
+                  <div className="flex items-center space-x-2 text-blue-600">
+                    <Plus className="w-3 h-3" />
+                    <span>Connect More Repos</span>
+                  </div>
+                </SelectItem>
+                {Boolean(initialValue) && (
+                  <SelectItem value="unlink//repo">
+                    <div className="flex items-center space-x-2 text-red-600">
+                      <Minus className="w-3 h-3" />
+                      <span>Unlink Repo</span>
+                    </div>
+                  </SelectItem>
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+      </div>
+
+      {initialValue && selectedRepository !== "unlink//repo" && (
+        <div className="space-y-4 mt-4 p-4 border rounded-lg bg-gray-50">
+          <h4 className="text-sm font-medium text-gray-900">
+            Repository Settings
+          </h4>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label className="text-sm font-medium">Private Build</Label>
+              <p className="text-xs text-gray-500">
+                Keep build previews private
+              </p>
+            </div>
+            <Switch
+              checked={formData?.privateBuild}
+              onCheckedChange={(checked) =>
+                addFormContent?.({
+                  privateBuild: checked,
+                })
+              }
+              disabled={disabled}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <Label className="text-sm font-medium">Enable PR Preview</Label>
+              <p className="text-xs text-gray-500">
+                Generate preview builds for pull requests
+              </p>
+            </div>
+            <Switch
+              checked={formData?.enablePrPreview}
+              onCheckedChange={(checked) =>
+                addFormContent?.({
+                  enablePrPreview: checked,
+                })
+              }
+              disabled={disabled}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

package/src/components/dialogs/create-use-dialog.tsx

@@ -5,14 +5,19 @@ export const createUseDialog = <DialogType extends React.ComponentType<any>>(
 ) => {
   return () => {
     const [open, setOpen] = useState(false)
+    const [dialogProps, setDialogProps] = useState<any>({})
 
     return useMemo(
       () => ({
-        openDialog: () => {
+        openDialog: (props?: any) => {
+          if (props) {
+            setDialogProps(props)
+          }
           setOpen(true)
         },
         closeDialog: () => {
           setOpen(false)
+          setDialogProps({})
         },
         Dialog: (
           props: Omit<
@@ -22,13 +27,14 @@ export const createUseDialog = <DialogType extends React.ComponentType<any>>(
         ) => (
           <DialogComponent
             {...(props as any)}
+            {...dialogProps}
             open={open}
             onOpenChange={setOpen}
           />
         ),
         open,
       }),
-      [open],
+      [open, dialogProps],
     )
   }
 }

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

@@ -27,6 +27,7 @@ import { createUseDialog } from "./create-use-dialog"
 import { ChevronDown } from "lucide-react"
 import { useLocation } from "wouter"
 import { useDeletePackage } from "@/hooks/use-delete-package"
+import { GitHubRepositorySelector } from "./GitHubRepositorySelector"
 
 interface EditPackageDetailsDialogProps {
   open: boolean
@@ -36,6 +37,7 @@ interface EditPackageDetailsDialogProps {
   currentWebsite: string
   currentLicense?: string | null
   currentDefaultView?: string
+  currentGithubRepoFullName?: string | null
   isPrivate?: boolean
   packageName: string
   unscopedPackageName: string
@@ -57,6 +59,7 @@ export const EditPackageDetailsDialog = ({
   currentWebsite,
   currentLicense,
   currentDefaultView = "files",
+  currentGithubRepoFullName,
   isPrivate = false,
   unscopedPackageName,
   packageReleaseId,
@@ -75,6 +78,7 @@ export const EditPackageDetailsDialog = ({
     isFormValid,
   } = usePackageDetailsForm({
     initialDescription: currentDescription,
+    initialGithubRepoFullName: currentGithubRepoFullName ?? null,
     initialWebsite: currentWebsite,
     initialLicense: currentLicense || null,
     initialDefaultView: currentDefaultView,
@@ -83,7 +87,6 @@ export const EditPackageDetailsDialog = ({
     initialVisibility: isPrivate ? "private" : "public",
   })
 
-  const [deleting, setDeleting] = useState(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const [dangerOpen, setDangerOpen] = useState(false)
   const [, setLocation] = useLocation()
@@ -114,6 +117,10 @@ export const EditPackageDetailsDialog = ({
         website: formData.website.trim(),
         is_private: formData.visibility == "private",
         default_view: formData.defaultView,
+        github_repo_full_name:
+          formData.githubRepoFullName === "unlink//repo"
+            ? null
+            : formData.githubRepoFullName,
         ...(formData.unscopedPackageName !== unscopedPackageName && {
           name: formData.unscopedPackageName.trim(),
         }),
@@ -371,6 +378,26 @@ export const EditPackageDetailsDialog = ({
                     </SelectContent>
                   </Select>
                 </div>
+                <div className="space-y-1">
+                  <GitHubRepositorySelector
+                    selectedRepository={formData.githubRepoFullName || ""}
+                    setSelectedRepository={(value) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        githubRepoFullName: value,
+                      }))
+                    }
+                    disabled={updatePackageDetailsMutation.isLoading}
+                    open={open}
+                    formData={formData}
+                    addFormContent={(content) => {
+                      setFormData((prev) => ({
+                        ...prev,
+                        ...content,
+                      }))
+                    }}
+                  />
+                </div>
               </div>
 
               <details
@@ -394,10 +421,12 @@ export const EditPackageDetailsDialog = ({
                       variant="destructive"
                       size="default"
                       onClick={() => setShowConfirmDelete(true)}
-                      disabled={deleting}
+                      disabled={deletePackageMutation.isLoading}
                       className="shrink-0 lg:w-[115px] w-[70px]"
                     >
-                      {deleting ? "Deleting..." : "Delete"}
+                      {deletePackageMutation.isLoading
+                        ? "Deleting..."
+                        : "Delete"}
                     </Button>
                   </div>
                 </div>

package/src/components/dialogs/view-ts-files-dialog.tsx

@@ -21,13 +21,23 @@ import JSZip from "jszip"
 import { saveAs } from "file-saver"
 import { EditorView } from "codemirror"
 import { EditorState } from "@codemirror/state"
+import { autocompletion } from "@codemirror/autocomplete"
 import { basicSetup } from "@/lib/codemirror/basic-setup"
 import { javascript } from "@codemirror/lang-javascript"
 import { json } from "@codemirror/lang-json"
+import { tsAutocomplete, tsFacet, tsSync } from "@valtown/codemirror-ts"
+import {
+  createSystem,
+  createVirtualTypeScriptEnvironment,
+} from "@typescript/vfs"
+import { loadDefaultLibMap } from "@/lib/ts-lib-cache"
+import tsModule from "typescript"
 
 interface ViewTsFilesDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
+  initialFile?: string
+  initialLine?: number
 }
 
 interface FileNode {
@@ -41,6 +51,8 @@ interface FileNode {
 export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
   open,
   onOpenChange,
+  initialFile,
+  initialLine,
 }) => {
   const [files, setFiles] = useState<Map<string, string>>(new Map())
   const [selectedFile, setSelectedFile] = useState<string | null>(null)
@@ -48,8 +60,12 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
   const [copiedFile, setCopiedFile] = useState<string | null>(null)
   const [expandedFolders, setExpandedFolders] = useState<Set<string>>(new Set())
   const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [targetLine, setTargetLine] = useState<number | null>(null)
   const editorRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
+  const [tsEnv, setTsEnv] = useState<ReturnType<
+    typeof createVirtualTypeScriptEnvironment
+  > | null>(null)
 
   const fileTree = useMemo(() => {
     const tree: FileNode[] = []
@@ -159,33 +175,86 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
       viewRef.current.destroy()
     }
 
-    const state = EditorState.create({
-      doc: content,
-      extensions: [
-        basicSetup,
-        isJson ? json() : javascript({ typescript: true, jsx: true }),
-        EditorState.readOnly.of(true),
-        EditorView.theme({
-          "&": {
-            height: "100%",
-            fontSize: "14px",
-          },
-          ".cm-content": {
-            padding: "16px",
-            minHeight: "100%",
-          },
-          ".cm-focused": {
-            outline: "none",
-          },
-          ".cm-editor": {
-            height: "100%",
-          },
-          ".cm-scroller": {
-            fontFamily:
-              "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+    const extensions = [
+      basicSetup,
+      isJson ? json() : javascript({ typescript: true, jsx: true }),
+      EditorState.readOnly.of(true),
+      EditorView.theme({
+        "&": {
+          height: "100%",
+          fontSize: "14px",
+        },
+        ".cm-content": {
+          padding: "16px",
+          minHeight: "100%",
+        },
+        ".cm-focused": {
+          outline: "none",
+        },
+        ".cm-editor": {
+          height: "100%",
+        },
+        ".cm-scroller": {
+          fontFamily:
+            "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+        },
+      }),
+    ]
+
+    if (
+      tsEnv &&
+      !isJson &&
+      (selectedFile.endsWith(".ts") || selectedFile.endsWith(".tsx"))
+    ) {
+      extensions.push(
+        tsFacet.of({
+          env: tsEnv,
+          path: selectedFile.startsWith("/")
+            ? selectedFile.slice(1)
+            : selectedFile,
+        }),
+        tsSync(),
+        autocompletion({ override: [tsAutocomplete()] }),
+        EditorView.domEventHandlers({
+          click: (event, view) => {
+            if (event.ctrlKey || event.metaKey) {
+              const pos = view.posAtCoords({
+                x: event.clientX,
+                y: event.clientY,
+              })
+              if (pos !== null) {
+                const path = selectedFile.startsWith("/")
+                  ? selectedFile.slice(1)
+                  : selectedFile
+                const definitions =
+                  tsEnv.languageService.getDefinitionAtPosition(path, pos)
+                if (definitions && definitions.length > 0) {
+                  const definition = definitions[0]
+                  const definitionFileName = definition.fileName
+                  if (definitionFileName && files.has(definitionFileName)) {
+                    const definitionContent =
+                      files.get(definitionFileName) || ""
+                    const lines = definitionContent
+                      .substring(0, definition.textSpan.start)
+                      .split("\n")
+                    const lineNumber = lines.length
+
+                    setSelectedFile(definitionFileName)
+                    setTargetLine(lineNumber)
+                    return true
+                  }
+                }
+              }
+            }
+            return false
           },
         }),
-      ],
+      )
+    }
+
+    const state = EditorState.create({
+      doc: content,
+      extensions,
     })
 
     viewRef.current = new EditorView({
@@ -193,25 +262,85 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
       parent: editorRef.current,
     })
 
+    if (targetLine && targetLine > 0) {
+      const scrollToLine = () => {
+        if (viewRef.current) {
+          const doc = viewRef.current.state.doc
+          if (targetLine <= doc.lines) {
+            const line = doc.line(targetLine)
+
+            const performScroll = () => {
+              if (viewRef.current) {
+                viewRef.current.dispatch({
+                  selection: { anchor: line.from, head: line.to },
+                  effects: EditorView.scrollIntoView(line.from, {
+                    y: "center",
+                  }),
+                })
+
+                setTimeout(() => {
+                  if (viewRef.current) {
+                    viewRef.current.dispatch({
+                      effects: EditorView.scrollIntoView(line.from, {
+                        y: "center",
+                      }),
+                    })
+
+                    setTimeout(() => {
+                      if (viewRef.current) {
+                        viewRef.current.dispatch({
+                          effects: EditorView.scrollIntoView(line.from, {
+                            y: "center",
+                          }),
+                        })
+                      }
+                    }, 200)
+                  }
+                }, 150)
+              }
+            }
+
+            requestAnimationFrame(performScroll)
+          }
+        }
+      }
+
+      // Extra delay when TypeScript environment is not ready or for large line numbers
+      // This handles cases when triggered from CodeEditor.tsx with TypeScript definitions
+      const isLargeLine = targetLine > 100
+      const needsExtraDelay = !tsEnv || isLargeLine
+      const initialDelay = needsExtraDelay ? 500 : 200
+
+      setTimeout(scrollToLine, initialDelay)
+      setTargetLine(null)
+    }
+
     return () => {
       if (viewRef.current) {
         viewRef.current.destroy()
         viewRef.current = null
       }
     }
-  }, [selectedFile, files])
+  }, [selectedFile, files, targetLine, tsEnv])
 
   useEffect(() => {
     if (open && window.__DEBUG_CODE_EDITOR_FS_MAP) {
       setFiles(window.__DEBUG_CODE_EDITOR_FS_MAP)
 
       if (window.__DEBUG_CODE_EDITOR_FS_MAP.size > 0) {
-        const firstFile = Array.from(
-          window.__DEBUG_CODE_EDITOR_FS_MAP.keys(),
-        )[0]
-        setSelectedFile(firstFile)
+        let fileToSelect: string
+        if (initialFile && window.__DEBUG_CODE_EDITOR_FS_MAP.has(initialFile)) {
+          fileToSelect = initialFile
+          if (initialLine) {
+            setTargetLine(initialLine)
+          }
+        } else {
+          fileToSelect = Array.from(window.__DEBUG_CODE_EDITOR_FS_MAP.keys())[0]
+        }
 
-        let normalizedPath = firstFile
+        setSelectedFile(fileToSelect)
+
+        let normalizedPath = fileToSelect
         if (normalizedPath.startsWith("/")) {
           normalizedPath = normalizedPath.slice(1)
         }
@@ -225,7 +354,23 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
         setExpandedFolders(foldersToExpand)
       }
     }
-  }, [open])
+  }, [open, initialFile, initialLine])
+
+  useEffect(() => {
+    if (files.size > 0) {
+      const setupTsEnv = async () => {
+        try {
+          const libMap = await loadDefaultLibMap()
+          const system = createSystem(new Map([...libMap, ...files]))
+          const env = createVirtualTypeScriptEnvironment(system, [], tsModule)
+          setTsEnv(env)
+        } catch (error) {
+          console.error("Failed to setup TypeScript environment:", error)
+        }
+      }
+      setupTsEnv()
+    }
+  }, [files])
 
   useEffect(() => {
     const handleResize = () => {
@@ -367,7 +512,7 @@ export const ViewTsFilesDialog: React.FC<ViewTsFilesDialogProps> = ({
               </Badge>
             </div>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 mr-4">
             <Button
               variant="outline"
               size="sm"

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

@@ -78,6 +78,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
     localFiles,
     initialFiles,
     renameFile,
+    packageFilesMeta,
   } = useFileManagement({
     templateCode: templateFromUrl?.code,
     currentPackage: pkg,
@@ -197,6 +198,8 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
           setState((prev) => ({ ...prev, showPreview: !prev.showPreview }))
         }
         previewOpen={state.showPreview}
+        files={localFiles}
+        packageFilesMeta={packageFilesMeta}
       />
       <div
         className={`flex ${state.showPreview ? "flex-col md:flex-row" : ""}`}
@@ -231,7 +234,7 @@ export function CodeAndPreview({ pkg, projectUrl }: Props) {
         </div>
         <div
           className={cn(
-            "flex p-0 flex-col min-h-[640px]",
+            "flex p-0 flex-col min-h-[640px] overflow-y-hidden",
             state.fullScreen
               ? "fixed inset-0 z-50 bg-white p-4 overflow-hidden"
               : "w-full md:w-1/2",