@tscircuit/fake-snippets 0.0.110 → 0.0.112

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

@@ -7,15 +7,16 @@ export default withRouteSpec({
   methods: ["GET", "POST"],
   commonParams: z.object({
     name: z.string(),
+    github_handle: z.string().optional(),
   }),
   auth: "session",
   jsonResponse: z.object({
     org: publicOrgSchema,
   }),
 })(async (req, ctx) => {
-  const { name } = req.commonParams
+  const { name, github_handle } = req.commonParams
 
-  const existing = ctx.db.getOrg({ github_handle: name })
+  const existing = ctx.db.getOrg({ org_name: name })
 
   if (existing) {
     return ctx.error(400, {
@@ -28,6 +29,7 @@ export default withRouteSpec({
     name: name,
     created_at: new Date(),
     can_manage_org: true,
+    ...(github_handle ? { github_handle } : {}),
   }
 
   const org = ctx.db.addOrganization(newOrg)

package/fake-snippets-api/routes/api/orgs/get.ts

@@ -9,7 +9,7 @@ export default withRouteSpec({
     .object({ org_id: z.string() })
     .or(z.object({ org_name: z.string() }))
     .or(z.object({ github_handle: z.string() })),
-  auth: "session",
+  auth: "optional_session",
   jsonResponse: z.object({
     org: publicOrgSchema,
   }),

package/fake-snippets-api/routes/api/orgs/list_members.ts

@@ -13,7 +13,7 @@ export default withRouteSpec({
         name: z.string(),
       }),
     ),
-  auth: "session",
+  auth: "optional_session",
   jsonResponse: z.object({
     members: z.array(accountSchema),
   }),
@@ -35,13 +35,6 @@ export default withRouteSpec({
     })
   }
 
-  if (!org.can_manage_org) {
-    return ctx.error(403, {
-      error_code: "not_authorized",
-      message: "You do not have permission to manage this organization",
-    })
-  }
-
   const members = ctx.db.orgAccounts
     .map((m) => {
       if (m.org_id == org.org_id) return ctx.db.getAccount(m.account_id)

package/fake-snippets-api/routes/api/orgs/update.ts

@@ -13,6 +13,7 @@ export default withRouteSpec({
       z.object({
         name: z.string().optional(),
         display_name: z.string().optional(),
+        github_handle: z.string().trim().min(1).nullable().optional(),
       }),
     ),
   auth: "session",
@@ -20,10 +21,11 @@ export default withRouteSpec({
     org: publicOrgSchema,
   }),
 })(async (req, ctx) => {
-  const { org_id, name, display_name } = req.commonParams as {
+  const { org_id, name, display_name, github_handle } = req.commonParams as {
     org_id: string
     name?: string
     display_name?: string
+    github_handle?: string
   }
 
   const org = ctx.db.getOrg({ org_id }, ctx.auth)
@@ -43,13 +45,13 @@ export default withRouteSpec({
   }
 
   // No changes provided
-  if (!name && display_name === undefined) {
+  if (!name && display_name === undefined && github_handle === null) {
     return ctx.json({ org: publicMapOrg(org) })
   }
 
-  if (name && name !== org.github_handle) {
+  if (name && name !== org.org_name) {
     // Validate duplicate name
-    const duplicate = ctx.db.getOrg({ github_handle: name })
+    const duplicate = ctx.db.getOrg({ org_name: name })
 
     if (duplicate && duplicate.org_id !== org_id) {
       return ctx.error(400, {
@@ -58,20 +60,43 @@ export default withRouteSpec({
       })
     }
   }
+  if (
+    github_handle !== undefined &&
+    github_handle !== org.github_handle &&
+    github_handle !== null
+  ) {
+    const duplicateHandle = ctx.db.getOrg({ github_handle })
+      ? ctx.db.getOrg({ github_handle })?.org_id != org_id
+      : false
 
+    if (duplicateHandle) {
+      return ctx.error(400, {
+        error_code: "org_github_handle_already_exists",
+        message: "An organization with this GitHub handle already exists",
+      })
+    }
+  }
   const updates: {
-    github_handle?: string
+    org_name?: string
     org_display_name?: string
+    github_handle?: string
   } = {}
 
   if (name) {
     updates.github_handle = name
+    updates.org_name = name
+  }
+
+  if (github_handle !== undefined) {
+    updates.github_handle = github_handle
   }
 
   if (display_name !== undefined) {
     const trimmedDisplayName = display_name.trim()
+    const handleForFallback =
+      github_handle !== undefined ? github_handle : org.github_handle
     const fallbackDisplayName =
-      name ?? org.org_display_name ?? org.github_handle ?? ""
+      name ?? org.org_display_name ?? org.org_name ?? handleForFallback ?? ""
     updates.org_display_name =
       trimmedDisplayName.length > 0 ? trimmedDisplayName : fallbackDisplayName
   }

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

@@ -66,6 +66,7 @@ export default withRouteSpec({
       .find(
         (o) =>
           o.org_display_name?.toLowerCase() === requested_owner_lower ||
+          o.org_name?.toLowerCase() === requested_owner_lower ||
           o.github_handle?.toLowerCase() === requested_owner_lower,
       )
 
@@ -78,10 +79,12 @@ export default withRouteSpec({
     }
 
     owner_org_id = memberOrg.org_id
-    owner_github_username = memberOrg.github_handle
+    owner_github_username = memberOrg.github_handle || memberOrg.org_name
   }
 
-  const existingPackage = ctx.db.packages.find((pkg) => pkg.name === final_name)
+  const existingPackage = ctx.db
+    .getState()
+    .packages.find((pkg) => pkg.name === final_name)
 
   if (existingPackage) {
     throw ctx.error(400, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tscircuit/fake-snippets",
-  "version": "0.0.110",
+  "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,10 +110,12 @@
     "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.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",
     "circuit-json-to-spice": "^0.0.6",
+    "circuit-json-to-step": "^0.0.2",
     "circuit-json-to-tscircuit": "^0.0.9",
     "circuit-to-svg": "^0.0.202",
     "class-variance-authority": "^0.7.1",
@@ -139,6 +141,7 @@
     "jscad-electronics": "^0.0.25",
     "jszip": "^3.10.1",
     "kicad-converter": "^0.0.17",
+    "kicadts": "^0.0.10",
     "ky": "^1.7.5",
     "lucide-react": "^0.488.0",
     "lz-string": "^1.5.0",
@@ -172,6 +175,7 @@
     "sitemap": "^8.0.0",
     "sonner": "^1.5.0",
     "states-us": "^1.1.1",
+    "stepts": "^0.0.1",
     "svgo": "^4.0.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.13",
@@ -192,8 +196,6 @@
     "wouter": "^3.3.5",
     "zod": "^3.23.8",
     "zustand": "^4.5.5",
-    "zustand-hoist": "^2.0.1",
-    "circuit-json-to-kicad": "^0.0.3",
-    "kicadts": "^0.0.9"
+    "zustand-hoist": "^2.0.1"
   }
 }

package/src/App.tsx

@@ -87,9 +87,7 @@ const ReleasePreviewPage = lazyImport(() => import("@/pages/preview-release"))
 const OrganizationSettingsPage = lazyImport(
   () => import("@/pages/organization-settings"),
 )
-const SettingsRedirectPage = lazyImport(
-  () => import("@/pages/settings-redirect"),
-)
+const UserSettingsPage = lazyImport(() => import("@/pages/user-settings"))
 
 class ErrorBoundary extends React.Component<
   { children: React.ReactNode },
@@ -270,8 +268,8 @@ function App() {
             {/* Organization creation route */}
             <Route path="/orgs/new" component={CreateOrganizationPage} />
 
-            {/* User settings redirect */}
-            <Route path="/settings" component={SettingsRedirectPage} />
+            {/* User settings */}
+            <Route path="/settings" component={UserSettingsPage} />
 
             {/* Organization settings route */}
             <Route

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/DownloadButtonAndMenu.tsx

@@ -25,6 +25,7 @@ import { CubeIcon } from "@radix-ui/react-icons"
 import { useState } from "react"
 import { useAxios } from "@/hooks/use-axios"
 import { useCurrentPackageId } from "@/hooks/use-current-package-id"
+import { downloadStepFile } from "@/lib/download-fns/download-step"
 
 interface DownloadButtonAndMenuProps {
   className?: string
@@ -225,7 +226,19 @@ export function DownloadButtonAndMenu({
               kicad_*.zip
             </span>
           </DropdownMenuItem>
-
+          <DropdownMenuItem
+            className="text-xs"
+            onSelect={async () => {
+              const cj = await getCircuitJson()
+              downloadStepFile(cj, unscopedName || "step_file")
+            }}
+          >
+            <Download className="mr-1 h-3 w-3" />
+            <span className="flex-grow mr-6">Step Format</span>
+            <span className="text-[0.6rem] bg-emerald-500 opacity-80 text-white font-mono rounded-md px-1 text-center py-0.5 mr-1">
+              STEP
+            </span>
+          </DropdownMenuItem>
           <DropdownMenuItem
             className="text-xs"
             onSelect={async () => {

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/SentryNotFoundReporter.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react"
+import { Sentry } from "@/lib/sentry"
+
+type NotFoundContext = "package" | "package_release"
+
+type SentryNotFoundReporterProps = {
+  context: NotFoundContext
+  slug: string
+  status?: number
+  message?: string
+}
+
+export const SentryNotFoundReporter = ({
+  context,
+  slug,
+  status,
+  message,
+}: SentryNotFoundReporterProps) => {
+  const hasLoggedRef = useRef(false)
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    if (typeof slug !== "string" || slug.length === 0) return
+    if (typeof status === "number" && status !== 404) return
+    if (hasLoggedRef.current) return
+
+    hasLoggedRef.current = true
+
+    Sentry.captureMessage(`package:view:${context}-not-found`, {
+      level: "warning",
+      tags: {
+        slug,
+      },
+      extra: {
+        status,
+        message,
+      },
+    })
+  }, [context, slug, status, message])
+
+  return null
+}
+
+export default SentryNotFoundReporter

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 */
@@ -72,32 +73,28 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
   const handleSettingsClick = (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    window.location.href = `/${organization.name}/settings`
+    window.location.href = organization.is_personal_org
+      ? `/settings`
+      : `/${organization.name}/settings`
   }
 
   const cardContent = (
     <div
-      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 ${className}`}
+      className={`border p-4 rounded-md hover:shadow-md transition-shadow flex flex-col gap-4 h-full ${className}`}
       onClick={handleCardClick}
     >
       <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 */}
@@ -193,7 +190,7 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
       <Link
         key={organization.org_id}
         href={`/${organization.name}`}
-        className="block"
+        className="block h-full"
       >
         {cardContent}
       </Link>

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-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
+}