@tscircuit/fake-snippets 0.0.114 → 0.0.116

package/dist/index.js

@@ -593,7 +593,7 @@ var seed = (db) => {
       phone: "555-123-4567"
     }
   });
-  db.addAccount({
+  const seveibarAcc = db.addAccount({
     github_username: "seveibar"
   });
   if (process.env.AUTOLOAD_PACKAGES === "true") {
@@ -2370,6 +2370,10 @@ exports.TestComponent = TestComponent;
     github_handle: "tscircuit",
     is_personal_org: true
   });
+  db.addOrganizationAccount({
+    org_id: testOrg.org_id,
+    account_id: seveibarAcc.account_id
+  });
 };
 
 // fake-snippets-api/lib/package_file/generate-fs-sha.ts

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

@@ -18,7 +18,7 @@ export const seed = (db: DbClient) => {
       phone: "555-123-4567",
     },
   })
-  db.addAccount({
+  const seveibarAcc = db.addAccount({
     github_username: "seveibar",
   })
 
@@ -1835,4 +1835,9 @@ exports.TestComponent = TestComponent;
     github_handle: "tscircuit",
     is_personal_org: true,
   })
+
+  db.addOrganizationAccount({
+    org_id: testOrg.org_id,
+    account_id: seveibarAcc.account_id,
+  })
 }

package/fake-snippets-api/routes/api/autocomplete/create_autocomplete.ts

@@ -0,0 +1,16 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "session",
+  jsonBody: z.object({
+    prefix: z.string(),
+    suffix: z.string(),
+  }),
+  jsonResponse: z.object({
+    prediction: z.string(),
+  }),
+})(async (req, ctx) => {
+  return ctx.json({ prediction: "{/* mock autocomplete prediction */}" })
+})

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

@@ -18,35 +18,44 @@ export default withRouteSpec({
     description: z.string().optional(),
     is_private: z.boolean().optional().default(false),
     is_unlisted: z.boolean().optional().default(false),
+    org_id: z.string().optional(),
   }),
   jsonResponse: z.object({
     package: packageSchema.optional(),
   }),
 })(async (req, ctx) => {
-  const { name, description, is_private, is_unlisted } = req.jsonBody
-
+  const { name, description, is_private, is_unlisted, org_id } = req.jsonBody
   let owner_segment = name?.split("/")[0]
   let unscoped_name = name?.split("/")[1]
 
   if (name && !unscoped_name) {
-    throw ctx.error(400, {
+    return ctx.error(400, {
       error_code: "invalid_package_name",
       message:
         "Package name must include an author segment (e.g. author/package_name)",
     })
   }
+  const org = ctx.db.getOrg({ org_id })
+  if (Boolean(org_id) && !Boolean(org))
+    return ctx.error(404, {
+      error_code: "org_not_found",
+      message: "Organization not found",
+    })
 
   if (!unscoped_name) {
     const state = ctx.db.getState()
-    const count = state.packages.filter(
-      (pkg) => pkg.creator_account_id === ctx.auth.account_id,
-    ).length
+
+    const count = org_id
+      ? state.packages.filter((pkg) => pkg.owner_org_id === org_id).length
+      : state.packages.filter(
+          (pkg) => pkg.creator_account_id === ctx.auth.account_id,
+        ).length
 
     unscoped_name = `untitled-package-${count}`
   }
 
   if (!owner_segment) {
-    owner_segment = ctx.auth.github_username
+    owner_segment = org_id ? org!.org_name : ctx.auth.github_username
   }
 
   const final_name = name ?? `${owner_segment}/${unscoped_name}`
@@ -71,7 +80,7 @@ export default withRouteSpec({
       )
 
     if (!memberOrg) {
-      throw ctx.error(403, {
+      return ctx.error(403, {
         error_code: "forbidden",
         message:
           "You must be a member of the organization to create a package under it",
@@ -87,7 +96,7 @@ export default withRouteSpec({
     .packages.find((pkg) => pkg.name === final_name)
 
   if (existingPackage) {
-    throw ctx.error(400, {
+    return ctx.error(400, {
       error_code: "package_already_exists",
       message: "A package with this name already exists",
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.114",
+  "version": "0.0.116",
   "type": "module",
   "repository": {
     "type": "git",
@@ -81,7 +81,7 @@
     "@tscircuit/3d-viewer": "^0.0.407",
     "@tscircuit/assembly-viewer": "^0.0.5",
     "@tscircuit/create-snippet-url": "^0.0.8",
-    "@tscircuit/eval": "^0.0.325",
+    "@tscircuit/eval": "^0.0.406",
     "@tscircuit/layout": "^0.0.29",
     "@tscircuit/mm": "^0.0.8",
     "@tscircuit/pcb-viewer": "^1.11.218",

package/src/components/GithubAvatarWithFallback.tsx

@@ -14,7 +14,7 @@ export const GithubAvatarWithFallback = ({
   size?: number
 }) => {
   return (
-    <Avatar className={`border-4 border-gray-100 ${className}`}>
+    <Avatar className={className}>
       <AvatarImage
         src={`https://github.com/${username}.png${size ? `?size=${size}` : ""}`}
         alt={`${username || fallback} avatar`}

package/src/components/dialogs/new-package-save-prompt-dialog.tsx

@@ -19,6 +19,7 @@ import {
 import { createUseDialog } from "./create-use-dialog"
 import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { ICreatePackageProps } from "@/hooks/useFileManagement"
 
 export const NewPackageSavePromptDialog = ({
   open,
@@ -31,27 +32,31 @@ export const NewPackageSavePromptDialog = ({
   onOpenChange: (open: boolean) => void
   initialIsPrivate?: boolean
   initialName?: string
-  onSave: ({
-    name,
-    isPrivate,
-    orgId,
-  }: {
-    name?: string
-    isPrivate: boolean
-    orgId: string
-  }) => void
+  onSave: (props: ICreatePackageProps) => void
 }) => {
   const [packageName, setPackageName] = useState(initialName)
   const session = useGlobalStore((s) => s.session)
   const [isPrivate, setIsPrivate] = useState(initialIsPrivate)
   const [selectedOrgId, setSelectedOrgId] = useState<string>("")
   const { data: organizations, isLoading: orgsLoading } = useListUserOrgs()
+
+  const isOwnerPersonalOrg = useMemo(() => {
+    if (!selectedOrgId) return false
+    const selectedOrg = organizations?.find((x) => x.org_id === selectedOrgId)
+    return (
+      selectedOrg?.is_personal_org &&
+      selectedOrg?.owner_account_id == session?.account_id
+    )
+  }, [selectedOrgId, organizations, session?.github_username])
+
   const fullPackageName = useMemo(() => {
+    if (!Boolean(packageName)) return
     if (selectedOrgId) {
       return `${organizations?.find((x) => x.org_id === selectedOrgId)?.name}/${packageName}`
     }
     return `${session?.github_username}/${packageName}`
   }, [selectedOrgId, packageName, organizations, session?.github_username])
+
   useEffect(() => {
     if (organizations && organizations.length > 0 && !selectedOrgId) {
       setSelectedOrgId(
@@ -169,9 +174,13 @@ export const NewPackageSavePromptDialog = ({
           <Button
             onClick={() => {
               onSave({
-                name: fullPackageName.trim(),
+                name: fullPackageName,
                 isPrivate,
-                orgId: selectedOrgId,
+                ...(isOwnerPersonalOrg
+                  ? {}
+                  : {
+                      org_id: selectedOrgId,
+                    }),
               })
               onOpenChange(false)
             }}

package/src/components/organization/OrganizationHeader.tsx

@@ -4,7 +4,7 @@ import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import { useGlobalStore } from "@/hooks/use-global-store"
-import { useLocation } from "wouter"
+import { Link, useLocation } from "wouter"
 import { useOrganization } from "@/hooks/use-organization"
 import { GithubAvatarWithFallback } from "../GithubAvatarWithFallback"
 
@@ -97,9 +97,12 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
 
             <div className="flex-1 min-w-0">
               <div className="flex items-center justify-between mb-3">
-                <h1 className="font-bold text-gray-900 text-2xl md:text-3xl truncate">
+                <Link
+                  href={`/${organization.name}`}
+                  className="font-bold text-gray-900 text-2xl md:text-3xl truncate"
+                >
                   {organization.name}
-                </h1>
+                </Link>
                 {canManageOrg && showActions && (
                   <Button variant="outline" onClick={handleSettingsClick}>
                     <Settings className="mr-2 h-4 w-4" />

package/src/components/organization/OrganizationMembers.tsx

@@ -1,48 +1,26 @@
 import React from "react"
 import { Link } from "wouter"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Badge } from "@/components/ui/badge"
-import { Users, Crown, Shield, User, Loader2 } from "lucide-react"
+import { Users, Loader2 } from "lucide-react"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { cn } from "@/lib/utils"
 import { useListOrgMembers } from "@/hooks/use-list-org-members"
+import { getMemberRole } from "@/lib/utils/member-role"
+import { RoleBadge } from "@/components/ui/role-badge"
+import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 
 interface OrganizationMembersProps {
-  orgId: string
+  organization: PublicOrgSchema
   className?: string
 }
-type MemberRole = "owner" | "admin" | "member" //todo
-const getRoleIcon = (role: MemberRole) => {
-  switch (role) {
-    case "owner":
-      return <Crown className="h-3 w-3" />
-    case "admin":
-      return <Shield className="h-3 w-3" />
-    case "member":
-      return <User className="h-3 w-3" />
-    default:
-      return <User className="h-3 w-3" />
-  }
-}
-
-const getRoleColor = (role: MemberRole) => {
-  switch (role) {
-    case "owner":
-      return "bg-yellow-100 text-yellow-800 border-yellow-200"
-    case "admin":
-      return "bg-purple-100 text-purple-800 border-purple-200"
-    case "member":
-      return "bg-gray-100 text-gray-800 border-gray-200"
-    default:
-      return "bg-gray-100 text-gray-800 border-gray-200"
-  }
-}
 
 export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
-  orgId,
+  organization,
   className,
 }) => {
-  const { data: members = [], isLoading } = useListOrgMembers({ orgId })
+  const { data: members = [], isLoading } = useListOrgMembers({
+    orgId: organization.org_id,
+  })
 
   if (isLoading) {
     return (
@@ -78,60 +56,54 @@ export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
       </div>
 
       <div className="space-y-2 sm:space-y-3">
-        {members.map((member) => (
-          <Link
-            key={member.account_id || member.github_username}
-            href={`/${member.github_username}`}
-            className="block"
-          >
-            <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
-              <div className="flex items-center gap-3 min-w-0 flex-1">
-                <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">
-                  <AvatarImage
-                    src={`https://github.com/${member.github_username}.png`}
-                    alt={`${member.github_username} avatar`}
-                  />
-                  <AvatarFallback className="text-sm font-medium">
-                    {member.github_username
-                      .split(" ")
-                      .map((word) => word[0])
-                      .join("")
-                      .toUpperCase()
-                      .slice(0, 2)}
-                  </AvatarFallback>
-                </Avatar>
+        {members.map((member) => {
+          const role = getMemberRole(organization, member.account_id)
+          return (
+            <Link
+              key={member.account_id || member.github_username}
+              href={`/${member.github_username}`}
+              className="block"
+            >
+              <div className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
+                <div className="flex items-center gap-3 min-w-0 flex-1">
+                  <Avatar className="h-10 w-10 sm:h-12 sm:w-12 flex-shrink-0">
+                    <AvatarImage
+                      src={`https://github.com/${member.github_username}.png`}
+                      alt={`${member.github_username} avatar`}
+                    />
+                    <AvatarFallback className="text-sm font-medium">
+                      {member.github_username
+                        .split(" ")
+                        .map((word) => word[0])
+                        .join("")
+                        .toUpperCase()
+                        .slice(0, 2)}
+                    </AvatarFallback>
+                  </Avatar>
 
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center gap-2 mb-1">
-                    <h3 className="font-medium text-gray-900 truncate">
-                      {member.github_username}
-                    </h3>
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        "text-xs flex items-center gap-1 flex-shrink-0",
-                        getRoleColor("admin"),
-                      )}
-                    >
-                      {getRoleIcon("admin")}
-                      {"admin"}
-                    </Badge>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h3 className="font-medium text-gray-900 truncate">
+                        {member.github_username}
+                      </h3>
+                      <RoleBadge role={role} />
+                    </div>
+                    <p className="text-sm text-gray-500 truncate">
+                      @{member.github_username}
+                    </p>
                   </div>
-                  <p className="text-sm text-gray-500 truncate">
-                    @{member.github_username}
-                  </p>
                 </div>
+                {member.joined_at && (
+                  <div className="text-right flex-shrink-0 hidden sm:block">
+                    <p className="text-xs text-gray-500">
+                      Joined {timeAgo(new Date(member.joined_at))}
+                    </p>
+                  </div>
+                )}
               </div>
-              {member.joined_at && (
-                <div className="text-right flex-shrink-0 hidden sm:block">
-                  <p className="text-xs text-gray-500">
-                    Joined {timeAgo(new Date(member.joined_at))}
-                  </p>
-                </div>
-              )}
-            </div>
-          </Link>
-        ))}
+            </Link>
+          )
+        })}
       </div>
 
       {members.length === 0 && (

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

@@ -51,6 +51,7 @@ import { isHiddenFile } from "../ViewPackagePage/utils/is-hidden-file"
 import { inlineCopilot } from "codemirror-copilot"
 import { useViewTsFilesDialog } from "@/components/dialogs/view-ts-files-dialog"
 import { Loader2 } from "lucide-react"
+import { useAxios } from "@/hooks/use-axios"
 
 const defaultImports = `
 import React from "@types/react/jsx-runtime"
@@ -111,7 +112,7 @@ export const CodeEditor = ({
   const highlightTimeoutRef = useRef<number | null>(null)
 
   const { highlighter } = useShikiHighlighter()
-
+  const axios = useAxios()
   // Get URL search params for file_path
   const urlParams = new URLSearchParams(window.location.search)
   const filePathFromUrl = urlParams.get("file_path")
@@ -358,23 +359,12 @@ export const CodeEditor = ({
     if (aiAutocompleteEnabled) {
       baseExtensions.push(
         inlineCopilot(async (prefix, suffix) => {
-          const res = await fetch(
-            `${apiUrl}/autocomplete/create_autocomplete`,
-            {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                prefix,
-                suffix,
-                language: "typescript",
-              }),
-            },
-          )
-
-          const { prediction } = await res.json()
-          return prediction
+          const res = await axios.post("/autocomplete/create_autocomplete", {
+            prefix,
+            suffix,
+            language: "typescript",
+          })
+          return res.data?.prediction
         }),
         EditorView.theme({
           ".cm-ghostText, .cm-ghostText *": {

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

@@ -390,12 +390,12 @@ export const CodeEditorHeader: React.FC<CodeEditorHeaderProps> = ({
                   onClick={() => {
                     setAiAutocompleteEnabled((prev) => !prev)
                   }}
-                  className={`relative group bg-transparent ${aiAutocompleteEnabled ? "text-gray-600 bg-gray-50" : "text-gray-400"}`}
+                  className={`relative group bg-transparent ${aiAutocompleteEnabled ? "text-black bg-white" : "text-gray-500 group-hover:text-black"}`}
                 >
                   <Bot className="h-4 w-4" />
                   {!aiAutocompleteEnabled && (
                     <div className="absolute inset-0 flex items-center justify-center">
-                      <div className="w-5 h-0.5 group-hover:bg-slate-900 bg-gray-400 rotate-45 rounded-full" />
+                      <div className="w-5 h-0.5 group-hover:bg-black bg-gray-500 rotate-45 rounded-full" />
                     </div>
                   )}
                 </Button>

package/src/components/ui/role-badge.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils"
+import {
+  type MemberRole,
+  getRoleIcon,
+  getRoleColor,
+  getRoleName,
+} from "@/lib/utils/member-role"
+
+interface RoleBadgeProps {
+  role: MemberRole
+  className?: string
+}
+
+export const RoleBadge = ({ role, className }: RoleBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        "select-none inline-flex items-center gap-1 py-0.5 px-1.5 rounded text-xs font-medium flex-shrink-0",
+        getRoleColor(role),
+        className,
+      )}
+    >
+      {getRoleIcon(role)}
+      <span className="leading-none">{getRoleName(role)}</span>
+    </div>
+  )
+}

package/src/hooks/use-list-org-members.ts

@@ -25,6 +25,7 @@ export const useListOrgMembers = ({
       enabled: Boolean(orgId || orgName),
       retry: false,
       refetchOnWindowFocus: false,
+      refetchOnMount: false,
       keepPreviousData: true,
     },
   )

package/src/hooks/use-package-by-package-name.ts

@@ -1,8 +1,11 @@
-import { useQuery } from "react-query"
+import { useQuery, UseQueryOptions } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import type { Package } from "fake-snippets-api/lib/db/schema"
 
-export const usePackageByName = (packageName: string | null) => {
+export const usePackageByName = (
+  packageName: string | null,
+  options?: UseQueryOptions<Package, Error & { status: number }>,
+) => {
   const axios = useAxios()
   return useQuery<Package, Error & { status: number }>(
     ["package", packageName],
@@ -19,6 +22,8 @@ export const usePackageByName = (packageName: string | null) => {
       retry: false,
       enabled: Boolean(packageName),
       refetchOnWindowFocus: false,
+      staleTime: 5 * 60 * 1000,
+      ...options,
     },
   )
 }

package/src/hooks/use-package-stars.ts

@@ -1,5 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "react-query"
 import { useAxios } from "./use-axios"
+import { usePackageByName } from "./use-package-by-package-name"
+import { usePackageById } from "./use-package-by-package-id"
 
 type PackageStarQuery = { package_id: string } | { name: string }
 
@@ -9,7 +11,11 @@ interface PackageStarResponse {
 }
 
 export const usePackageStars = (query: PackageStarQuery | null) => {
-  const axios = useAxios()
+  const packageName = query && "name" in query ? query.name : null
+  const packageId = query && "package_id" in query ? query.package_id : null
+  const packageQuery = packageName
+    ? usePackageByName(packageName)
+    : usePackageById(packageId)
 
   return useQuery<PackageStarResponse, Error & { status: number }>(
     ["packageStars", query],
@@ -17,19 +23,14 @@ export const usePackageStars = (query: PackageStarQuery | null) => {
       if (!query) {
         throw new Error("Query is required")
       }
-
-      const { data } = await axios.get("/packages/get", {
-        params: query,
-      })
-
       return {
-        is_starred: data.package.is_starred ?? false,
-        star_count: data.package.star_count ?? 0,
+        is_starred: packageQuery.data?.is_starred ?? false,
+        star_count: packageQuery.data?.star_count ?? 0,
       }
     },
     {
       retry: false,
-      enabled: Boolean(query),
+      enabled: Boolean(query) && packageQuery.isSuccess,
     },
   )
 }

package/src/hooks/useFileManagement.ts

@@ -45,6 +45,12 @@ export interface IRenameFileResult {
   fileRenamed: boolean
 }
 
+export interface ICreatePackageProps {
+  isPrivate?: boolean
+  name?: string
+  org_id?: string
+}
+
 export function useFileManagement({
   templateCode,
   currentPackage,
@@ -428,12 +434,8 @@ export function useFileManagement({
   const savePackage = async ({
     name,
     isPrivate,
-    orgId,
-  }: {
-    name?: string
-    isPrivate: boolean
-    orgId: string
-  }) => {
+    org_id,
+  }: ICreatePackageProps) => {
     if (!isLoggedIn) {
       toast({
         title: "Not Logged In",
@@ -443,9 +445,9 @@ export function useFileManagement({
     }
 
     await createPackageMutation.mutateAsync({
-      is_private: isPrivate,
-      org_id: orgId,
-      ...(name ? { name } : {}),
+      is_private: Boolean(isPrivate),
+      ...(org_id ? { org_id: org_id } : {}),
+      ...(name ? { name: name?.trim() } : {}),
     })
   }