spiracha 1.5.0 → 2.1.0

package/apps/ui/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+import type * as React from 'react';
+
+import { cn } from '#/lib/utils.ts';
+
+function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+    return (
+        <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative', className)} {...props}>
+            <ScrollAreaPrimitive.Viewport
+                data-slot="scroll-area-viewport"
+                className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"
+            >
+                {children}
+            </ScrollAreaPrimitive.Viewport>
+            <ScrollBar />
+            <ScrollAreaPrimitive.Corner />
+        </ScrollAreaPrimitive.Root>
+    );
+}
+
+function ScrollBar({
+    className,
+    orientation = 'vertical',
+    ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+    return (
+        <ScrollAreaPrimitive.ScrollAreaScrollbar
+            data-slot="scroll-area-scrollbar"
+            orientation={orientation}
+            className={cn(
+                'flex touch-none select-none p-px transition-colors',
+                orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
+                orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
+                className,
+            )}
+            {...props}
+        >
+            <ScrollAreaPrimitive.ScrollAreaThumb
+                data-slot="scroll-area-thumb"
+                className="relative flex-1 rounded-full bg-border"
+            />
+        </ScrollAreaPrimitive.ScrollAreaScrollbar>
+    );
+}
+
+export { ScrollArea, ScrollBar };

package/apps/ui/src/components/ui/select.tsx

@@ -0,0 +1,163 @@
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { Select as SelectPrimitive } from 'radix-ui';
+import type * as React from 'react';
+
+import { cn } from '#/lib/utils.ts';
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+    return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+    return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+    return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+    className,
+    size = 'default',
+    children,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: 'sm' | 'default';
+}) {
+    return (
+        <SelectPrimitive.Trigger
+            data-slot="select-trigger"
+            data-size={size}
+            className={cn(
+                "flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <SelectPrimitive.Icon asChild>
+                <ChevronDownIcon className="size-4 opacity-50" />
+            </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+    );
+}
+
+function SelectContent({
+    className,
+    children,
+    position = 'item-aligned',
+    align = 'center',
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+    return (
+        <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+                data-slot="select-content"
+                className={cn(
+                    'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in',
+                    position === 'popper' &&
+                        'data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',
+                    className,
+                )}
+                position={position}
+                align={align}
+                {...props}
+            >
+                <SelectScrollUpButton />
+                <SelectPrimitive.Viewport
+                    className={cn(
+                        'p-1',
+                        position === 'popper' &&
+                            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+                    )}
+                >
+                    {children}
+                </SelectPrimitive.Viewport>
+                <SelectScrollDownButton />
+            </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+    );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+    return (
+        <SelectPrimitive.Label
+            data-slot="select-label"
+            className={cn('px-2 py-1.5 text-muted-foreground text-xs', className)}
+            {...props}
+        />
+    );
+}
+
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
+    return (
+        <SelectPrimitive.Item
+            data-slot="select-item"
+            className={cn(
+                "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-[var(--accent-muted)] focus:text-[var(--foreground)] data-[disabled]:pointer-events-none data-[highlighted]:bg-[var(--accent-muted)] data-[highlighted]:text-[var(--foreground)] data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-[var(--muted-foreground)] [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+                className,
+            )}
+            {...props}
+        >
+            <span
+                data-slot="select-item-indicator"
+                className="absolute right-2 flex size-3.5 items-center justify-center"
+            >
+                <SelectPrimitive.ItemIndicator>
+                    <CheckIcon className="size-4" />
+                </SelectPrimitive.ItemIndicator>
+            </span>
+            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+        </SelectPrimitive.Item>
+    );
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+    return (
+        <SelectPrimitive.Separator
+            data-slot="select-separator"
+            className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+            {...props}
+        />
+    );
+}
+
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+    return (
+        <SelectPrimitive.ScrollUpButton
+            data-slot="select-scroll-up-button"
+            className={cn('flex cursor-default items-center justify-center py-1', className)}
+            {...props}
+        >
+            <ChevronUpIcon className="size-4" />
+        </SelectPrimitive.ScrollUpButton>
+    );
+}
+
+function SelectScrollDownButton({
+    className,
+    ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+    return (
+        <SelectPrimitive.ScrollDownButton
+            data-slot="select-scroll-down-button"
+            className={cn('flex cursor-default items-center justify-center py-1', className)}
+            {...props}
+        >
+            <ChevronDownIcon className="size-4" />
+        </SelectPrimitive.ScrollDownButton>
+    );
+}
+
+export {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectSeparator,
+    SelectTrigger,
+    SelectValue,
+};

package/apps/ui/src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+import type * as React from 'react';
+
+import { cn } from '#/lib/utils.ts';
+
+function Separator({
+    className,
+    orientation = 'horizontal',
+    decorative = true,
+    ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+    return (
+        <SeparatorPrimitive.Root
+            data-slot="separator"
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Separator };

package/apps/ui/src/components/ui/sheet.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { XIcon } from 'lucide-react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import type * as React from 'react';
+
+import { cn } from '#/lib/utils.ts';
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+    return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+    return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+    return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+    return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+    return (
+        <SheetPrimitive.Overlay
+            data-slot="sheet-overlay"
+            className={cn(
+                'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function SheetContent({
+    className,
+    children,
+    side = 'right',
+    showCloseButton = true,
+    ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    showCloseButton?: boolean;
+}) {
+    return (
+        <SheetPortal>
+            <SheetOverlay />
+            <SheetPrimitive.Content
+                data-slot="sheet-content"
+                className={cn(
+                    'fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500',
+                    side === 'right' &&
+                        'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+                    side === 'left' &&
+                        'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+                    side === 'top' &&
+                        'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+                    side === 'bottom' &&
+                        'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                {showCloseButton && (
+                    <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                        <XIcon className="size-4" />
+                        <span className="sr-only">Close</span>
+                    </SheetPrimitive.Close>
+                )}
+            </SheetPrimitive.Content>
+        </SheetPortal>
+    );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
+    return <div data-slot="sheet-header" className={cn('flex flex-col gap-1.5 p-4', className)} {...props} />;
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
+    return <div data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+    return (
+        <SheetPrimitive.Title
+            data-slot="sheet-title"
+            className={cn('font-semibold text-foreground', className)}
+            {...props}
+        />
+    );
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+    return (
+        <SheetPrimitive.Description
+            data-slot="sheet-description"
+            className={cn('text-muted-foreground text-sm', className)}
+            {...props}
+        />
+    );
+}
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };

package/apps/ui/src/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '#/lib/utils.ts';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+    return <div data-slot="skeleton" className={cn('animate-pulse rounded-md bg-accent', className)} {...props} />;
+}
+
+export { Skeleton };

package/apps/ui/src/components/ui/table.tsx

@@ -0,0 +1,76 @@
+import type * as React from 'react';
+
+import { cn } from '#/lib/utils.ts';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+    return (
+        <div data-slot="table-container" className="relative w-full overflow-x-auto">
+            <table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
+        </div>
+    );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+    return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />;
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+    return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+    return (
+        <tfoot
+            data-slot="table-footer"
+            className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
+            {...props}
+        />
+    );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+    return (
+        <tr
+            data-slot="table-row"
+            className={cn(
+                'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+    return (
+        <th
+            data-slot="table-head"
+            className={cn(
+                'h-10 whitespace-nowrap px-2 text-left align-middle font-medium text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+    return (
+        <td
+            data-slot="table-cell"
+            className={cn(
+                'whitespace-nowrap p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
+    return (
+        <caption data-slot="table-caption" className={cn('mt-4 text-muted-foreground text-sm', className)} {...props} />
+    );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/apps/ui/src/components/ui/tabs.tsx

@@ -0,0 +1,71 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from 'radix-ui';
+import type * as React from 'react';
+
+import { cn } from '#/lib/utils.ts';
+
+function Tabs({ className, orientation = 'horizontal', ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+    return (
+        <TabsPrimitive.Root
+            data-slot="tabs"
+            data-orientation={orientation}
+            orientation={orientation}
+            className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
+            {...props}
+        />
+    );
+}
+
+const tabsListVariants = cva(
+    'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:min-h-11 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
+    {
+        defaultVariants: {
+            variant: 'default',
+        },
+        variants: {
+            variant: {
+                default: 'bg-muted',
+                line: 'gap-1 bg-transparent',
+            },
+        },
+    },
+);
+
+function TabsList({
+    className,
+    variant = 'default',
+    ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+    return (
+        <TabsPrimitive.List
+            data-slot="tabs-list"
+            data-variant={variant}
+            className={cn(tabsListVariants({ variant }), className)}
+            {...props}
+        />
+    );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+    return (
+        <TabsPrimitive.Trigger
+            data-slot="tabs-trigger"
+            className={cn(
+                "relative inline-flex h-auto min-h-9 min-w-0 flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-2 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+                'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
+                'data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground',
+                'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-3px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
+                className,
+            )}
+            {...props}
+        />
+    );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+    return (
+        <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />
+    );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/apps/ui/src/components/ui/tooltip.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { Tooltip as TooltipPrimitive } from 'radix-ui';
+import type * as React from 'react';
+
+import { cn } from '#/lib/utils.ts';
+
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+    return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+    return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+    return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+    className,
+    sideOffset = 0,
+    children,
+    ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+    return (
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+                data-slot="tooltip-content"
+                sideOffset={sideOffset}
+                className={cn(
+                    'fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in text-balance rounded-md bg-foreground px-3 py-1.5 text-background text-xs data-[state=closed]:animate-out',
+                    className,
+                )}
+                {...props}
+            >
+                {children}
+                <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/apps/ui/src/integrations/tanstack-query/devtools.tsx

@@ -0,0 +1,6 @@
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+
+export default {
+    name: 'Tanstack Query',
+    render: <ReactQueryDevtoolsPanel />,
+};

package/apps/ui/src/integrations/tanstack-query/root-provider.tsx

@@ -0,0 +1,10 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export function getContext() {
+    const queryClient = new QueryClient();
+
+    return {
+        queryClient,
+    };
+}
+export default function TanstackQueryProvider() {}

package/apps/ui/src/lib/antigravity-conversation-state.ts

@@ -0,0 +1,41 @@
+import type { AntigravityConversation, AntigravityTranscriptSource } from '@spiracha/lib/antigravity-exporter-types';
+
+const READABLE_TRANSCRIPT_SOURCES: ReadonlySet<AntigravityTranscriptSource> = new Set(['overview', 'transcript']);
+
+export const hasReadableAntigravityConversation = (conversation: AntigravityConversation): boolean => {
+    return conversation.transcriptSource !== null && READABLE_TRANSCRIPT_SOURCES.has(conversation.transcriptSource);
+};
+
+export const hasEncryptedAntigravityConversation = (conversation: AntigravityConversation): boolean => {
+    return conversation.transcriptSource === 'safe-storage';
+};
+
+export const hasSummaryAntigravityConversation = (conversation: AntigravityConversation): boolean => {
+    return (
+        conversation.artifactCount === 0 &&
+        conversation.transcriptSource === null &&
+        (conversation.summaryPath !== null || conversation.indexedItemCount !== null)
+    );
+};
+
+export const isAntigravityConversationLocked = (
+    conversation: AntigravityConversation,
+    hasKeychainSecret: boolean,
+): boolean => {
+    return hasEncryptedAntigravityConversation(conversation) && !hasKeychainSecret;
+};
+
+export const canExportAntigravityConversation = (
+    conversation: AntigravityConversation,
+    hasKeychainSecret: boolean,
+): boolean => {
+    if (hasReadableAntigravityConversation(conversation)) {
+        return true;
+    }
+
+    if (hasEncryptedAntigravityConversation(conversation)) {
+        return hasKeychainSecret;
+    }
+
+    return hasSummaryAntigravityConversation(conversation);
+};

package/apps/ui/src/lib/antigravity-queries.ts

@@ -0,0 +1,33 @@
+import { queryOptions } from '@tanstack/react-query';
+import {
+    getAntigravityConversationDetailFn,
+    getAntigravityDecryptionStateFn,
+    listAntigravityConversationsFn,
+    listAntigravityWorkspacesFn,
+} from './antigravity-server';
+
+export const antigravityDecryptionQueryOptions = () =>
+    queryOptions({
+        queryFn: () => getAntigravityDecryptionStateFn(),
+        queryKey: ['antigravity-decryption'],
+    });
+
+export const antigravityWorkspacesQueryOptions = () =>
+    queryOptions({
+        queryFn: () => listAntigravityWorkspacesFn(),
+        queryKey: ['antigravity-workspaces'],
+    });
+
+export const antigravityConversationsQueryOptions = (workspaceKey: string | null) =>
+    queryOptions({
+        enabled: workspaceKey !== null,
+        queryFn: () => listAntigravityConversationsFn({ data: { workspaceKey: workspaceKey ?? '' } }),
+        queryKey: ['antigravity-conversations', workspaceKey ?? 'none'],
+    });
+
+export const antigravityConversationDetailQueryOptions = (conversationId: string | null) =>
+    queryOptions({
+        enabled: conversationId !== null,
+        queryFn: () => getAntigravityConversationDetailFn({ data: { conversationId: conversationId ?? '' } }),
+        queryKey: ['antigravity-conversation', conversationId ?? 'none'],
+    });