asasvirtuais 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+
+Database Schema
+```tsx
+const schema = {
+    users: {
+        readable: {
+            id: z.string(),
+            name: z.string(),
+            email: z.string().email(),
+        },
+        writable: {
+            name: z.string(),
+            email: z.string().email(),
+        }
+    }
+}
+```
+
+Fields
+```tsx
+import { fields as modules } from '@/packages/fields'
+const fields = {
+    // Only writable fields
+    users: {
+        name: modules.string,
+        email: modules.email,
+    }
+}
+```
+
+TODO: REST API Route
+```tsx
+import { route } from '@/packages/next'
+export default route<{ id: string }>(
+    async function(request, params) {
+        const [payload, { id }] = await Promise.all([request.json(), params])
+        return Response.json(
+            routeLogic(id, payload)
+        )
+    }
+)
+```
+
+CreateForm, UpdateForm and FiltersForm
+```tsx
+function MyFormGoesHere() {
+    return (
+        <FiltersForm table={} onSuccess={handleResult}>
+            {/* TODO: handle forms with function as child */}
+            {({loading, result, error}) => {
+                return (
+                    <Stack>
+                        <FiltersFields/>
+                        {/* TODO: SubmitButton with loading spinner */}
+                        <SubmitButton disabled={loading} loading={loading}>
+                            {loading ? <Spinner/> : 'Apply Filters'}
+                        </SubmitButton>
+                        {result.map(item => <ViewItem key={item.id} item={item} />)}
+                    </Stack>
+                )
+            }}
+        </FiltersForm>
+    )
+}
+```
+
+Using the DatabaseProvider
+```tsx
+const index = Object.fromEntries((await server.users.list({})).map(user => [user.id, user]))
+<DatabaseProvider users={index}>
+    {...}
+</DatabaseProvider>
+```
+
+Listing Query
+```tsx
+const array = await server.messages.list({query: { id }})
+```

package/actions/draw.ts

@@ -0,0 +1,110 @@
+'use server'
+import JSZip from 'jszip'
+import { uploadBuffer } from '@/packages/blob'
+
+const NOVELAI_API_URL = 'https://image.novelai.net/ai/generate-image'
+const NOVELAI_API_TOKEN = process.env.NOVELAI_API_TOKEN
+
+export interface DrawParams {
+  prompt?: string
+  orientation?: 'portrait' | 'landscape' | 'square'
+}
+
+const RESOLUTION_MAP = {
+  portrait: { width: 832, height: 1216 },
+  landscape: { width: 1216, height: 832 },
+  square: { width: 1024, height: 1024 }
+}
+
+export async function drawAction({ prompt, orientation = 'square' }: DrawParams) {
+  // Following the exact NovelAI API format from the website
+
+  const enhancedPrompt = `masterpiece, best quality, ${prompt}`
+
+  const { width = 1024, height = 1024 } = RESOLUTION_MAP[orientation]
+
+  const payload = {
+    input: enhancedPrompt,
+    model: 'nai-diffusion-4-5-full',
+    action: "generate",
+    parameters: {
+      params_version: 3,
+      width,
+      height,
+      scale: 5,
+      sampler: 'k_euler_ancestral',
+      steps: 28,
+      n_samples: 1,
+      ucPreset: 4,
+      qualityToggle: false,
+      autoSmea: false,
+      dynamic_thresholding: false,
+      controlnet_strength: 1,
+      legacy: false,
+      add_original_image: true,
+      cfg_rescale: 0,
+      noise_schedule: "karras",
+      legacy_v3_extend: false,
+      skip_cfg_above_sigma: 58,
+      use_coords: true,
+      normalize_reference_strength_multiple: true,
+      inpaintImg2ImgStrength: 1,
+      v4_prompt: {
+        caption: {
+          base_caption: enhancedPrompt,
+          char_captions: []
+        },
+        use_coords: true,
+        use_order: true
+      },
+      v4_negative_prompt: {
+        caption: {
+          base_caption: "lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry",
+          char_captions: []
+        },
+        legacy_uc: false
+      },
+      uc: "",
+      seed: Math.floor(Math.random() * 4294967295),
+      legacy_uc: false,
+      characterPrompts: [],
+      deliberate_euler_ancestral_bug: false,
+      prefer_brownian: true
+    }
+  }
+
+  const response = await fetch(NOVELAI_API_URL, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${NOVELAI_API_TOKEN}`,
+      'Content-Type': 'application/json',
+      'Accept': 'application/x-zip-compressed',
+    },
+    body: JSON.stringify(payload),
+  })
+
+  if (!response.ok) {
+    throw new Error(`NovelAI API error: ${response.statusText}`)
+  }
+
+  const zipBuffer = await response.arrayBuffer()
+  const zip = await JSZip.loadAsync(zipBuffer)
+
+  const imageFile = Object.values(zip.files)[0]
+  if (!imageFile) {
+    throw new Error('No image found in response')
+  }
+
+  // get binary buffer (node buffer / Uint8Array)
+  const bufferData = await imageFile.async('nodebuffer') as Uint8Array
+  const buffer = Buffer.from(bufferData)
+
+  // Use filename from zip entry if available, otherwise generate one
+  const filenameBase = `${Date.now()}-${Math.random().toString(36).slice(2, 9)}.png`
+  const filename = `novelai/${filenameBase}`
+
+  // Upload to configured bucket and return public URL
+  const publicUrl = await uploadBuffer(buffer, filename, 'image/png')
+  return publicUrl
+
+}

package/components/OAuthCard.tsx

@@ -0,0 +1,346 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { 
+    Card, 
+    VStack, 
+    HStack,
+    Heading, 
+    Text, 
+    Button, 
+    Badge,
+    Icon,
+    Box,
+    Code,
+    Collapsible,
+    IconButton
+} from '@chakra-ui/react'
+import { 
+    FaGoogle, 
+    FaFacebook, 
+    FaInstagram, 
+    FaChartLine,
+    FaLink,
+    FaUnlink,
+    FaSync,
+    FaCopy,
+    FaChevronDown,
+    FaChevronUp
+} from 'react-icons/fa'
+import { IconType } from 'react-icons'
+import { toaster } from '@/components/ui/toaster'
+import { clientTokenStorage } from '@/lib/client-token-storage'
+
+const iconMap: Record<string, IconType> = {
+    FaGoogle,
+    FaFacebook,
+    FaInstagram,
+    FaChartLine
+}
+
+interface Platform {
+    id: string
+    name: string
+    icon: string
+    description: string
+    scopes: string[]
+    color: string
+}
+
+interface OAuthCardProps {
+    platform: Platform
+    userEmail?: string
+}
+
+export default function OAuthCard({ platform, userEmail }: OAuthCardProps) {
+    const [isConnected, setIsConnected] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+    const [token, setToken] = useState<string | null>(null)
+    const [showToken, setShowToken] = useState(false)
+    const searchParams = useSearchParams()
+
+    const IconComponent = iconMap[platform.icon] || FaLink
+
+    useEffect(() => {
+        const success = searchParams.get('success')
+        const error = searchParams.get('error')
+        const connectedPlatform = searchParams.get('platform')
+        const encodedToken = searchParams.get('token')
+
+        if (success === 'true' && connectedPlatform === platform.id) {
+            setIsConnected(true)
+            
+            // Store token in IndexedDB if provided
+            if (encodedToken) {
+                try {
+                    const tokenData = JSON.parse(Buffer.from(encodedToken, 'base64').toString())
+                    clientTokenStorage.storeToken({
+                        id: platform.id,
+                        platform: platform.name,
+                        accessToken: tokenData.accessToken,
+                        expiresAt: tokenData.expiresAt,
+                        lastRefreshed: new Date().toISOString()
+                    })
+                    setToken(tokenData.accessToken)
+                } catch (err) {
+                    console.error('Failed to store token:', err)
+                }
+            }
+            
+            toaster.create({
+                title: 'Connected successfully',
+                description: `${platform.name} has been connected`,
+                type: 'success',
+                duration: 5000,
+            })
+        }
+
+        if (error && connectedPlatform === platform.id) {
+            toaster.create({
+                title: 'Connection failed',
+                description: `Failed to connect ${platform.name}: ${error}`,
+                type: 'error',
+                duration: 5000,
+            })
+        }
+    }, [searchParams, platform])
+
+    // Load token from IndexedDB on mount
+    useEffect(() => {
+        const loadToken = async () => {
+            try {
+                const storedToken = await clientTokenStorage.getToken(platform.id)
+                if (storedToken) {
+                    setToken(storedToken.accessToken)
+                    setIsConnected(true)
+                }
+            } catch (err) {
+                console.error('Failed to load token:', err)
+            }
+        }
+        loadToken()
+    }, [platform.id])
+
+    const handleConnect = async () => {
+        setIsLoading(true)
+        try {
+            const params = new URLSearchParams({
+                platform: platform.id,
+                scopes: platform.scopes.join(','),
+                userEmail: userEmail || ''
+            })
+
+            window.location.href = `/api/oauth/connect?${params.toString()}`
+        } catch (error) {
+            toaster.create({
+                title: 'Connection failed',
+                description: 'Unable to initiate OAuth connection',
+                type: 'error',
+                duration: 5000,
+            })
+            setIsLoading(false)
+        }
+    }
+
+    const handleDisconnect = async () => {
+        setIsLoading(true)
+        try {
+            const response = await fetch(`/api/oauth/disconnect`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ platform: platform.id })
+            })
+
+            if (!response.ok) throw new Error('Disconnection failed')
+
+            setIsConnected(false)
+            setToken(null)
+            
+            // Remove token from IndexedDB
+            await clientTokenStorage.removeToken(platform.id)
+            
+            toaster.create({
+                title: 'Disconnected',
+                description: `${platform.name} has been disconnected`,
+                type: 'success',
+                duration: 3000,
+            })
+        } catch (error) {
+            toaster.create({
+                title: 'Disconnection failed',
+                description: 'Unable to disconnect platform',
+                type: 'error',
+                duration: 5000,
+            })
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const handleRefreshToken = async () => {
+        setIsLoading(true)
+        try {
+            const response = await fetch(`/api/oauth/refresh`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ platform: platform.id })
+            })
+
+            if (!response.ok) throw new Error('Token refresh failed')
+
+            const data = await response.json()
+            setToken(data.accessToken)
+            
+            // Update token in IndexedDB
+            await clientTokenStorage.storeToken({
+                id: platform.id,
+                platform: platform.name,
+                accessToken: data.accessToken,
+                expiresAt: data.expiresIn ? 
+                    new Date(Date.now() + data.expiresIn * 1000).toISOString() : 
+                    undefined,
+                lastRefreshed: new Date().toISOString()
+            })
+            
+            toaster.create({
+                title: 'Token refreshed',
+                description: 'Your access token has been refreshed',
+                type: 'success',
+                duration: 3000,
+            })
+        } catch (error) {
+            toaster.create({
+                title: 'Refresh failed',
+                description: 'Unable to refresh token',
+                type: 'error',
+                duration: 5000,
+            })
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    const copyToken = () => {
+        if (token) {
+            navigator.clipboard.writeText(token)
+            toaster.create({
+                title: 'Copied!',
+                description: 'Token copied to clipboard',
+                type: 'success',
+                duration: 2000,
+            })
+        }
+    }
+
+    return (
+        <Card.Root variant="outline" size="lg">
+            <Card.Header>
+                <HStack justify="space-between">
+                    <HStack gap={3}>
+                        <Icon as={IconComponent} boxSize={6} color={platform.color} />
+                        <Heading size="md">{platform.name}</Heading>
+                    </HStack>
+                    <Badge colorScheme={isConnected ? 'green' : 'gray'}>
+                        {isConnected ? 'Connected' : 'Not Connected'}
+                    </Badge>
+                </HStack>
+            </Card.Header>
+            
+            <Card.Body>
+                <VStack align="stretch" gap={4}>
+                    <Text color="fg.muted" fontSize="sm">
+                        {platform.description}
+                    </Text>
+
+                    <Box>
+                        <Text fontSize="sm" fontWeight="medium" mb={1}>Scopes:</Text>
+                        <Text fontSize="xs" color="fg.muted" lineClamp={2}>
+                            {platform.scopes.join(', ')}
+                        </Text>
+                    </Box>
+
+                    <HStack gap={2}>
+                        {!isConnected ? (
+                            <Button
+                                colorScheme="blue"
+                                onClick={handleConnect}
+                                loading={isLoading}
+                                loadingText="Connecting..."
+                                size="sm"
+                                width="full"
+                            >
+                                <FaLink />
+                                Connect
+                            </Button>
+                        ) : (
+                            <>
+                                <Button
+                                    variant="outline"
+                                    onClick={handleRefreshToken}
+                                    loading={isLoading}
+                                    size="sm"
+                                    flex={1}
+                                >
+                                    <FaSync />
+                                    Refresh
+                                </Button>
+                                <Button
+                                    variant="outline"
+                                    colorScheme="red"
+                                    onClick={handleDisconnect}
+                                    loading={isLoading}
+                                    size="sm"
+                                    flex={1}
+                                >
+                                    <FaUnlink />
+                                    Disconnect
+                                </Button>
+                            </>
+                        )}
+                    </HStack>
+
+                    {isConnected && token && (
+                        <Box>
+                            <HStack justify="space-between" mb={2}>
+                                <Text fontSize="sm" fontWeight="medium">Access Token:</Text>
+                                <HStack gap={1}>
+                                    <IconButton
+                                        aria-label="Copy token"
+                                        size="xs"
+                                        variant="ghost"
+                                        onClick={copyToken}
+                                    >
+                                        <FaCopy />
+                                    </IconButton>
+                                    <IconButton
+                                        aria-label="Toggle token visibility"
+                                        size="xs"
+                                        variant="ghost"
+                                        onClick={() => setShowToken(!showToken)}
+                                    >
+                                        {showToken ? <FaChevronUp /> : <FaChevronDown />}
+                                    </IconButton>
+                                </HStack>
+                            </HStack>
+                            <Collapsible.Root open={showToken}>
+                                <Collapsible.Content>
+                                    <Code 
+                                        p={3} 
+                                        borderRadius="md" 
+                                        fontSize="xs" 
+                                        display="block"
+                                        overflowX="auto"
+                                        whiteSpace="pre"
+                                    >
+                                        {token}
+                                    </Code>
+                                </Collapsible.Content>
+                            </Collapsible.Root>
+                        </Box>
+                    )}
+                </VStack>
+            </Card.Body>
+        </Card.Root>
+    )
+}

package/components/icons.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { forwardRef } from 'react'
+
+export const AirtableIcon = forwardRef<SVGSVGElement>((props, ref) => (
+    <svg ref={ref} viewBox='0 0 20 16' xmlns='http://www.w3.org/2000/svg' {...props}><path d='m8.50297526.20100591-7.09941044 2.93764625c-.39480037.16338794-.39071029.72415946.00656565.88162754l7.12911731 2.82710645c.62642805.24841855 1.32400201.24841855 1.95032242 0l7.129225-2.82710645c.3971683-.15746808.401366-.7182396.006458-.88162754l-7.0993028-2.93764625c-.6477395-.26800788-1.37534322-.26800788-2.02297514 0' fill='#ffbf00'/><path d='m10.1469076 8.39120841v7.06249209c0 .3359247.3387232.565938.6509686.4421592l7.9440119-3.0834899c.1813628-.0718993.300298-.2471269.300298-.4421592v-7.06249207c0-.33592474-.3387232-.56593793-.6509685-.44215918l-7.944012 3.08348988c-.1812551.07189931-.300298.24712699-.300298.44215918' fill='#26b5f8'/><path d='m8.29192714 8.75561302-2.35760833 1.13833392-.23937732.11570616-4.97676647 2.3846244c-.31547434.152194-.71813197-.0777115-.71813197-.4281668v-6.62872832c0-.12679249.06501075-.23625595.15219404-.31870335.03638019-.03648782.07760389-.06651762.1204421-.09030467.11893522-.07136113.28856591-.09041229.43279506-.03336644l7.54684367 2.99017147c.38360647.15219408.41374392.68971668.03960922.87043363' fill='#ed3049'/><path d='m8.29192714 8.75561302-2.35760833 1.13833392-5.78208172-4.87526791c.03638019-.03648782.07760389-.06651762.1204421-.09030467.11893522-.07136113.28856591-.09041229.43279506-.03336644l7.54684367 2.99017147c.38360647.15219408.41374392.68971668.03960922.87043363' fillOpacity='.25'/></svg>
+))
+
+export const LinkedInIcon = forwardRef<SVGSVGElement>((props, ref) => (
+    <svg ref={ref} height='72' viewBox='0 0 72 72' width='72' xmlns='http://www.w3.org/2000/svg' {...props}><g fill='none' fillRule='evenodd'><path d='M8,72 L64,72 C68.418278,72 72,68.418278 72,64 L72,8 C72,3.581722 68.418278,-8.11624501e-16 64,0 L8,0 C3.581722,8.11624501e-16 -5.41083001e-16,3.581722 0,8 L0,64 C5.41083001e-16,68.418278 3.581722,72 8,72 Z' fill='#007EBB'/><path d='M62,62 L51.315625,62 L51.315625,43.8021149 C51.315625,38.8127542 49.4197917,36.0245323 45.4707031,36.0245323 C41.1746094,36.0245323 38.9300781,38.9261103 38.9300781,43.8021149 L38.9300781,62 L28.6333333,62 L28.6333333,27.3333333 L38.9300781,27.3333333 L38.9300781,32.0029283 C38.9300781,32.0029283 42.0260417,26.2742151 49.3825521,26.2742151 C56.7356771,26.2742151 62,30.7644705 62,40.051212 L62,62 Z M16.349349,22.7940133 C12.8420573,22.7940133 10,19.9296567 10,16.3970067 C10,12.8643566 12.8420573,10 16.349349,10 C19.8566406,10 22.6970052,12.8643566 22.6970052,16.3970067 C22.6970052,19.9296567 19.8566406,22.7940133 16.349349,22.7940133 Z M11.0325521,62 L21.769401,62 L21.769401,27.3333333 L11.0325521,27.3333333 L11.0325521,62 Z' fill='#FFF'/></g></svg>
+))

package/components/markdown.tsx

@@ -0,0 +1,18 @@
+'use client'
+import ReactMarkdown from 'react-markdown'
+import gfm from 'remark-gfm'
+import breaks from 'remark-breaks'
+import { Link, Text } from '@chakra-ui/react'
+
+export default function Markdown({ children } : {children: string}) {
+    return (
+        <ReactMarkdown
+            components={{
+                a: props => <Link target='_blank' {...props}/>,
+                // @ts-expect-error
+                em: props => <Text as='i' fontStyle='italic' {...props} />,
+            }}
+            remarkPlugins={[breaks, gfm]}
+        >{children}</ReactMarkdown>
+    )
+}

package/components/stack/list.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { forwardRef } from 'react' 
+import { List, Stack, HStack, VStack } from '@chakra-ui/react'
+import useForwardAs from '@/hooks/useForwardAs'
+
+export type StackListProps = List.RootProps
+
+export const StackList = forwardRef<typeof Stack, StackListProps>(({ as, ...props }, ref) => (
+    <List.Root
+        // @ts-expect-error
+        ref={ref}
+        as={useForwardAs(Stack, as)} {...props} />
+))
+
+export const HList = forwardRef<typeof HStack, StackListProps>(({ as, ...props }, ref) => (
+    <StackList ref={ref} as={useForwardAs(HStack, as)} {...props} />
+))
+
+export const VList = forwardRef<typeof HStack, StackListProps>(({ as, ...props }, ref) => (
+    <StackList ref={ref} as={useForwardAs(VStack, as)} {...props} />
+))

package/components/stack/menu.tsx

@@ -0,0 +1,40 @@
+'use client'
+import { ElementType, forwardRef } from 'react'
+import { StackList, VList, HList, StackListProps } from '@/components/stack/list'
+import useForwardAs from '@/hooks/useForwardAs'
+
+export type StackMenuProps = StackListProps
+
+export const StackMenu = forwardRef<typeof StackList, StackMenuProps>(({ children, as, ...props }, ref) => (
+    <StackList
+        // @ts-expect-error
+        ref={ref}
+        as={as ? useForwardAs(as, 'menu') : 'menu'}
+        // List Defaults
+        p={0} m={0} listStyleType='none'
+        // Alignment
+        justifyContent='space-between'
+        {...props}>{children}</StackList>
+))
+
+export const HMenu = forwardRef<typeof HList, StackMenuProps>(({ children, ...props }, ref) => (
+    <StackMenu ref={ref} as={HList} {...props}>{children}</StackMenu>
+))
+
+export const VMenu = forwardRef<typeof VList, StackMenuProps>(({ children, ...props }, ref) => (
+    <StackMenu ref={ref} as={VList} {...props}>{children}</StackMenu>
+))
+
+// Menu Item, keep it here in this file
+import { Button, ButtonProps, ListItem } from '@chakra-ui/react'
+
+export type MenuItemProps = ButtonProps
+export const MenuItem = forwardRef<ElementType, MenuItemProps>(({ children, ...props }, ref) => (
+    <ListItem
+        // @ts-expect-error
+        ref={ref}>
+            <Button size='sm' variant='ghost' {...props}>
+                {children}
+            </Button>
+    </ListItem>
+))

package/components/stack/nav.tsx

@@ -0,0 +1,39 @@
+'use client'
+import { forwardRef } from 'react'
+import { StackList, VList, HList, StackListProps } from '@/components/stack/list'
+import useForwardAs from '@/hooks/useForwardAs'
+
+export type StackNavProps = StackListProps
+
+export const StackNav = forwardRef<typeof StackList, StackListProps>(({ children, as, ...props }, ref) => (
+    <StackList
+        // @ts-expect-error
+        ref={ref}
+        as={as ? useForwardAs(as, 'nav') : 'nav'}
+        // List Defaults
+        p={0} m={0} listStyleType='none'
+        // Alignment
+        justifyContent='space-between'
+        {...props}>{children}</StackList>
+))
+
+export const HNav = forwardRef<typeof HList, StackListProps>(({ children, ...props }, ref) => (
+    <StackNav ref={ref} as={HList} {...props}>{children}</StackNav>
+))
+
+export const VNav = forwardRef<typeof VList, StackListProps>(({ children, ...props }, ref) => (
+    <StackNav ref={ref} as={VList} {...props}>{children}</StackNav>
+))
+
+import { ListItem, ListItemProps, Link, LinkProps } from '@chakra-ui/react'
+
+export type NavItemProps = LinkProps
+
+export const NavItem = forwardRef<typeof Link, NavItemProps>(({ children, as, ...props }, ref) => (
+    <ListItem
+        // @ts-expect-error
+        ref={ref}
+        {...props}>
+            <Link {...props}>{children}</Link>
+    </ListItem>
+))