@cero-base/panel 0.0.1

package/src/components/ui/resizable.jsx

@@ -0,0 +1,34 @@
+import { GripVertical } from 'lucide-react'
+import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels'
+
+import { cn } from '../../lib/utils'
+
+function ResizablePanelGroup({ className, direction, ...props }) {
+  return (
+    <PanelGroup orientation={direction} className={cn('h-full w-full', className)} {...props} />
+  )
+}
+
+function ResizablePanel({ className, ...props }) {
+  return <Panel className={cn('h-full', className)} {...props} />
+}
+
+function ResizableHandle({ withHandle, className, ...props }) {
+  return (
+    <PanelResizeHandle
+      className={cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90',
+        className
+      )}
+      {...props}
+    >
+      {withHandle && (
+        <div className='bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border'>
+          <GripVertical className='size-2.5' />
+        </div>
+      )}
+    </PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/components/ui/scroll-area.jsx

@@ -0,0 +1,32 @@
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'
+
+import { cn } from '../../lib/utils'
+
+function ScrollArea({ className, children, ...props }) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot='scroll-area'
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport className='size-full overflow-scroll'>
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollAreaPrimitive.Scrollbar
+        orientation='vertical'
+        className='flex h-full w-2.5 touch-none border-l border-l-transparent p-px select-none transition-colors'
+      >
+        <ScrollAreaPrimitive.Thumb className='bg-border relative flex-1 rounded-full' />
+      </ScrollAreaPrimitive.Scrollbar>
+      <ScrollAreaPrimitive.Scrollbar
+        orientation='horizontal'
+        className='flex h-2.5 touch-none flex-col border-t border-t-transparent p-px select-none transition-colors'
+      >
+        <ScrollAreaPrimitive.Thumb className='bg-border relative flex-1 rounded-full' />
+      </ScrollAreaPrimitive.Scrollbar>
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+export { ScrollArea }

package/src/components/ui/select.jsx

@@ -0,0 +1,169 @@
+import { Select as SelectPrimitive } from '@base-ui/react/select'
+
+import { cn } from '../../lib/utils'
+import { ChevronsUpDown, Check, ChevronUp, ChevronDown } from 'lucide-react'
+
+const Select = SelectPrimitive.Root
+
+function SelectGroup({ className, ...props }) {
+  return (
+    <SelectPrimitive.Group
+      data-slot='select-group'
+      className={cn('scroll-my-1 p-1', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ className, ...props }) {
+  return (
+    <SelectPrimitive.Value
+      data-slot='select-value'
+      className={cn('flex flex-1 text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectTrigger({ className, size = 'default', children, ...props }) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot='select-trigger'
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={<ChevronsUpDown className='text-muted-foreground size-3.5 pointer-events-none' />}
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  side = 'bottom',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className='isolate z-50'
+      >
+        <SelectPrimitive.Popup
+          data-slot='select-content'
+          className={cn(
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open: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 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto',
+            className
+          )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({ className, ...props }) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot='select-label'
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({ className, children, ...props }) {
+  return (
+    <SelectPrimitive.Item
+      data-slot='select-item'
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ItemText className='flex flex-1 gap-2 shrink-0 whitespace-nowrap'>
+        {children}
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className='pointer-events-none absolute right-2 flex items-center justify-center' />
+        }
+      >
+        <Check className='pointer-events-none' />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({ className, ...props }) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot='select-separator'
+      className={cn('bg-border/50 -mx-1 my-1 h-px pointer-events-none', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({ className, ...props }) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot='select-scroll-up-button'
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 top-0 w-full",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUp />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({ className, ...props }) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot='select-scroll-down-button'
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 bottom-0 w-full",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDown />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue
+}

package/src/components/ui/table.jsx

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

package/src/components/ui/tabs.jsx

@@ -0,0 +1,43 @@
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+
+import { cn } from '../../lib/utils'
+
+const Tabs = TabsPrimitive.Root
+
+function TabsList({ className, ...props }) {
+  return (
+    <TabsPrimitive.List
+      data-slot='tabs-list'
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({ className, ...props }) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot='tabs-trigger'
+      className={cn(
+        "inline-flex h-7 flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-xs font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:border-primary/50 dark:data-active:border-primary/30 data-active:bg-primary/10 data-active:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({ className, ...props }) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot='tabs-content'
+      className={cn('flex-1 outline-none mt-2', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }

package/src/components/ui/tooltip.jsx

@@ -0,0 +1,33 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import { cn } from '../../lib/utils'
+
+function Tooltip({ children, ...props }) {
+  return <TooltipPrimitive.Provider {...props}>{children}</TooltipPrimitive.Provider>
+}
+
+function TooltipRoot({ ...props }) {
+  return <TooltipPrimitive.Root {...props} />
+}
+
+function TooltipTrigger({ className, ...props }) {
+  return <TooltipPrimitive.Trigger className={cn('cursor-default', className)} {...props} />
+}
+
+function TooltipContent({ className, sideOffset = 4, ...props }) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner sideOffset={sideOffset}>
+        <TooltipPrimitive.Popup
+          className={cn(
+            'bg-popover text-popover-foreground z-50 rounded-md border px-2.5 py-1 text-xs shadow-md',
+            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95',
+            className
+          )}
+          {...props}
+        />
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent }

package/src/global.css

@@ -0,0 +1,86 @@
+@import 'tailwindcss' theme(static);
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-sans: system-ui, sans-serif;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.7 0.12 183);
+  --primary-foreground: oklch(0.28 0.04 193);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.7 0.12 183);
+  --accent-foreground: oklch(0.28 0.04 193);
+  --destructive: oklch(0.604 0.191 22.216);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 10%);
+  --ring: oklch(0.556 0 0);
+  --radius: 0.625rem;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply font-sans bg-background text-foreground;
+  }
+
+  /* Scrollbar styling */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: oklch(0.5 0 0 / 30%) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 4px !important;
+    height: 4px !important;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: oklch(0.5 0 0 / 30%);
+    border-radius: 3px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: oklch(0.5 0 0 / 50%);
+  }
+}

package/src/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './use-schema.js'
+export * from './use-collection.js'
+export * from './use-rooms.js'

package/src/hooks/use-collection.js

@@ -0,0 +1,27 @@
+import { useMemo, useCallback } from 'react'
+import { useQuery } from '@cero-base/react'
+import { empty } from './util.js'
+
+export function useCollection(db, collectionName, room = null) {
+  const col = useMemo(() => {
+    if (!db || !collectionName) return null
+    try {
+      const scope = db.schema.getScope(collectionName)
+      if (scope === 'shared') return room?.collection(collectionName) ?? null
+      return db.collection(collectionName)
+    } catch {
+      return null
+    }
+  }, [db, collectionName, room])
+
+  const { data, busy, error } = useQuery(() => (col ? col.sub() : empty([])), [col])
+
+  return {
+    data: data || [],
+    loading: busy,
+    error,
+    put: useCallback((doc) => col?.put(doc), [col]),
+    del: useCallback((query) => col?.del(query), [col]),
+    get: useCallback((query) => col?.get(query) ?? null, [col])
+  }
+}

package/src/hooks/use-rooms.js

@@ -0,0 +1,80 @@
+import { useState, useEffect, useCallback } from 'react'
+
+/**
+ * Hook to manage rooms for shared collections
+ */
+export function useRooms(db) {
+  const [rooms, setRooms] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  useEffect(() => {
+    if (!db?.rooms) {
+      setRooms([])
+      setLoading(false)
+      return
+    }
+
+    const loadRooms = async () => {
+      setLoading(true)
+      try {
+        const list = await db.rooms.list()
+        setRooms(list || [])
+      } catch (err) {
+        setError(err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadRooms()
+
+    const onUpdate = () => loadRooms()
+    if (db.on) db.on('update', onUpdate)
+
+    return () => {
+      if (db.off) db.off('update', onUpdate)
+    }
+  }, [db])
+
+  const openRoom = useCallback(
+    async (roomKey) => {
+      if (!db?.rooms) return null
+      return db.rooms.open(roomKey)
+    },
+    [db]
+  )
+
+  const createRoom = useCallback(
+    async (opts = {}) => {
+      if (!db?.rooms) return null
+      return db.rooms.create(opts)
+    },
+    [db]
+  )
+
+  return { rooms, loading, error, openRoom, createRoom }
+}
+
+/**
+ * Hook for room selection state
+ */
+export function useRoomSelection(db) {
+  const { rooms, loading, error, openRoom, createRoom } = useRooms(db)
+  const [selected, setSelected] = useState(null)
+
+  const select = useCallback(
+    async (roomKey) => {
+      if (!roomKey) {
+        setSelected(null)
+        return null
+      }
+      const room = await openRoom(roomKey)
+      setSelected(room)
+      return room
+    },
+    [openRoom]
+  )
+
+  return { rooms, loading, error, selected, select, createRoom }
+}

package/src/hooks/use-schema.js

@@ -0,0 +1,71 @@
+import { useMemo } from 'react'
+
+/**
+ * Hook to introspect the cero-base schema
+ * Returns collection metadata including fields, key, indexes, and scope
+ */
+export function useSchema(db) {
+  return useMemo(() => {
+    if (!db?.schema?.collections) return []
+
+    const { collections } = db.schema
+
+    return Object.entries(collections).map(([name, def]) => {
+      // Include timestamp fields if timestamps is enabled
+      const fields = { ...def.fields }
+      if (def.timestamps) {
+        fields.createdAt = { type: 'uint', required: true }
+        fields.updatedAt = { type: 'uint', required: false }
+      }
+      return {
+        name,
+        scope: db.schema.getScope(name),
+        fields,
+        key: def.key || [],
+        indexes: def.indexes || [],
+        timestamps: def.timestamps || false
+      }
+    })
+  }, [db])
+}
+
+/**
+ * Get collections grouped by scope
+ */
+export function useSchemaByScope(db) {
+  const collections = useSchema(db)
+
+  return useMemo(
+    () => ({
+      local: collections.filter((c) => c.scope === 'local'),
+      private: collections.filter((c) => c.scope === 'private'),
+      shared: collections.filter((c) => c.scope === 'shared')
+    }),
+    [collections]
+  )
+}
+
+/**
+ * Get schema for a specific collection
+ */
+export function useCollectionSchema(db, collectionName) {
+  return useMemo(() => {
+    if (!db?.schema?.collections?.[collectionName]) return null
+
+    const def = db.schema.collections[collectionName]
+    // Include timestamp fields if timestamps is enabled
+    const fields = { ...def.fields }
+    if (def.timestamps) {
+      fields.createdAt = { type: 'uint', required: true }
+      fields.updatedAt = { type: 'uint', required: false }
+    }
+    return {
+      name: collectionName,
+      scope: db.schema.getScope(collectionName),
+      fields,
+      key: def.key || [],
+      indexes: def.indexes || [],
+      timestamps: def.timestamps || false
+    }
+  }, [db, collectionName])
+}

package/src/hooks/use-system.js

@@ -0,0 +1,23 @@
+import { useQuery } from '@cero-base/react'
+import { empty } from './util.js'
+
+function toStream(facade) {
+  if (!facade) return empty(null)
+  if (facade.sub) return facade.sub()
+  if (facade.subscribe) return facade.subscribe()
+  return empty(null)
+}
+
+export function useIdentityData(db, type) {
+  const { data, busy } = useQuery(() => {
+    const facade = db?.identity?.[type] || db?.[type]
+    return toStream(facade)
+  }, [db, type])
+  return { data, loading: busy }
+}
+
+export function useRoomData(db, room, type) {
+  const target = room?.room || room
+  const { data, busy } = useQuery(() => toStream(target?.[type]), [target, type])
+  return { data, loading: busy }
+}