@tscircuit/fake-snippets 0.0.49 → 0.0.51

package/src/components/ViewPackagePage/components/package-header.tsx

@@ -7,22 +7,12 @@ import {
   usePackageStarsByName,
 } from "@/hooks/use-package-stars"
 import { LockClosedIcon } from "@radix-ui/react-icons"
-import { GitFork, Star } from "lucide-react"
+import { GitFork, Package, Star } from "lucide-react"
 import { Link } from "wouter"
 import { useOrderDialog } from "@tscircuit/runframe"
 import { useEffect } from "react"
-
-interface PackageInfo {
-  name: string
-  unscoped_name: string
-  owner_github_username: string
-  star_count: string
-  description: string
-  ai_description: string
-  creator_account_id?: string
-  owner_org_id?: string
-  package_id: string
-}
+import { useGlobalStore } from "@/hooks/use-global-store"
+import { PackageInfo } from "@/lib/types"
 
 interface PackageHeaderProps {
   packageInfo?: PackageInfo
@@ -37,6 +27,7 @@ export default function PackageHeader({
 }: PackageHeaderProps) {
   const author = packageInfo?.owner_github_username
   const packageName = packageInfo?.unscoped_name
+  const sessionToken = useGlobalStore((s) => s.session?.token)
 
   const { OrderDialog, isOpen, open, close, stage, setStage } = useOrderDialog()
   const { data: starData, isLoading: isStarDataLoading } =
@@ -70,7 +61,11 @@ export default function PackageHeader({
     window.TSCIRCUIT_REGISTRY_API_BASE_URL =
       import.meta.env.VITE_TSCIRCUIT_REGISTRY_API_URL ??
       `${window.location.origin}/api`
-  }, [])
+    window.TSCIRCUIT_REGISTRY_TOKEN = sessionToken ?? ""
+    // TODO: replace with production stripe checkout base url
+    window.TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL =
+      import.meta.env.VITE_TSCIRCUIT_TEST_STRIPE_CHECKOUT_BASE_URL
+  }, [sessionToken])
 
   return (
     <header className="bg-white border-b border-gray-200 py-4">
@@ -109,13 +104,9 @@ export default function PackageHeader({
             )}
           </div>
           <div className="items-center space-x-2 hidden md:flex">
-            <Button
-              size="sm"
-              variant="default"
-              className="bg-blue-600 hover:bg-blue-700"
-              onClick={open}
-            >
-              Place Order ~$50
+            <Button variant="outline" size="sm" onClick={open}>
+              <Package className="w-4 h-4 mr-2" />
+              Order ~$50
             </Button>
             <Button
               variant="outline"
@@ -184,6 +175,7 @@ export default function PackageHeader({
         onClose={close}
         stage={stage}
         setStage={setStage}
+        packageReleaseId={packageInfo?.latest_package_release_id}
       />
     </header>
   )

package/src/components/ViewPackagePage/components/repo-page-content.tsx

@@ -5,7 +5,6 @@ import MainContentHeader from "./main-content-header"
 import Sidebar from "./sidebar"
 import MobileSidebar from "./mobile-sidebar"
 import ImportantFilesView from "./important-files-view"
-import { ShikiCodeViewer } from "./ShikiCodeViewer"
 
 // Tab Views
 import FilesView from "./tab-views/files-view"
@@ -16,10 +15,10 @@ import BOMView from "./tab-views/bom-view"
 import { isPackageFileImportant } from "../utils/is-package-file-important"
 import Header from "@/components/Header"
 import Footer from "@/components/Footer"
-import ViewSnippetHeader from "@/components/ViewSnippetHeader"
 import PackageHeader from "./package-header"
 import { useGlobalStore } from "@/hooks/use-global-store"
 import { useLocation } from "wouter"
+import { PackageInfo } from "@/lib/types"
 
 interface PackageFile {
   package_file_id: string
@@ -30,19 +29,6 @@ interface PackageFile {
   created_at: string // iso-8601
 }
 
-interface PackageInfo {
-  name: string
-  unscoped_name: string
-  owner_github_username: string
-  star_count: string
-  description: string
-  ai_description: string
-  ai_usage_instructions: string
-  creator_account_id?: string
-  owner_org_id?: string
-  package_id: string
-}
-
 interface RepoPageContentProps {
   packageFiles?: PackageFile[]
   importantFilePaths?: string[]

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

@@ -9,22 +9,7 @@ import { useEditPackageDetailsDialog } from "@/components/dialogs/edit-package-d
 import { useState, useEffect, useMemo } from "react"
 import { usePackageFile } from "@/hooks/use-package-files"
 import { getLicenseFromLicenseContent } from "@/lib/getLicenseFromLicenseContent"
-
-export interface PackageInfo {
-  name: string
-  unscoped_name: string
-  owner_github_username: string
-  star_count: string
-  description: string
-  ai_description: string
-  creator_account_id?: string
-  owner_org_id?: string
-  is_package?: boolean
-  website?: string
-  license?: string
-  package_id?: string
-}
-
+import { PackageInfo } from "@/lib/types"
 interface SidebarAboutSectionProps {
   packageInfo?: PackageInfo
   isLoading?: boolean

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

@@ -139,6 +139,10 @@ export const CodeEditor = ({
       resolveJsonModule: true,
     })
 
+    // Add alias for tscircuit -> @tscircuit/core
+    const tscircuitAliasDeclaration = `declare module "tscircuit" { export * from "@tscircuit/core"; }`
+    env.createFile("tscircuit-alias.d.ts", tscircuitAliasDeclaration)
+
     // Initialize ATA
     const ataConfig: ATABootstrapConfig = {
       projectName: "my-project",
@@ -339,10 +343,21 @@ export const CodeEditor = ({
               },
             }),
             EditorView.theme({
-              ".cm-content .cm-underline": {
-                textDecoration: "underline",
-                textDecorationColor: "rgba(0, 0, 255, 0.3)",
-                cursor: "pointer",
+              ".cm-tooltip-hover": {
+                maxWidth: "600px",
+                padding: "12px",
+                maxHeight: "400px",
+                borderRadius: "0.5rem",
+                backgroundColor: "#fff",
+                color: "#0f172a",
+                border: "1px solid #e2e8f0",
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)",
+                fontSize: "14px",
+                fontFamily: "monospace",
+                whiteSpace: "pre-wrap",
+                lineHeight: "1.6",
+                overflow: "auto",
+                zIndex: "9999",
               },
             }),
             EditorView.decorations.of((view) => {
@@ -383,8 +398,7 @@ export const CodeEditor = ({
 
     viewRef.current = view
 
-    // Initial ATA run for index.tsx
-    if (currentFile === "index.tsx") {
+    if (currentFile.endsWith(".tsx") || currentFile.endsWith(".ts")) {
       ata(`${defaultImports}${code}`)
     }
     // files.forEach(({path, content}) => {

package/src/hooks/use-shiki-highlighter.ts

@@ -0,0 +1,26 @@
+import { useState, useEffect } from "react"
+import { getSingletonHighlighter, Highlighter } from "shiki"
+
+let cachedHighlighter: Highlighter | null = null
+
+export const useShikiHighlighter = () => {
+  const [highlighter, setHighlighter] = useState<Highlighter | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchHighlighter = async () => {
+      if (!cachedHighlighter) {
+        cachedHighlighter = await getSingletonHighlighter({
+          themes: ["github-dark", "github-light"],
+          langs: ["typescript", "tsx"],
+        })
+      }
+      setHighlighter(cachedHighlighter)
+      setIsLoading(false)
+    }
+
+    fetchHighlighter()
+  }, [])
+
+  return { highlighter, isLoading }
+}

package/src/index.css

@@ -7,6 +7,12 @@
   }
 }
 
+.shiki {
+  font-family: "Fira Code", monospace;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;

package/src/lib/posthog.ts

@@ -0,0 +1,10 @@
+import posthog from "posthog-js"
+
+if (!posthog.__loaded) {
+  posthog.init("phc_htd8AQjSfVEsFCLQMAiUooG4Q0DKBCjqYuQglc9V3Wo", {
+    api_host: "https://postpig.tscircuit.com",
+    person_profiles: "always",
+  })
+}
+
+export { posthog }

package/src/lib/types.ts

@@ -1,6 +1,8 @@
 declare global {
   interface Window {
     TSCIRCUIT_REGISTRY_API_BASE_URL: string
+    TSCIRCUIT_REGISTRY_TOKEN: string
+    TSCIRCUIT_STRIPE_CHECKOUT_BASE_URL: string
     TSCIRCUIT_3D_OBJECT_REF: any
     __DEBUG_CODE_EDITOR_FS_MAP: Map<string, string>
     prettier: {
@@ -9,3 +11,17 @@ declare global {
     prettierPlugins: any
   }
 }
+
+export interface PackageInfo {
+  name: string
+  unscoped_name: string
+  owner_github_username: string
+  star_count: string
+  description: string
+  ai_description: string
+  ai_usage_instructions: string
+  creator_account_id?: string
+  owner_org_id?: string
+  package_id: string
+  latest_package_release_id: string
+}

package/src/pages/user-profile.tsx

@@ -53,7 +53,7 @@ export const UserProfilePage = () => {
         return response.data.snippets
       },
       {
-        enabled: activeTab === "starred", // Only fetch when starred tab is active
+        enabled: activeTab === "starred",
       },
     )
 
@@ -76,8 +76,18 @@ export const UserProfilePage = () => {
     ?.sort((a, b) => {
       switch (filter) {
         case "most-recent":
+          if (activeTab === "starred") {
+            const aTime = a.starred_at || a.updated_at
+            const bTime = b.starred_at || b.updated_at
+            return bTime.localeCompare(aTime)
+          }
           return b.updated_at.localeCompare(a.updated_at)
         case "least-recent":
+          if (activeTab === "starred") {
+            return (a.starred_at || a.updated_at).localeCompare(
+              b.starred_at || b.updated_at,
+            )
+          }
           return a.updated_at.localeCompare(b.updated_at)
         case "most-starred":
           return (b.star_count || 0) - (a.star_count || 0)

package/tailwind.config.js

@@ -43,5 +43,5 @@ export default {
       },
     },
   },
-  plugins: ["tailwindcss-animate"],
+  plugins: ["tailwindcss-animate", require("@tailwindcss/typography")],
 }