@tscircuit/fake-snippets 0.0.111 → 0.0.112

package/dist/index.js

@@ -361,6 +361,7 @@ var publicOrgSchema = z.object({
   is_personal_org: z.boolean(),
   display_name: z.string().optional(),
   package_count: z.number(),
+  github_handle: z.string().optional(),
   created_at: z.string(),
   user_permissions: z.object({
     can_manage_org: z.boolean().optional(),
@@ -2278,6 +2279,7 @@ export const SquareWaveModule = () => (
   });
   const testOrg = db.addOrganization({
     name: "test-organization",
+    github_handle: "tscircuit",
     owner_account_id: account_id
   });
   db.addOrganizationAccount({
@@ -2365,6 +2367,7 @@ exports.TestComponent = TestComponent;
   db.addOrganization({
     name: "testuser",
     owner_account_id: account_id,
+    github_handle: "tscircuit",
     is_personal_org: true
   });
 };

package/dist/schema.d.ts

@@ -1173,6 +1173,7 @@ declare const publicOrgSchema: z.ZodObject<{
     is_personal_org: z.ZodBoolean;
     display_name: z.ZodOptional<z.ZodString>;
     package_count: z.ZodNumber;
+    github_handle: z.ZodOptional<z.ZodString>;
     created_at: z.ZodString;
     user_permissions: z.ZodOptional<z.ZodObject<{
         can_manage_org: z.ZodOptional<z.ZodBoolean>;
@@ -1192,6 +1193,7 @@ declare const publicOrgSchema: z.ZodObject<{
     is_personal_org: boolean;
     member_count: number;
     package_count: number;
+    github_handle?: string | undefined;
     display_name?: string | undefined;
     user_permissions?: {
         can_manage_org?: boolean | undefined;
@@ -1205,6 +1207,7 @@ declare const publicOrgSchema: z.ZodObject<{
     is_personal_org: boolean;
     member_count: number;
     package_count: number;
+    github_handle?: string | undefined;
     display_name?: string | undefined;
     user_permissions?: {
         can_manage_org?: boolean | undefined;

package/dist/schema.js

@@ -356,6 +356,7 @@ var publicOrgSchema = z.object({
   is_personal_org: z.boolean(),
   display_name: z.string().optional(),
   package_count: z.number(),
+  github_handle: z.string().optional(),
   created_at: z.string(),
   user_permissions: z.object({
     can_manage_org: z.boolean().optional(),

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

@@ -427,6 +427,7 @@ export const publicOrgSchema = z.object({
   is_personal_org: z.boolean(),
   display_name: z.string().optional(),
   package_count: z.number(),
+  github_handle: z.string().optional(),
   created_at: z.string(),
   user_permissions: z
     .object({

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

@@ -1736,6 +1736,7 @@ export const SquareWaveModule = () => (
 
   const testOrg = db.addOrganization({
     name: "test-organization",
+    github_handle: "tscircuit",
     owner_account_id: account_id,
   })
 
@@ -1831,6 +1832,7 @@ exports.TestComponent = TestComponent;
   db.addOrganization({
     name: "testuser",
     owner_account_id: account_id,
+    github_handle: "tscircuit",
     is_personal_org: true,
   })
 }

package/fake-snippets-api/lib/public-mapping/public-map-org.ts

@@ -28,6 +28,7 @@ export const publicMapOrg = (
     package_count: Number(package_count) || 0,
     is_personal_org: Boolean(is_personal_org),
     created_at: String(created_at),
+    ...(github_handle ? { github_handle } : {}),
     ...(can_manage_org ? { user_permissions: { can_manage_org: true } } : {}),
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "type": "module",
   "repository": {
     "type": "git",
@@ -78,7 +78,7 @@
     "@resvg/resvg-wasm": "^2.6.2",
     "@sentry/react": "^10.10.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@tscircuit/3d-viewer": "^0.0.402",
+    "@tscircuit/3d-viewer": "^0.0.407",
     "@tscircuit/assembly-viewer": "^0.0.5",
     "@tscircuit/create-snippet-url": "^0.0.8",
     "@tscircuit/eval": "^0.0.325",
@@ -110,7 +110,7 @@
     "circuit-json-to-bom-csv": "^0.0.7",
     "circuit-json-to-gerber": "^0.0.29",
     "circuit-json-to-gltf": "^0.0.14",
-    "circuit-json-to-kicad": "^0.0.9",
+    "circuit-json-to-kicad": "^0.0.22",
     "circuit-json-to-pnp-csv": "^0.0.7",
     "circuit-json-to-readable-netlist": "^0.0.13",
     "circuit-json-to-simple-3d": "^0.0.7",
@@ -141,7 +141,7 @@
     "jscad-electronics": "^0.0.25",
     "jszip": "^3.10.1",
     "kicad-converter": "^0.0.17",
-    "kicadts": "^0.0.9",
+    "kicadts": "^0.0.10",
     "ky": "^1.7.5",
     "lucide-react": "^0.488.0",
     "lz-string": "^1.5.0",

package/src/components/CmdKMenu.tsx

@@ -372,7 +372,7 @@ const CmdKMenu = () => {
       switch (type) {
         case "package":
         case "recent":
-          window.location.href = `/${item.owner_github_username}/${item.unscoped_name}`
+          window.location.href = `/${item.name}`
           setOpen(false)
           break
         case "account":

package/src/components/GithubAvatarWithFallback.tsx

@@ -0,0 +1,33 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+
+export const GithubAvatarWithFallback = ({
+  username,
+  fallback,
+  className,
+  fallbackClassName,
+}: {
+  username?: string | null
+  fallback?: string | null
+  className?: string
+  fallbackClassName?: string
+}) => {
+  return (
+    <Avatar className={`border-4 border-gray-100 ${className}`}>
+      <AvatarImage
+        src={`https://github.com/${username}.png`}
+        alt={`${username || fallback} avatar`}
+        className="object-cover"
+      />
+      <AvatarFallback
+        className={`bg-blue-100 text-blue-600 ${fallbackClassName}`}
+      >
+        {(username || fallback || "")
+          .split(" ")
+          .map((word) => word[0])
+          .join("")
+          .toUpperCase()
+          .slice(0, 2)}
+      </AvatarFallback>
+    </Avatar>
+  )
+}

package/src/components/PackageCard.tsx

@@ -67,7 +67,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
 
   const handleShareClick = (e: React.MouseEvent) => {
     e.preventDefault()
-    const shareUrl = `${window.location.origin}/${pkg.owner_github_username}/${pkg.unscoped_name}`
+    const shareUrl = `${window.location.origin}/${pkg.name}`
     copyToClipboard(shareUrl)
   }
 
@@ -178,10 +178,7 @@ export const PackageCard: React.FC<PackageCardProps> = ({
 
   if (withLink) {
     return (
-      <Link
-        key={pkg.package_id}
-        href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
-      >
+      <Link key={pkg.package_id} href={`/${pkg.name}`}>
         {cardContent}
       </Link>
     )

package/src/components/PackagesList.tsx

@@ -50,10 +50,10 @@ export const PackagesList = ({
             <li key={pkg.package_id}>
               <div className="flex items-center">
                 <Link
-                  href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
+                  href={`/${pkg.name}`}
                   className="text-blue-600 hover:underline text-sm"
                 >
-                  {pkg.owner_github_username}/{pkg.unscoped_name}
+                  {pkg.name}
                 </Link>
                 {pkg.star_count > 0 && (
                   <span className="ml-2 text-gray-500 text-xs flex items-center">

package/src/components/ProfileRouter.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import { useParams } from "wouter"
-import { useOrgByGithubHandle } from "@/hooks/use-org-by-github-handle"
 import { OrganizationProfilePageContent } from "@/pages/organization-profile"
 import { UserProfilePage } from "@/pages/user-profile"
 import NotFoundPage from "@/pages/404"
 import { FullPageLoader } from "@/App"
+import { useOrgByName } from "@/hooks/use-org-by-org-name"
 
 const ProfileRouter: React.FC = () => {
   const { username } = useParams()
@@ -12,7 +12,7 @@ const ProfileRouter: React.FC = () => {
     data: organization,
     isLoading,
     error,
-  } = useOrgByGithubHandle(username || null)
+  } = useOrgByName(username || null)
 
   if (!username) {
     return <NotFoundPage heading="Username Not Provided" />

package/src/components/TrendingPackagesCarousel.tsx

@@ -11,10 +11,10 @@ const CarouselItem = ({
   apiBaseUrl,
 }: { pkg: Package; apiBaseUrl: string }) => {
   return (
-    <Link href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}>
+    <Link href={`/${pkg.name}`}>
       <div className="flex-shrink-0 w-[200px] bg-white p-3 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-gray-300 transition-colors">
         <div className="font-medium text-blue-600 mb-1 truncate text-sm">
-          {pkg.owner_github_username}/{pkg.unscoped_name}
+          {pkg.name}
         </div>
         <div className="mb-2 h-24 w-full bg-black rounded overflow-hidden">
           <img

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

@@ -81,7 +81,7 @@ export default function SidebarReleasesSection() {
     <div className="mb-6">
       <h2 className="text-lg font-semibold mb-2">
         <Link
-          href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
+          href={`/${packageInfo?.name}/releases`}
           className="hover:underline"
         >
           Releases
@@ -89,7 +89,7 @@ export default function SidebarReleasesSection() {
       </h2>
       <div className="flex flex-col space-y-2">
         <Link
-          href={`/${packageInfo?.owner_github_username}/${packageInfo?.unscoped_name}/releases`}
+          href={`/${packageInfo?.name}/releases`}
           className="flex items-center hover:underline"
         >
           <Tag className="h-4 w-4 mr-2 text-gray-500 dark:text-[#8b949e]" />

package/src/components/organization/OrganizationCard.tsx

@@ -21,6 +21,7 @@ import { timeAgo } from "@/lib/utils/timeAgo"
 import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard"
 import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import { useGlobalStore } from "@/hooks/use-global-store"
+import { GithubAvatarWithFallback } from "../GithubAvatarWithFallback"
 
 export interface OrganizationCardProps {
   /** The organization data to display */
@@ -85,21 +86,15 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
       <div className="flex items-start gap-4">
         {/* Organization Avatar */}
         <div className="flex-shrink-0">
-          <Avatar className="h-16 w-16 border-2 border-gray-100">
-            <AvatarImage
-              src={`https://github.com/${organization.name}.png`}
-              alt={`${organization.name} avatar`}
-              className="object-cover"
-            />
-            <AvatarFallback className="bg-blue-100 text-blue-600 font-semibold text-lg">
-              {organization.name
-                ?.split(" ")
-                .map((word) => word[0])
-                .join("")
-                .toUpperCase()
-                .slice(0, 2)}
-            </AvatarFallback>
-          </Avatar>
+          <GithubAvatarWithFallback
+            username={
+              organization.is_personal_org
+                ? organization.github_handle || organization.name
+                : organization.github_handle
+            }
+            fallback={organization.name}
+            fallbackClassName=" font-semibold text-lg"
+          />
         </div>
 
         {/* Organization Info */}

package/src/components/organization/OrganizationHeader.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from "react"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import React from "react"
 import { Button } from "@/components/ui/button"
 import { Building2, Users, Package, Lock, Globe2, Settings } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -7,6 +6,7 @@ import { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useLocation } from "wouter"
 import { useOrganization } from "@/hooks/use-organization"
+import { GithubAvatarWithFallback } from "../GithubAvatarWithFallback"
 
 interface OrganizationHeaderProps {
   organization: PublicOrgSchema
@@ -40,21 +40,12 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
         {/* Mobile Layout */}
         <div className="block sm:hidden">
           <div className="flex flex-col items-center text-center space-y-4">
-            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24">
-              <AvatarImage
-                src={`https://github.com/${organization.name}.png`}
-                alt={`${organization.name} avatar`}
-                className="object-cover"
-              />
-              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
-                {(organization.name || "")
-                  .split(" ")
-                  .map((word) => word[0])
-                  .join("")
-                  .toUpperCase()
-                  .slice(0, 2)}
-              </AvatarFallback>
-            </Avatar>
+            <GithubAvatarWithFallback
+              username={organization.github_handle}
+              fallback={organization.name}
+              className="shadow-sm size-16 md:size-20 lg:size-24"
+              fallbackClassName="font-bold text-xl md:text-2xl lg:text-3xl"
+            />
 
             <div>
               <div className="flex flex-col items-center gap-3 mb-3">
@@ -96,21 +87,12 @@ export const OrganizationHeader: React.FC<OrganizationHeaderProps> = ({
         {/* Desktop Layout */}
         <div className="hidden sm:block">
           <div className="flex items-center gap-6">
-            <Avatar className="border-4 border-gray-100 shadow-sm size-16 md:size-20 lg:size-24 flex-shrink-0">
-              <AvatarImage
-                src={`https://github.com/${organization.name}.png`}
-                alt={`${organization.name} avatar`}
-                className="object-cover"
-              />
-              <AvatarFallback className="bg-blue-100 text-blue-600 font-bold text-xl md:text-2xl lg:text-3xl">
-                {(organization.name || "")
-                  .split(" ")
-                  .map((word) => word[0])
-                  .join("")
-                  .toUpperCase()
-                  .slice(0, 2)}
-              </AvatarFallback>
-            </Avatar>
+            <GithubAvatarWithFallback
+              username={organization.github_handle}
+              fallback={organization.name}
+              className="flex-shrink-0 shadow-sm size-16 md:size-20 lg:size-24"
+              fallbackClassName="font-bold text-xl md:text-2xl lg:text-3xl"
+            />
 
             <div className="flex-1 min-w-0">
               <div className="flex items-center justify-between mb-3">

package/src/components/organization/OrganizationMembers.tsx

@@ -2,11 +2,9 @@ import React from "react"
 import { Link } from "wouter"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
 import { Users, Crown, Shield, User, Loader2 } from "lucide-react"
 import { timeAgo } from "@/lib/utils/timeAgo"
 import { cn } from "@/lib/utils"
-import { Account } from "fake-snippets-api/lib/db/schema"
 import { useListOrgMembers } from "@/hooks/use-list-org-members"
 
 interface OrganizationMembersProps {
@@ -69,7 +67,7 @@ export const OrganizationMembers: React.FC<OrganizationMembersProps> = ({
   return (
     <div
       className={cn(
-        "bg-white rounded-lg border border-gray-200 p-4 py-20 sm:p-6",
+        "bg-white rounded-lg border border-gray-200 p-4 sm:p-6",
         className,
       )}
     >

package/src/components/preview/ConnectedPackagesList.tsx

@@ -117,7 +117,7 @@ export const ConnectedPackageCard = ({
       <div className="flex items-start justify-between mb-4">
         <div className="flex items-center gap-3">
           <Link
-            href={`/${pkg.owner_github_username}/${pkg.unscoped_name}`}
+            href={`/${pkg.name}`}
             className="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors"
           >
             {pkg.unscoped_name}

package/src/hooks/use-org-by-github-handle.ts

@@ -1,11 +1,9 @@
 import { useQuery } from "react-query"
 import { useAxios } from "@/hooks/use-axios"
 import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
-import { useGlobalStore } from "./use-global-store"
 
 export const useOrgByGithubHandle = (githubHandle: string | null) => {
   const axios = useAxios()
-  const session = useGlobalStore((s) => s.session)
   return useQuery<PublicOrgSchema, Error & { status: number }>(
     ["orgs", "by-github-handle", githubHandle],
     async () => {

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

@@ -0,0 +1,24 @@
+import { useQuery } from "react-query"
+import { useAxios } from "@/hooks/use-axios"
+import type { PublicOrgSchema } from "fake-snippets-api/lib/db/schema"
+
+export const useOrgByName = (name: string | null) => {
+  const axios = useAxios()
+  return useQuery<PublicOrgSchema, Error & { status: number }>(
+    ["orgs", "by-org-name", name],
+    async () => {
+      if (!name) {
+        throw new Error("Organisation name is required")
+      }
+      const { data } = await axios.get("/orgs/get", {
+        params: { org_name: name },
+      })
+      return data.org
+    },
+    {
+      enabled: Boolean(name),
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  )
+}

package/src/pages/editor.tsx

@@ -7,9 +7,7 @@ import { useCurrentPackageInfo } from "@/hooks/use-current-package-info"
 export const EditorPage = () => {
   const { packageInfo: pkg, error } = useCurrentPackageInfo()
 
-  const projectUrl = pkg
-    ? `https://tscircuit.com/${pkg.owner_github_username}/${pkg.unscoped_name}`
-    : undefined
+  const projectUrl = pkg ? `https://tscircuit.com/${pkg.name}` : undefined
 
   return (
     <div className="overflow-x-hidden">

package/src/pages/user-profile.tsx

@@ -236,7 +236,7 @@ export const UserProfilePage = () => {
             }
           />
         ) : activeTab === "organizations" ? (
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {organizations && organizations.length > 0 ? (
               organizations
                 ?.filter((o) => {