@tscircuit/fake-snippets 0.0.109 → 0.0.111

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

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button"
-import { GitFork, Star } from "lucide-react"
+import { GitFork, Loader2, Star } from "lucide-react"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -42,7 +42,6 @@ import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { DownloadButtonAndMenu } from "@/components/DownloadButtonAndMenu"
 import { TypeBadge } from "@/components/TypeBadge"
 import { useForkPackageMutation } from "@/hooks/useForkPackageMutation"
-import tscircuitCorePkg from "@tscircuit/core/package.json"
 import { useRenamePackageDialog } from "../dialogs/rename-package-dialog"
 import { useUpdatePackageDescriptionDialog } from "../dialogs/update-package-description-dialog"
 import { useCreateReleaseDialog } from "@/hooks/use-create-release-dialog"
@@ -295,52 +294,37 @@ export default function EditorNav({
               Not logged in, can't save
             </div>
           )}
-          <Button
-            variant="outline"
-            size="sm"
-            className={"ml-1 h-6 px-2 text-xs save-button"}
-            disabled={canSavePackage && pkg ? !hasUnsavedChanges : !isLoggedIn}
-            onClick={canSavePackage ? onSave : () => forkSnippet()}
-          >
-            {canSavePackage ? (
-              <>
-                <Save className="mr-1 h-3 w-3" />
-                Save
-              </>
-            ) : (
-              <>
-                <GitFork className="mr-1 h-3 w-3" />
-                Fork
-              </>
-            )}
-          </Button>
+          {(canSavePackage || (isLoggedIn && pkg)) && (
+            <Button
+              variant="outline"
+              size="sm"
+              className={"ml-1 h-6 px-2 text-xs save-button"}
+              disabled={
+                canSavePackage && pkg ? !hasUnsavedChanges : !isLoggedIn
+              }
+              onClick={canSavePackage ? onSave : () => forkSnippet()}
+            >
+              {canSavePackage ? (
+                <>
+                  <Save className="mr-1 h-3 w-3" />
+                  Save
+                </>
+              ) : (
+                <>
+                  <GitFork className="mr-1 h-3 w-3" />
+                  Fork
+                </>
+              )}
+            </Button>
+          )}
           {isSaving && (
-            <div className="animate-fadeIn bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
-              <svg
-                className="animate-spin h-3 w-3 mr-2 text-blue-600"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  stroke="currentColor"
-                  strokeWidth="4"
-                ></circle>
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                ></path>
-              </svg>
+            <div className="animate-fadeIn bg-blue-100 select-none text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded flex items-center">
+              <Loader2 className="animate-spin h-3 w-3 mr-2 text-blue-600" />
               Saving...
             </div>
           )}
           {hasUnsavedChanges && !isSaving && isLoggedIn && (
-            <div className="animate-fadeIn bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">
+            <div className="animate-fadeIn bg-yellow-100 select-none text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">
               {pkg ? "unsaved changes" : "unsaved"}
             </div>
           )}
@@ -359,7 +343,6 @@ export default function EditorNav({
       </div>
       <div className="flex items-center justify-end -space-x-1">
         <div className="flex mx-2 items-center space-x-1">
-          {pkg && <TypeBadge type={`${packageType ?? pkg.snippet_type}`} />}
           {/* <Button
             variant="ghost"
             size="sm"
@@ -481,9 +464,6 @@ export default function EditorNav({
                     </DropdownMenuItem>
                   </>
                 )}
-              <DropdownMenuItem className="text-xs text-gray-500" disabled>
-                @tscircuit/core@{tscircuitCorePkg.version}
-              </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
 
@@ -505,7 +485,7 @@ export default function EditorNav({
             )}
           </Button>
         </div>
-        <div className="flex items-center ">
+        <div className="flex items-center">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <div className="md:hidden rounded-full p-1 hover:bg-gray-100 cursor-pointer">
@@ -514,7 +494,7 @@ export default function EditorNav({
                 </Button>
               </div>
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
+            <DropdownMenuContent className="z-[101]">
               {hasUnsavedChanges && onDiscard && (
                 <DropdownMenuItem
                   className="text-xs text-red-600"
@@ -601,6 +581,9 @@ export default function EditorNav({
       <RenameDialog
         packageId={pkg?.package_id ?? ""}
         currentName={pkg?.unscoped_name ?? ""}
+        onRename={() => {
+          qc.invalidateQueries({ queryKey: ["package", pkg?.package_id] })
+        }}
       />
       <DeleteDialog
         packageId={pkg?.package_id ?? ""}

package/src/components/preview/ConnectedPackagesList.tsx

@@ -3,7 +3,7 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { GitBranch, Rocket, Github } from "lucide-react"
 import { cn } from "@/lib/utils"
-import { PrefetchPageLink } from "../PrefetchPageLink"
+import { Link } from "wouter"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { getBuildStatus, StatusIcon } from "."
 import { Package } from "fake-snippets-api/lib/db/schema"
@@ -116,12 +116,12 @@ export const ConnectedPackageCard = ({
     >
       <div className="flex items-start justify-between mb-4">
         <div className="flex items-center gap-3">
-          <a
-            href="#"
+          <Link
+            href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
             className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors"
           >
             {pkg.unscoped_name}
-          </a>
+          </Link>
         </div>
 
         <div className="flex items-center justify-center gap-2">
@@ -174,25 +174,25 @@ export const ConnectedPackageCard = ({
       </div>
 
       <div className="flex gap-2 w-full mt-auto">
-        <PrefetchPageLink className="w-full" href={`/${pkg.name}/releases`}>
+        <Link className="w-full" href={`/${pkg.name}/releases`}>
           <Button
             size="sm"
             className="bg-blue-600 w-full hover:bg-blue-700 text-white px-4 py-2"
           >
             View
           </Button>
-        </PrefetchPageLink>
+        </Link>
         {latestBuildInfo?.preview_url &&
           latestBuildInfo?.package_build_id &&
           status === "success" && (
-            <PrefetchPageLink
+            <Link
               className="w-full"
               href={`/${pkg.name}/releases/${latestBuildInfo.package_release_id}/preview`}
             >
               <Button size="sm" variant="outline" className="px-4 py-2 w-full">
                 Preview
               </Button>
-            </PrefetchPageLink>
+            </Link>
           )}
       </div>
     </Card>

package/src/components/preview/ConnectedRepoOverview.tsx

@@ -41,6 +41,7 @@ export const ConnectedRepoOverview = ({
   const [openSections, setOpenSections] = useState({
     transpilation: false,
     circuitJson: false,
+    imageGeneration: false,
   })
 
   // Gracefully handle when there is no build yet
@@ -120,15 +121,25 @@ export const ConnectedRepoOverview = ({
             1000,
         )
       : 0
+    const imageGenerationDuration = packageBuild?.image_generation_started_at
+      ? Math.floor(
+          (new Date(
+            packageBuild.image_generation_completed_at || new Date(),
+          ).getTime() -
+            new Date(packageBuild.image_generation_started_at).getTime()) /
+            1000,
+        )
+      : 0
 
     if (
       !packageBuild?.transpilation_started_at &&
-      !packageBuild?.circuit_json_build_started_at
+      !packageBuild?.circuit_json_build_started_at &&
+      !packageBuild?.image_generation_started_at
     ) {
       return null
     }
 
-    return transpilationDuration + circuitJsonDuration
+    return transpilationDuration + circuitJsonDuration + imageGenerationDuration
   })()
   const toggleSection = (section: keyof typeof openSections) => {
     setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }))
@@ -482,6 +493,95 @@ export const ConnectedRepoOverview = ({
             </div>
           </CollapsibleContent>
         </Collapsible>
+
+        <Collapsible
+          open={openSections.imageGeneration}
+          onOpenChange={() => toggleSection("imageGeneration")}
+        >
+          <CollapsibleTrigger asChild>
+            <div className="flex items-center justify-between p-4 bg-white border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50">
+              <div className="flex items-center gap-3">
+                <ChevronRight
+                  className={`w-4 h-4 transition-transform ${openSections.imageGeneration ? "rotate-90" : ""}`}
+                />
+                {packageBuild.image_generation_error ? (
+                  <AlertCircle className="w-5 h-5 text-red-500" />
+                ) : packageBuild.image_generation_completed_at ? (
+                  <CheckCircle className="w-5 h-5 text-green-500" />
+                ) : packageBuild.image_generation_in_progress ? (
+                  <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
+                ) : (
+                  <Clock className="w-5 h-5 text-gray-400" />
+                )}
+                <span className="font-medium">Image Generation</span>
+              </div>
+              <div className="flex items-center gap-2">
+                {getStepDuration(
+                  packageBuild.image_generation_started_at,
+                  packageBuild.image_generation_completed_at,
+                ) && (
+                  <span className="text-sm text-gray-600">
+                    {getStepDuration(
+                      packageBuild.image_generation_started_at,
+                      packageBuild.image_generation_completed_at,
+                    )}
+                  </span>
+                )}
+                <Badge
+                  variant={
+                    getStepStatus(
+                      packageBuild.image_generation_error,
+                      packageBuild.image_generation_completed_at,
+                      packageBuild.image_generation_in_progress,
+                    ) === "success"
+                      ? "default"
+                      : getStepStatus(
+                            packageBuild.image_generation_error,
+                            packageBuild.image_generation_completed_at,
+                            packageBuild.image_generation_in_progress,
+                          ) === "error"
+                        ? "destructive"
+                        : "secondary"
+                  }
+                  className="text-xs"
+                >
+                  {packageBuild.image_generation_error
+                    ? "Failed"
+                    : packageBuild.image_generation_completed_at
+                      ? "Completed"
+                      : packageBuild.image_generation_in_progress
+                        ? "Running"
+                        : "Queued"}
+                </Badge>
+              </div>
+            </div>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="bg-white border-x border-b border-gray-200 rounded-b-lg p-4">
+              <div className="font-mono text-xs space-y-1">
+                {packageBuild.image_generation_error ? (
+                  <div className="text-red-600 whitespace-pre-wrap">
+                    {packageBuild.image_generation_error}
+                  </div>
+                ) : packageBuild.image_generation_logs &&
+                  packageBuild.image_generation_logs.length > 0 ? (
+                  packageBuild.image_generation_logs.map(
+                    (log: any, i: number) => (
+                      <div
+                        key={i}
+                        className="text-gray-600 whitespace-pre-wrap"
+                      >
+                        {log.msg || log.message || JSON.stringify(log)}
+                      </div>
+                    ),
+                  )
+                ) : (
+                  <div className="text-gray-500">No logs available</div>
+                )}
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
       </div>
     </div>
   )

package/src/components/preview/PackageReleasesDashboard.tsx

@@ -8,18 +8,20 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { MoreHorizontal, Clock, GitBranch, Eye } from "lucide-react"
 import { GitHubLogoIcon } from "@radix-ui/react-icons"
-import { useLocation } from "wouter"
 import { BuildsList } from "./BuildsList"
 import Header from "../Header"
 import { formatTimeAgo } from "@/lib/utils/formatTimeAgo"
 import { getBuildStatus } from "."
-import { PrefetchPageLink } from "../PrefetchPageLink"
+import { Link } from "wouter"
 import { PackageBreadcrumb } from "../PackageBreadcrumb"
 import {
   Package,
   PackageBuild,
   PackageRelease,
 } from "fake-snippets-api/lib/db/schema"
+import { useDownloadZip } from "@/hooks/use-download-zip"
+import { useToast } from "@/hooks/use-toast"
+import { usePackageFiles } from "@/hooks/use-package-files"
 
 export const PackageReleasesDashboard = ({
   latestRelease,
@@ -30,9 +32,21 @@ export const PackageReleasesDashboard = ({
   latestBuild: PackageBuild | null
   pkg: Package
 }) => {
-  const [, setLocation] = useLocation()
   const { status, label } = getBuildStatus(latestBuild)
-
+  const { toastLibrary } = useToast()
+  const { downloadZip } = useDownloadZip()
+  const { data: packageFiles } = usePackageFiles(
+    latestRelease.package_release_id,
+  )
+  const handleDownloadZip = () => {
+    if (pkg && packageFiles) {
+      toastLibrary.promise(downloadZip(pkg, packageFiles ?? []), {
+        loading: "Downloading ZIP...",
+        success: "ZIP downloaded successfully!",
+        error: "Failed to download ZIP",
+      })
+    }
+  }
   return (
     <>
       <Header />
@@ -59,12 +73,12 @@ export const PackageReleasesDashboard = ({
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex flex-col sm:flex-row sm:items-center gap-3">
-                    <PrefetchPageLink
+                    <Link
                       href={"/" + pkg.name}
                       className="text-2xl font-bold text-gray-900 truncate"
                     >
                       {pkg.name}
-                    </PrefetchPageLink>
+                    </Link>
                     <Badge
                       variant={
                         status === "success"
@@ -139,7 +153,7 @@ export const PackageReleasesDashboard = ({
                     <span className="sm:hidden">Repository</span>
                   </Button>
                 )}
-                {latestBuild && (
+                {latestBuild && status !== "error" && (
                   <Button
                     variant="outline"
                     size="sm"
@@ -178,10 +192,8 @@ export const PackageReleasesDashboard = ({
                         </a>
                       </DropdownMenuItem>
                     )}
-                    <DropdownMenuItem asChild>
-                      <a href="#" download>
-                        Download Build
-                      </a>
+                    <DropdownMenuItem asChild onClick={handleDownloadZip}>
+                      <span>Download Zip</span>
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       onClick={() => {

package/src/components/ui/tree-view.tsx

@@ -317,9 +317,12 @@ const TreeNode = ({
             default={defaultNodeIcon}
           />
           <span className="text-sm truncate">{item.name}</span>
-          <TreeActions isSelected={selectedItemId === item.id}>
-            {item.actions}
-          </TreeActions>
+          <div
+            className="flex items-center"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <TreeActions isSelected={true}>{item.actions}</TreeActions>
+          </div>
         </AccordionTrigger>
         <AccordionContent className="ml-4 pl-1 border-l">
           <TreeItem

package/src/hooks/use-add-org-member-mutation.ts

@@ -0,0 +1,51 @@
+import { useMutation, useQueryClient } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export const useAddOrgMemberMutation = ({
+  onSuccess,
+  onError,
+}: { onSuccess?: () => void; onError?: (error: any) => void } = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+  const queryClient = useQueryClient()
+
+  return useMutation(
+    ["addOrgMember"],
+    async ({
+      orgId,
+      accountId,
+      githubUsername,
+    }: {
+      orgId: string
+      accountId?: string
+      githubUsername?: string
+    }) => {
+      if (!session) throw new Error("No session")
+
+      const payload: any = {
+        org_id: orgId,
+      }
+
+      if (accountId) {
+        payload.account_id = accountId
+      }
+
+      if (githubUsername) {
+        payload.github_username = githubUsername
+      }
+
+      await axios.post("/orgs/add_member", payload)
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(["orgs", "members"])
+        onSuccess?.()
+      },
+      onError: (error: any) => {
+        console.error("Error adding organization member:", error)
+        onError?.(error)
+      },
+    },
+  )
+}

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

@@ -0,0 +1,38 @@
+import { useMutation } from "react-query"
+import { useAxios } from "./use-axios"
+import { useGlobalStore } from "./use-global-store"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+
+export const useCreateOrgMutation = ({
+  onSuccess,
+}: { onSuccess?: (org: PublicOrgSchema) => void } = {}) => {
+  const axios = useAxios()
+  const session = useGlobalStore((s) => s.session)
+
+  return useMutation(
+    ["createOrg"],
+    async ({ name }: { name: string }) => {
+      if (!session) throw new Error("No session")
+
+      const {
+        data: { org: newOrg },
+      } = await axios.post("/orgs/create", {
+        name,
+      })
+
+      if (!newOrg) {
+        throw new Error("Failed to create organization")
+      }
+
+      return newOrg
+    },
+    {
+      onSuccess: (org: PublicOrgSchema) => {
+        onSuccess?.(org)
+      },
+      onError: (error: any) => {
+        console.error("Error creating organization:", error)
+      },
+    },
+  )
+}

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

@@ -16,11 +16,13 @@ export const useCreatePackageMutation = ({
       description,
       is_private,
       is_unlisted,
+      org_id,
     }: {
       name?: string
       description?: string
       is_private?: boolean
       is_unlisted?: boolean
+      org_id?: string
     }) => {
       if (!session) throw new Error("No session")
 
@@ -31,6 +33,7 @@ export const useCreatePackageMutation = ({
         description,
         is_private,
         is_unlisted,
+        org_id,
       })
 
       if (!newPackage) {

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

@@ -21,12 +21,13 @@ export const useCurrentPackageRelease = (options?: {
 
   let query: Parameters<typeof usePackageRelease>[0] | null = null
 
-  if (releaseId) {
+  // Prioritize package_name + is_latest for better caching consistency
+  if (author && packageName && !version && !releaseId) {
+    query = { package_name: `${author}/${packageName}`, is_latest: true }
+  } else 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 }
   }

package/src/hooks/use-download-zip.ts

@@ -20,8 +20,8 @@ export const useDownloadZip = () => {
 
       for (const file of visibleFiles) {
         try {
-          const response = await axios.post("/package_files/get", {
-            package_file_id: file.package_file_id,
+          const response = await axios.get("/package_files/get", {
+            params: { package_file_id: file.package_file_id },
           })
 
           const content = response.data.package_file?.content_text || ""

package/src/hooks/use-global-store.ts

@@ -28,7 +28,9 @@ export const useGlobalStore = create<Store>()(
   ),
 )
 
-useGlobalStore.subscribe((state) => {
-  ;(window as any).globalStore = state
-  window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
-})
+if (typeof window !== "undefined") {
+  useGlobalStore.subscribe((state) => {
+    ;(window as any).globalStore = state
+    window.TSCIRCUIT_REGISTRY_TOKEN = state.session?.token ?? null
+  })
+}

package/src/hooks/use-hydration.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export const useHydration = () => {
+  const [hasHydrated, setHasHydrated] = useState(() => {
+    if (typeof window === "undefined") return false
+    return useGlobalStore.persist?.hasHydrated?.() ?? false
+  })
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+
+    if (useGlobalStore.persist?.hasHydrated?.()) {
+      setHasHydrated(true)
+      return
+    }
+
+    const unsubFinishHydration = useGlobalStore.persist?.onFinishHydration?.(
+      () => {
+        setHasHydrated(true)
+      },
+    )
+
+    return () => {
+      unsubFinishHydration?.()
+    }
+  }, [])
+
+  return hasHydrated
+}