@tscircuit/fake-snippets 0.0.109 → 0.0.111

package/src/components/dialogs/GitHubRepositorySelector.tsx

@@ -6,6 +6,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandList,
 } from "@/components/ui/command"
 import {
   Popover,
@@ -203,63 +204,69 @@ export const GitHubRepositorySelector = ({
                   <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-full p-0 z-[999]">
+              <PopoverContent
+                className="w-[var(--radix-popover-trigger-width)] p-0 z-[999]"
+                align="start"
+              >
                 <Command shouldFilter={false}>
                   <CommandInput
                     value={searchValue}
                     onValueChange={setSearchValue}
                     placeholder="Search repositories..."
                   />
-                  <CommandEmpty className="text-sm text-slate-500 py-6">
-                    No repositories found.
-                  </CommandEmpty>
-                  <CommandGroup className="max-h-[400px] overflow-y-auto">
-                    {filteredOptions.map((option) => (
-                      <CommandItem
-                        key={option.value}
-                        onSelect={() => handleComboboxSelect(option.value)}
-                        className="cursor-pointer"
-                      >
-                        <div className="flex items-center space-x-2 w-full">
-                          {option.type === "repo" ? (
-                            <>
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  selectedRepository === option.value
-                                    ? "opacity-100"
-                                    : "opacity-0",
+                  <CommandList className="max-h-[400px] overflow-y-auto">
+                    <CommandEmpty className="text-sm text-slate-500 py-6 pl-4">
+                      No repositories found.
+                    </CommandEmpty>
+                    <CommandGroup>
+                      {filteredOptions.map((option) => (
+                        <CommandItem
+                          key={option.value}
+                          value={option.value}
+                          onSelect={() => handleComboboxSelect(option.value)}
+                          className="cursor-pointer hover:bg-slate-100"
+                        >
+                          <div className="flex items-center space-x-2 w-full">
+                            {option.type === "repo" ? (
+                              <>
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedRepository === option.value
+                                      ? "opacity-100"
+                                      : "opacity-0",
+                                  )}
+                                />
+                                <span>{option.label}</span>
+                                {option.isPrivate && (
+                                  <span className="text-xs text-muted-foreground">
+                                    (private)
+                                  </span>
+                                )}
+                              </>
+                            ) : (
+                              <>
+                                {option.icon === "plus" ? (
+                                  <Plus className="w-3 h-3 text-blue-600" />
+                                ) : (
+                                  <Minus className="w-3 h-3 text-red-600" />
                                 )}
-                              />
-                              <span>{option.label}</span>
-                              {option.isPrivate && (
-                                <span className="text-xs text-muted-foreground">
-                                  (private)
+                                <span
+                                  className={
+                                    option.icon === "plus"
+                                      ? "text-blue-600"
+                                      : "text-red-600"
+                                  }
+                                >
+                                  {option.label}
                                 </span>
-                              )}
-                            </>
-                          ) : (
-                            <>
-                              {option.icon === "plus" ? (
-                                <Plus className="w-3 h-3 text-blue-600" />
-                              ) : (
-                                <Minus className="w-3 h-3 text-red-600" />
-                              )}
-                              <span
-                                className={
-                                  option.icon === "plus"
-                                    ? "text-blue-600"
-                                    : "text-red-600"
-                                }
-                              >
-                                {option.label}
-                              </span>
-                            </>
-                          )}
-                        </div>
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
+                              </>
+                            )}
+                          </div>
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
                 </Command>
               </PopoverContent>
             </Popover>

package/src/components/dialogs/edit-package-details-dialog.tsx

@@ -133,8 +133,10 @@ export const EditPackageDetailsDialog = ({
       if (response.status !== 200)
         throw new Error("Failed to update package details")
 
-      const filesRes = await axios.post("/package_files/list", {
-        package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
+      const filesRes = await axios.get("/package_files/list", {
+        params: {
+          package_name_with_version: `${packageAuthor}/${formData.unscopedPackageName}`,
+        },
       })
       const packageFiles: string[] =
         filesRes.status === 200
@@ -194,10 +196,7 @@ export const EditPackageDetailsDialog = ({
     onSuccess: (data) => {
       onUpdate?.(data.description, data.website, data.license, data.defaultView)
       onOpenChange(false)
-      qc.invalidateQueries([
-        "packageFile",
-        { package_release_id: packageReleaseId },
-      ])
+      qc.invalidateQueries("packageFile")
       qc.invalidateQueries(["packageFiles", packageReleaseId])
       toast({
         title: "Package details updated",

package/src/components/dialogs/import-component-dialog.tsx

@@ -1,23 +1,30 @@
 import { createUseDialog } from "./create-use-dialog"
 import {
-  ComponentSearchResult,
-  ImportComponentDialog as RunframeImportComponentDialog,
+  ImportComponentDialog2 as RunframeImportComponentDialog,
+  type ImportComponentDialog2Props,
 } from "@tscircuit/runframe/runner"
 
+export type ImportComponentDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+} & Pick<
+  ImportComponentDialog2Props,
+  | "onTscircuitPackageSelected"
+  | "onJlcpcbComponentTsxLoaded"
+  | "onKicadStringSelected"
+  | "jlcpcbProxyRequestHeaders"
+>
+
 export const ImportComponentDialog = ({
   open,
   onOpenChange,
-  onComponentSelected,
-}: {
-  open: boolean
-  onOpenChange: (open: boolean) => any
-  onComponentSelected: (pkg: ComponentSearchResult) => any
-}) => {
+  ...rest
+}: ImportComponentDialogProps) => {
   return (
     <RunframeImportComponentDialog
       isOpen={open}
       onClose={() => onOpenChange(false)}
-      onImport={(data) => onComponentSelected(data)}
+      {...rest}
     />
   )
 }

package/src/components/dialogs/import-package-dialog.tsx

@@ -7,6 +7,7 @@ import { Button } from "../ui/button"
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog"
 import { Input } from "../ui/input"
 import { createUseDialog } from "./create-use-dialog"
+import { Link } from "wouter"
 
 export const ImportPackageDialog = ({
   open,
@@ -55,13 +56,13 @@ export const ImportPackageDialog = ({
                   className="flex flex-col sm:flex-row items-start sm:items-center my-2 text-sm w-full"
                   key={pkg.package_id}
                 >
-                  <a
+                  <Link
                     href={`/${pkg.name}`}
                     target="_blank"
                     className="text-blue-500 hover:underline cursor-pointer flex-shrink-0 mb-1 sm:mb-0 sm:mr-2"
                   >
                     {pkg.name}
-                  </a>
+                  </Link>
                   <div className="text-gray-500 flex-grow overflow-hidden text-ellipsis whitespace-nowrap mb-1 sm:mb-0">
                     {pkg.description}
                   </div>

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

@@ -0,0 +1,190 @@
+import { useState, useEffect, useMemo } from "react"
+import { Button } from "../ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "../ui/dialog"
+import { Input } from "../ui/input"
+import { Label } from "../ui/label"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select"
+import { createUseDialog } from "./create-use-dialog"
+import { useListUserOrgs } from "@/hooks/use-list-user-orgs"
+import { useGlobalStore } from "@/hooks/use-global-store"
+
+export const NewPackageSavePromptDialog = ({
+  open,
+  onOpenChange,
+  initialIsPrivate = false,
+  initialName = "",
+  onSave,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  initialIsPrivate?: boolean
+  initialName?: string
+  onSave: ({
+    name,
+    isPrivate,
+    orgId,
+  }: {
+    name?: string
+    isPrivate: boolean
+    orgId: string
+  }) => 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 fullPackageName = useMemo(() => {
+    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(
+        organizations.find((x) => x.is_personal_org)?.org_id ||
+          organizations[0].org_id,
+      )
+    }
+  }, [organizations, selectedOrgId])
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Creating new package</DialogTitle>
+          <DialogDescription>
+            Would you like to save this package?
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-1">
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Organization</Label>
+            <Select
+              value={selectedOrgId}
+              onValueChange={setSelectedOrgId}
+              disabled={orgsLoading}
+            >
+              <SelectTrigger className="w-full">
+                <div className="flex items-center gap-2 flex-1">
+                  {selectedOrgId && organizations ? (
+                    <span className="truncate">
+                      {organizations.find((org) => org.org_id === selectedOrgId)
+                        ?.display_name ||
+                        organizations.find(
+                          (org) => org.org_id === selectedOrgId,
+                        )?.name ||
+                        `Org ${selectedOrgId.slice(0, 8)}`}
+                    </span>
+                  ) : (
+                    <span className="text-slate-500">
+                      {orgsLoading
+                        ? "Loading organizations..."
+                        : "Select organization"}
+                    </span>
+                  )}
+                </div>
+              </SelectTrigger>
+              <SelectContent className="!z-[999]">
+                {organizations?.length === 0 ? (
+                  <div className="px-2 py-1.5 text-sm text-slate-500">
+                    No organizations found
+                  </div>
+                ) : (
+                  organizations?.map((org) => (
+                    <SelectItem
+                      key={org.org_id}
+                      value={org.org_id}
+                      className="cursor-pointer"
+                    >
+                      {org.display_name ||
+                        org.name ||
+                        `Org ${org.org_id.slice(0, 8)}`}
+                    </SelectItem>
+                  ))
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label className="text-sm font-medium">Package Name</Label>
+            <Input
+              value={packageName}
+              onChange={(e) => setPackageName(e.target.value)}
+              placeholder="Untitled Package"
+              className="w-full"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 sm:gap-4">
+              <div className="space-y-1 flex-1">
+                <Label className="text-sm font-medium">Visibility</Label>
+                <p className="text-xs text-slate-500">
+                  {isPrivate
+                    ? "Only you can view and use this package"
+                    : "Anyone can view and use your package"}
+                </p>
+              </div>
+              <Select
+                value={isPrivate ? "private" : "public"}
+                onValueChange={(value) => setIsPrivate(value === "private")}
+              >
+                <SelectTrigger className="w-full sm:w-32 sm:mt-2">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="!z-[999]">
+                  <SelectItem value="public" className="cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <span>Public</span>
+                    </div>
+                  </SelectItem>
+                  <SelectItem value="private" className="cursor-pointer">
+                    <div className="flex items-center gap-2">
+                      <span>Private</span>
+                    </div>
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onSave({
+                name: fullPackageName.trim(),
+                isPrivate,
+                orgId: selectedOrgId,
+              })
+              onOpenChange(false)
+            }}
+            disabled={!selectedOrgId || orgsLoading || !session}
+          >
+            Save
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const useNewPackageSavePromptDialog = createUseDialog(
+  NewPackageSavePromptDialog,
+)

package/src/components/organization/OrganizationCard.tsx

@@ -0,0 +1,206 @@
+import React from "react"
+import { Link } from "wouter"
+import {
+  Users,
+  Package,
+  Globe,
+  Lock,
+  MoreVertical,
+  Share2,
+  Settings,
+} from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+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"
+
+export interface OrganizationCardProps {
+  /** The organization data to display */
+  organization: PublicOrgSchema
+  /** Whether to show member count */
+  showMembers?: boolean
+  /** Whether to show statistics (packages, members) */
+  showStats?: boolean
+  /** Callback when the card is clicked */
+  onClick?: (org: PublicOrgSchema) => void
+  /** Custom class name for the card container */
+  className?: string
+  /** Whether to render the card with a link to the organization page */
+  withLink?: boolean
+  /** Custom render function for actions */
+  renderActions?: (org: PublicOrgSchema) => React.ReactNode
+}
+
+export const OrganizationCard: React.FC<OrganizationCardProps> = ({
+  organization,
+  showMembers = true,
+  showStats = true,
+  onClick,
+  className = "",
+  withLink = true,
+  renderActions,
+}) => {
+  const { copyToClipboard } = useCopyToClipboard()
+  const { session } = useGlobalStore()
+
+  const canManageOrg =
+    organization.owner_account_id === session?.account_id ||
+    organization.user_permissions?.can_manage_org
+
+  const handleCardClick = (e: React.MouseEvent) => {
+    if (onClick && !withLink) {
+      e.preventDefault()
+      onClick(organization)
+    }
+  }
+
+  const handleShareClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    const shareUrl = `${window.location.origin}/${organization.name}`
+    copyToClipboard(shareUrl)
+  }
+
+  const handleSettingsClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    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 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>
+        </div>
+
+        {/* Organization Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex justify-between items-start mb-1">
+            <div className="min-w-0 flex-1">
+              <h2 className="text-md font-semibold text-gray-900 truncate pr-8">
+                {organization.name}
+              </h2>
+            </div>
+
+            {/* Actions Dropdown */}
+            <div className="flex items-center gap-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <MoreVertical className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    className="text-xs cursor-pointer"
+                    onClick={handleShareClick}
+                  >
+                    <Share2 className="mr-2 h-3 w-3" />
+                    Share Organization
+                  </DropdownMenuItem>
+                  {canManageOrg && (
+                    <DropdownMenuItem
+                      className="text-xs cursor-pointer"
+                      onClick={handleSettingsClick}
+                    >
+                      <Settings className="mr-2 h-3 w-3" />
+                      Organization Settings
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+              {renderActions && renderActions(organization)}
+            </div>
+          </div>
+
+          {/* Statistics and Metadata */}
+          <div className="flex items-center gap-4 text-xs text-gray-500 mb-1">
+            {/* Visibility */}
+            <div className="flex items-center gap-1">
+              {!organization.is_personal_org ? (
+                <>
+                  <Globe className="h-3 w-3" />
+                  <span>Public</span>
+                </>
+              ) : (
+                <>
+                  <Lock className="h-3 w-3" />
+                  <span>Personal</span>
+                </>
+              )}
+            </div>
+
+            {/* Statistics */}
+            {showStats && (
+              <>
+                {showMembers && !organization.is_personal_org && (
+                  <div className="flex items-center gap-1">
+                    <Users className="h-3 w-3" />
+                    <span>{organization.member_count} members</span>
+                  </div>
+                )}
+                <div className="flex items-center gap-1">
+                  <Package className="h-3 w-3" />
+                  <span>{organization.package_count} packages</span>
+                </div>
+              </>
+            )}
+          </div>
+
+          {/* Created time */}
+          <div className="text-xs text-gray-400">
+            <span>Created {timeAgo(new Date(organization.created_at))}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+
+  if (withLink) {
+    return (
+      <Link
+        key={organization.org_id}
+        href={`/${organization.name}`}
+        className="block h-full"
+      >
+        {cardContent}
+      </Link>
+    )
+  }
+
+  return cardContent
+}

package/src/components/organization/OrganizationCardSkeleton.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+
+export const OrganizationCardSkeleton: React.FC = () => {
+  return (
+    <div className="border p-4 rounded-md animate-pulse">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-start gap-4">
+          {/* Organization Avatar skeleton */}
+          <div className="flex-shrink-0">
+            <div className="h-16 w-16 rounded-full bg-slate-200 border-2 border-gray-100"></div>
+          </div>
+
+          {/* Organization Info skeleton */}
+          <div className="flex-1 min-w-0">
+            <div className="flex justify-between items-start mb-1">
+              <div className="min-w-0 flex-1">
+                {/* Organization name */}
+                <div className="h-5 bg-slate-200 rounded w-3/4 sm:w-1/2 mb-1"></div>
+              </div>
+
+              {/* Actions dropdown skeleton */}
+              <div className="flex items-center gap-2">
+                <div className="h-6 w-6 bg-slate-200 rounded"></div>
+              </div>
+            </div>
+
+            {/* Statistics and Metadata skeleton */}
+            <div className="flex flex-wrap items-center gap-2 sm:gap-4 text-xs mb-1">
+              {/* Visibility */}
+              <div className="flex items-center gap-1">
+                <div className="h-3 w-3 bg-slate-200 rounded"></div>
+                <div className="h-3 bg-slate-200 rounded w-8 sm:w-12"></div>
+              </div>
+
+              {/* Members */}
+              <div className="flex items-center gap-1">
+                <div className="h-3 w-3 bg-slate-200 rounded"></div>
+                <div className="h-3 bg-slate-200 rounded w-12 sm:w-16"></div>
+              </div>
+
+              {/* Packages */}
+              <div className="flex items-center gap-1">
+                <div className="h-3 w-3 bg-slate-200 rounded"></div>
+                <div className="h-3 bg-slate-200 rounded w-14 sm:w-16"></div>
+              </div>
+            </div>
+
+            {/* Created time skeleton */}
+            <div className="h-3 bg-slate-200 rounded w-20 sm:w-24"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}