@env-hopper/frontend-core 2.0.1-alpha

package/src/api/infra/createQueryClient.ts

@@ -0,0 +1,25 @@
+import { QueryClient } from '@tanstack/react-query'
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import type { TRPCClient } from '@trpc/client'
+
+export interface CreateQueryParams {
+  trpcClient: TRPCClient<TRPCRouter>
+}
+
+export function createQueryClient({ trpcClient }: CreateQueryParams) {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        gcTime: 1000 * 60 * 60 * 24 * 7, // 7 days
+        meta: {
+          trpcClient,
+        },
+      },
+      mutations: {
+        meta: {
+          trpcClient,
+        },
+      },
+    },
+  })
+}

package/src/api/infra/trpc.ts

@@ -0,0 +1,6 @@
+import { createTRPCContext } from '@trpc/tanstack-react-query'
+import type { TRPCRouter } from '@env-hopper/backend-core'
+
+const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<TRPCRouter>()
+
+export { TRPCProvider, useTRPC, useTRPCClient }

package/src/api/unsorted/indexDataFetcher.ts

@@ -0,0 +1,46 @@
+import type { QueryClient, QueryKey } from '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+import type { BootstrapConfigData, TRPCRouter } from '@env-hopper/backend-core'
+import type { EhDb } from '~/userDb/EhDb'
+import { dbCacheDbKeys } from '~/userDb/EhDb'
+
+export const queryKey: QueryKey = ['bootstrapConfig']
+
+export interface IndexDataFetcherParams {
+  trpcClient: TRPCClient<TRPCRouter>
+  queryClient: QueryClient
+  db: EhDb
+}
+
+export function indexDataFetcher({
+  queryClient,
+  trpcClient,
+  db,
+}: IndexDataFetcherParams): () => Promise<BootstrapConfigData> {
+  return async () => {
+    try {
+      const cached = await db.bootstrap.get(dbCacheDbKeys.Bootstrap)
+      if (cached) {
+        void syncFromNetwork({ queryClient, trpcClient, db })
+        return cached
+      }
+    } catch (e) {
+      console.log('Error fetching cached index data:', e)
+    }
+
+    return await syncFromNetwork({ queryClient, trpcClient, db })
+  }
+}
+
+async function syncFromNetwork({
+  queryClient,
+  trpcClient,
+  db,
+}: IndexDataFetcherParams): Promise<BootstrapConfigData> {
+  const fresh: BootstrapConfigData = await trpcClient.bootstrap.query()
+
+  await db.bootstrap.put(fresh, dbCacheDbKeys.Bootstrap)
+  queryClient.setQueryData([queryKey], fresh)
+
+  return fresh
+}

package/src/appPropsFactory.ts

@@ -0,0 +1,35 @@
+import { createBrowserHistory } from '@tanstack/react-router'
+import { createTRPCClient, httpBatchLink } from '@trpc/client'
+import { PageUrlJumpPlugin } from './plugins/builtin/pageUrl/pageUrlJumpPlugin'
+import { EhDb } from './userDb/EhDb'
+import type { AppProps } from './App'
+import type { EhPlugin } from './modules/pluginCore/types'
+import type { TRPCRouter } from '@env-hopper/backend-core'
+import { createEhRouter } from '~/util/createEhRouter'
+import { createQueryClient } from '~/api/infra/createQueryClient'
+
+// registerSW();
+export function appPropsFactory(): AppProps {
+  const trpcClient = createTRPCClient<TRPCRouter>({
+    links: [
+      httpBatchLink({
+        url: 'http://localhost:4000/trpc',
+      }),
+    ],
+  })
+
+  const db = new EhDb()
+  const queryClient = createQueryClient({ trpcClient })
+  const plugins: Array<EhPlugin> = [new PageUrlJumpPlugin()]
+  const router = createEhRouter({
+    history: createBrowserHistory(),
+    context: {
+      queryClient,
+      trpcClient,
+      db,
+      plugins,
+    },
+  })
+
+  return { router, queryClient, trpcClient, db }
+}

package/src/assets/env-hopper-logo.svg

@@ -0,0 +1,114 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 375.9 244.9" style="enable-background:new 0 0 375.9 244.9;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.05;}
+	.st1{fill:#A78256;}
+	.st2{fill:#8BC143;}
+	.st3{fill:#25572C;}
+	.st4{fill:#367F3D;}
+	.st5{clip-path:url(#SVGID_00000004530938209597365300000002644174144295954342_);fill:#FFFFFF;}
+	.st6{fill:#D5DA38;}
+	.st7{fill:#DCB78B;}
+	.st8{fill:#A68356;}
+	.st9{fill:none;}
+	.st10{fill:#296A35;}
+	.st11{fill:#24572C;}
+	.st12{fill:#56B347;}
+	.st13{fill:#2E753A;}
+	.st14{fill:#FFFFFF;}
+	.st15{fill:#78983D;}
+	.st16{fill:#38803E;}
+</style>
+<g id="Layer_4">
+	<path class="st0" d="M348.07,224.58c0,13.58-76.31,16.29-168.48,13.91c-85.51-2.21-167.67-12.7-167.67-26.28
+		c0-13.58,75.86-16.6,168-13.55C251.54,201.04,348.07,211,348.07,224.58z"/>
+</g>
+<g id="Layer_5">
+	<path class="st1" d="M191.33,63.44c-4.71-1.27-9.7,3.77-11.78,5.44c-22.75,18.26-65.08,108.22-68.32,110.8
+		c-2.65,2.11-12.55-4.77-26.06,6.99c-2.28,1.99,17.71-3.94,27.35,4.79c4.31,3.9,22.67-31.3,43.4-74.21
+		c7.89-16.33,16.66-28.67,29.37-41.6c3.95-4.02,9.74-6.99,9.13-9.83C194.07,64.16,191.67,63.53,191.33,63.44z"/>
+	<path class="st2" d="M315.5,185.71c19.53-4.58,25.95-33.16,23.08-54.88c-3.64-27.61-17.56-34.28-34.67-33.9
+		c-19.88,0.44-44.11,22.97-32.88,51.46C277.76,165.5,296.2,190.24,315.5,185.71z"/>
+	<path class="st3" d="M317.37,92.95c-1.19,0.17-6.89-0.13-6.55-0.52c16.19-18.5,39.73-46.86,55.69-73.93
+		c0.14-0.24,1.75,7.27-24.68,43.19C341.84,61.7,317.94,92.87,317.37,92.95z"/>
+	<path class="st4" d="M295.82,101.2c-2.01-0.96,43.56-73.4,51-101.15c0.27-1.02-0.95,15.86-12.52,38.58
+		C315.28,76,306.48,92.6,301.71,101.2C301.06,102.37,297.81,102.14,295.82,101.2z"/>
+	<g>
+		<defs>
+			<path id="SVGID_1_" d="M337.53,110.9c4.31-1.33,15.13,4.96,15.29,15.68c0.13,8.83-8.71,15.46-11.6,15.57
+				c-1.01,0.04,0.03-4.88-0.72-15.7C340.01,119.23,335.7,111.46,337.53,110.9z"/>
+		</defs>
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;fill:#8BC143;"/>
+		<clipPath id="SVGID_00000141425935757089766400000014964260461132888230_">
+			<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+		</clipPath>
+		
+			<circle style="clip-path:url(#SVGID_00000141425935757089766400000014964260461132888230_);fill:#FFFFFF;" cx="337.66" cy="125.78" r="12.55"/>
+	</g>
+	<path class="st4" d="M72,148.17c12.3-16.8,133.34-31.43,144.28-31.28c0.4,0.01,0.69,4.28,22.94,13.64
+		c2.33,0.98,10.66,4.72,16.04,13.86c2.43,4.12,4.42,10.67,4.47,15.71c0.01,1.33-56.06,5.28-103.07,4.71
+		C96.02,164.07,68.08,153.52,72,148.17z"/>
+	<path class="st6" d="M113.86,186.55c-5.06-0.46-27.13-8.1-29.26-21.47c-0.61-3.81,0.35-6.85,0.8-8.08
+		c0.59-1.6,23.41,9.72,87.9,8.39c64.06-1.32,85.65-5.83,86.01-5.03C261.99,166.36,217.6,195.93,113.86,186.55z"/>
+	<path class="st2" d="M223.03,117.14c0.76-3.5,10.69-5.08,18.2-5.08c8.44,0,13.29-0.15,19.65-0.89c12.74-1.48,18.97-6.96,16.62-4.53
+		c-9.94,10.29-9.77,18.79-8.5,32.04c1.43,14.96,14.3,27.99,13.47,28.38c-4.47,2.09-10.28,6.04-15.14,4.32
+		c-9.04-3.19-4.77-21.85-13.13-32.7C246.81,129.06,222,121.89,223.03,117.14z"/>
+	<path d="M282.17,152.19c-0.5,4.28,0.64,14.39,6.17,20.99c6.21,7.43,5.99,7.21,12.31,9.99c0,0,0.01,0,0.01,0
+		c0.38-0.14-16.24-8.73-16.42-31.1C284.23,150.94,282.22,151.73,282.17,152.19z"/>
+	<path class="st7" d="M45.22,202.22c6.4-10.37,14.58-24.72,24.79-41.13c0,0,21.09-33.2,24.52-37.55c0,0,3.69-5.56,18.22-23.3
+		c0,0,2.49-3.04,9.72-9.39c3.36-2.95,4.91-4.03,7.18-4.42c2.76-0.47,6.2,0.15,8.83,1.99c0.61,0.42,1.07,0.8,1.1,0.88
+		c1.06,2.57,1.99,6.55-1.88,7.07c-2.91,0.39-4.38-0.83-6.43-0.18c-7.92,2.5-29.4,29.72-54.03,76.49
+		c-3.25,6.17-19.82,35.14-27.33,40.86c-0.17,0.13-0.66,0.66-3.12-0.63c-13.53-7.14-29.12-3.25-29.21-3.95
+		c-0.06-0.49,10.19-7.43,18.55-6.93C37.99,202.14,45.53,202.14,45.22,202.22z"/>
+	<path class="st7" d="M233.42,187.34c-2.31-1.13-4.34,0.53-5.99,1.85c0,0-6.49,4.43-3.04,9.36c6.54,9.33,19.97,19.12,50.58,34.48
+		c6.93,3.48,15.18,1.56,14.55,0.75c-3.2-4.11-39.95-19.08-51.05-29.73c-3.94-3.78-7.05-6.27-6.02-8.78
+		c0.66-1.61,2.83-2.06,3.31-3.64C236.28,189.94,235.32,188.95,233.42,187.34z"/>
+	<path class="st8" d="M263.01,192.63c-1.5-1.35-2.61-2.35-6.44,2.21c-2.22,2.64-3.78,5.85-3.24,8.5
+		c0.99,4.86,21.45,8.27,38.69,13.14c37.25,10.53,37.8,2.69,36.99,1.8c-0.24-0.27-25.47-3.5-49.47-9.42
+		c-14.27-3.52-18.08-5.91-17.15-10.56C262.86,195.91,266,195.32,263.01,192.63z"/>
+	<path class="st9" d="M71.78,148.17c2.54-10.82,106.81-31.18,144.37-31.18c0.44,0,0.86,0.75,1.89,1.97c2.9,3.43,6.53,4.52,7.57,4.99
+		c6.46,2.94,19.64,8.94,26.12,15.55c3.31,3.37,7.27,9.35,8.34,20.49C235.66,168.76,67.45,166.6,71.78,148.17z"/>
+	<path class="st10" d="M230.47,186.52c-2.04-2.62,11.48-19.13,25.95-22.56c1.88-0.45,5.96-0.11,7.34,1.93
+		c2.6,3.84-1.44,12.39-10.1,17.84c-8.87,5.59-16.41,9.16-17.23,8.33c-1.01-1.01-0.23-2.89-1.77-4.47
+		C233.1,185.98,231.17,187.41,230.47,186.52z"/>
+	<path class="st11" d="M264.81,194.71c-1.66-0.94-1.79-3.5-3.48-3.59c-2.06-0.11-3.41,3.84-4.91,3.48c-0.82-0.2-1.3-1.54-1.33-2.37
+		c-0.22-6.52,3.26-20.26,6.63-23.47c2.17-2.06,3.76,2.9,8.12,3.09c3.75,0.17,11.88-5.24,13.86-3.59c2.65,2.21-2.86,8.62-3.48,9.72
+		C275.33,186.72,265.69,195.21,264.81,194.71z"/>
+	<path class="st12" d="M228.92,187.2c1.07-0.44-0.94-5.63,7.67-13.25c6.51-5.76,10.78-6.24,11.82-8.56
+		c0.72-1.61-20.78-17.36-41.36-21.92c-11.26-2.5-61.01-55.21-63-56.21c-1.79-0.9-13.79,7.06-13.42,10.21
+		c0.35,2.92,13.91,9.77,35.89,27C183.86,138.07,211.31,194.44,228.92,187.2z"/>
+	<path class="st13" d="M199.73,65.27c0.65-0.11,36.98,40.09,41.89,43.44c0.85,0.58-14.58,2.12-14.94,1.47
+		c-7.27-12.72-38.41-29.6-38.98-35.91C187.4,71.04,196.38,65.84,199.73,65.27z"/>
+	<path class="st14" d="M313.18,126.49c0,8.27-6.71,14.98-14.98,14.98c-5.19,0-8.11-3.24-8.94-3.95c-0.44-0.38-6.18-4.4-6.04-11.03
+		c0.15-7.14,6.13-14.98,14.98-14.98C306.47,111.5,313.18,118.21,313.18,126.49z"/>
+	<path d="M339.38,121.61c-0.26-1.14,6.55,3.28,6.55,8.28c0,6.29-4.95,9.39-5.12,6.37C340.64,133.11,341.42,130.66,339.38,121.61z"/>
+	<path d="M277.61,148.06c0.1-0.43,2.35,1.42,5.98,1.9c3.27,0.43,5.79-0.08,5.77,0.07c-0.07,0.54-2.51,2.97-6.17,2.54
+		C278.34,152,277.5,148.53,277.61,148.06z"/>
+	<circle cx="296.71" cy="131.43" r="8.53"/>
+	<path d="M290.02,104.95c-4.8,1.75-12.41,8.08-11.71,9.17c1.25,1.95,17.54-5.95,17.02-8.23
+		C295.06,104.68,293.99,103.51,290.02,104.95z"/>
+	<circle class="st14" cx="297.94" cy="127.11" r="2.21"/>
+	<path class="st15" d="M92.76,178.11c-0.22-0.28-0.39-8.02,4-10.96c0.11-0.07,3.48-0.08,3.64-0.03c0.39,0.11-3.98,5.51-4.72,12.58
+		C95.63,180.22,92.86,178.23,92.76,178.11z"/>
+	<path class="st15" d="M113.67,185.95c-0.22-0.28-1.35-14.46,3.87-15.24c0.97-0.14,3.13-0.09,2.97,0.01
+		c-0.35,0.21-3.53,4.43-3.45,15.73C117.06,186.98,113.77,186.07,113.67,185.95z"/>
+	<path class="st15" d="M138.4,188.86c-0.22-0.28-3.66-13.37,0.43-15.95c0.83-0.52,3.35-0.99,3.18-0.89
+		c-0.35,0.21-0.78,5.37-0.7,16.67C141.32,189.22,138.49,188.98,138.4,188.86z"/>
+	<path class="st15" d="M161.4,188.79c-0.35-0.04-5.78-13.76-1.69-16.34c0.8-0.51,3.18-1.24,3.19-1.2c0,0-0.01,0.01-0.01,0.01
+		c-0.23,0.15-0.44,1.64-0.63,3.7c-0.11,1.24-0.05,3.87,0.07,4.9c0.77,6.19,2.5,8.5,2.15,8.69
+		C163.62,188.99,162.35,188.9,161.4,188.79z"/>
+	<path class="st15" d="M180.03,187.6c-0.35-0.04-6.32-13.45-2.23-16.03c0.8-0.51,3.18-1.24,3.19-1.2c0,0-0.5,0.13-0.5,0.13
+		c-0.23,0.15-0.32,1.46-0.5,3.52c-0.11,1.24,0.31,3.92,0.44,4.95c0.77,6.19,2.64,8.55,2.38,8.57
+		C181.95,187.6,180.97,187.71,180.03,187.6z"/>
+	<path class="st15" d="M198.4,185.28c-0.35-0.04-8.12-13.29-4.02-15.87c0.8-0.51,2.21-1.68,2.22-1.64c0,0,0.55,0,0.55,0
+		c-0.23,0.15,0.04,3.79,0.14,4.39c0.22,1.23,0.93,4.64,1.74,6.57c2.39,5.76,3.39,6.47,3.13,6.49
+		C201.31,185.29,199.35,185.39,198.4,185.28z"/>
+</g>
+<g id="Layer_3">
+	<path class="st16" d="M277.43,106.34c1.1-0.86-7.15,2.43-7.98,3.2c-7.37,6.87-7.84,21.06-5.39,31.28
+		c3.23,13.47,9.18,28.71,14.36,28.52c0.93-0.03,2.76-0.77,3.31-1.63c0.25-0.39-11.13-8.17-14.05-34.12
+		C265.92,117.99,274.28,108.78,277.43,106.34z"/>
+</g>
+</svg>

package/src/components/ThemeSwitcher.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+
+import { Button } from '~/components/ui/button'
+
+export function ThemeSwitcher() {
+  const { setTheme, theme } = useTheme()
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => (theme === 'dark' ? setTheme('light') : setTheme('dark'))}
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}

package/src/components/theme-provider.tsx

@@ -0,0 +1,8 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import type { ThemeProviderProps } from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+import { cn } from '~/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+
+import { cn } from '~/lib/utils'
+
+const Breadcrumb = ({
+  ref,
+  ...props
+}: React.ComponentPropsWithoutRef<'nav'> & {
+  separator?: React.ComponentType<{ className?: string }>
+} & { ref?: React.RefObject<HTMLElement | null> }) => (
+  <nav ref={ref} aria-label="breadcrumb" {...props} />
+)
+Breadcrumb.displayName = 'Breadcrumb'
+
+const BreadcrumbList = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'ol'> & {
+  ref?: React.RefObject<HTMLOListElement | null>
+}) => (
+  <ol
+    ref={ref}
+    className={cn(
+      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+      className,
+    )}
+    {...props}
+  />
+)
+BreadcrumbList.displayName = 'BreadcrumbList'
+
+const BreadcrumbItem = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'li'> & {
+  ref?: React.RefObject<HTMLLIElement | null>
+}) => (
+  <li
+    ref={ref}
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
+)
+BreadcrumbItem.displayName = 'BreadcrumbItem'
+
+const BreadcrumbLink = ({
+  ref,
+  asChild,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'a'> & {
+  asChild?: boolean
+} & { ref?: React.RefObject<HTMLAnchorElement | null> }) => {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  )
+}
+BreadcrumbLink.displayName = 'BreadcrumbLink'
+
+const BreadcrumbPage = ({
+  ref,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<'span'> & {
+  ref?: React.RefObject<HTMLSpanElement | null>
+}) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn('font-normal text-foreground', className)}
+    {...props}
+  />
+)
+BreadcrumbPage.displayName = 'BreadcrumbPage'
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = ({
+  ref,
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps & { ref?: React.RefObject<HTMLButtonElement | null> }) => {
+  const Comp = asChild ? Slot : 'button'
+  return (
+    <Comp
+      className={buttonVariants({ variant, size, className })}
+      ref={ref}
+      {...props}
+    />
+  )
+}
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

package/src/components/ui/card.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+
+import { cn } from '~/lib/utils'
+
+const Card = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>
+}) => (
+  <div
+    ref={ref}
+    className={cn(
+      'rounded-lg border bg-card text-card-foreground shadow-sm',
+      className,
+    )}
+    {...props}
+  />
+)
+Card.displayName = 'Card'
+
+const CardHeader = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>
+}) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5 p-6', className)}
+    {...props}
+  />
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>
+}) => (
+  <div
+    ref={ref}
+    className={cn(
+      'text-2xl font-semibold leading-none tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>
+}) => (
+  <div
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>
+}) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+CardContent.displayName = 'CardContent'
+
+const CardFooter = ({
+  ref,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  ref?: React.RefObject<HTMLDivElement | null>
+}) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center p-6 pt-0', className)}
+    {...props}
+  />
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }