@cero-base/panel 0.0.1

package/README.md

@@ -0,0 +1,42 @@
+# @cero-base/panel
+
+Debug panel component for cero-base. Displays schema, collections, rooms, and system data in a collapsible panel overlay.
+
+## Install
+
+```bash
+npm install @cero-base/panel
+```
+
+## Usage
+
+```jsx
+import { CeroPanel } from '@cero-base/panel'
+
+function App() {
+  return (
+    <>
+      <MyApp />
+      <CeroPanel db={db} />
+    </>
+  )
+}
+```
+
+## Exports
+
+| Export                | Description                       |
+| --------------------- | --------------------------------- |
+| `CeroPanel`           | Debug panel component             |
+| `useSchema`           | Hook for schema introspection     |
+| `useSchemaByScope`    | Hook for schema filtered by scope |
+| `useCollectionSchema` | Hook for single collection schema |
+| `useCollection`       | Hook for collection data          |
+| `useRooms`            | Hook for room list                |
+| `useRoomSelection`    | Hook for room selection state     |
+| `useIdentityData`     | Hook for identity system data     |
+| `useRoomData`         | Hook for room system data         |
+
+## License
+
+Apache-2.0

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@cero-base/panel",
+  "version": "0.0.1",
+  "description": "Admin panel UI for cero-base",
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./global.css": "./src/global.css"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "@cero-base/core": "^0.0.1",
+    "@cero-base/react": "^0.0.1",
+    "@tanstack/react-table": "^8.0.0",
+    "b4a": "^1.6.4",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.400.0",
+    "react-resizable-panels": "^2.0.0",
+    "streamx": "^2.23.0",
+    "tailwind-merge": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lekinox/cero-base.git",
+    "directory": "packages/panel"
+  }
+}

package/src/components/data-table.jsx

@@ -0,0 +1,245 @@
+import { useState, useMemo } from 'react'
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  getPaginationRowModel,
+  useReactTable
+} from '@tanstack/react-table'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table'
+import { Checkbox } from './ui/checkbox'
+import { Button } from './ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from './ui/dropdown-menu'
+import { formatValue, truncate } from '../lib/field-types'
+import { cn } from '../lib/utils'
+import {
+  ArrowUpDown,
+  ArrowUp,
+  ArrowDown,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+  ChevronLeft,
+  ChevronRight
+} from 'lucide-react'
+
+function SortButton({ column, children }) {
+  const sorted = column.getIsSorted()
+  return (
+    <button
+      onClick={() => column.toggleSorting(sorted === 'asc')}
+      className='flex items-center gap-1 hover:text-foreground'
+    >
+      {children}
+      {sorted === 'asc' ? (
+        <ArrowUp className='size-3' />
+      ) : sorted === 'desc' ? (
+        <ArrowDown className='size-3' />
+      ) : (
+        <ArrowUpDown className='size-3 opacity-50' />
+      )}
+    </button>
+  )
+}
+
+function ActionCell({ row, onEdit, onDelete }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' size='icon-sm' className='size-6'>
+          <MoreHorizontal className='size-3.5' />
+          <span className='sr-only'>Actions</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        <DropdownMenuItem onClick={() => onEdit(row.original)}>
+          <Pencil />
+          Edit
+        </DropdownMenuItem>
+        <DropdownMenuItem variant='destructive' onClick={() => onDelete(row.original)}>
+          <Trash2 />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function Pagination({ table }) {
+  return (
+    <div className='flex items-center justify-between px-2 py-2 border-t border-border/50'>
+      <div className='text-xs text-muted-foreground'>
+        {table.getFilteredSelectedRowModel().rows.length} of{' '}
+        {table.getFilteredRowModel().rows.length} selected
+      </div>
+      <div className='flex items-center gap-1'>
+        <span className='text-xs text-muted-foreground mr-2'>
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        </span>
+        <Button
+          variant='outline'
+          size='icon-sm'
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronLeft className='size-3.5' />
+        </Button>
+        <Button
+          variant='outline'
+          size='icon-sm'
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <ChevronRight className='size-3.5' />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export function DataTable({ data, schema, loading, onEdit, onDelete, onSelectionChange }) {
+  const [sorting, setSorting] = useState([])
+  const [rowSelection, setRowSelection] = useState({})
+
+  // Build columns from schema
+  const columns = useMemo(() => {
+    if (!schema?.fields) return []
+
+    const cols = [
+      // Selection column
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <Checkbox
+            checked={
+              table.getIsAllPageRowsSelected() ||
+              (table.getIsSomePageRowsSelected() && 'indeterminate')
+            }
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label='Select all'
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label='Select row'
+          />
+        ),
+        enableSorting: false,
+        size: 40
+      },
+      // Field columns from schema
+      ...Object.entries(schema.fields).map(([field, type]) => ({
+        accessorKey: field,
+        header: ({ column }) => <SortButton column={column}>{field}</SortButton>,
+        cell: ({ row }) => {
+          const value = row.getValue(field)
+          const formatted = formatValue(value, type)
+          return (
+            <span
+              className={cn(schema.key.includes(field) && 'font-medium', 'max-w-48 block truncate')}
+              title={formatted}
+            >
+              {truncate(formatted, 40)}
+            </span>
+          )
+        }
+      })),
+      // Actions column
+      {
+        id: 'actions',
+        cell: ({ row }) => <ActionCell row={row} onEdit={onEdit} onDelete={onDelete} />,
+        size: 40
+      }
+    ]
+
+    return cols
+  }, [schema, onEdit, onDelete])
+
+  const table = useReactTable({
+    data: data || [],
+    columns,
+    state: {
+      sorting,
+      rowSelection
+    },
+    onSortingChange: setSorting,
+    onRowSelectionChange: (updater) => {
+      const newSelection = typeof updater === 'function' ? updater(rowSelection) : updater
+      setRowSelection(newSelection)
+      if (onSelectionChange) {
+        const selectedRows = Object.keys(newSelection)
+          .filter((key) => newSelection[key])
+          .map((key) => data[parseInt(key)])
+        onSelectionChange(selectedRows)
+      }
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel()
+  })
+
+  if (loading) {
+    return (
+      <div className='flex h-40 items-center justify-center text-xs text-muted-foreground'>
+        Loading...
+      </div>
+    )
+  }
+
+  if (!schema) {
+    return (
+      <div className='flex h-40 items-center justify-center text-xs text-muted-foreground'>
+        Select a collection to view data
+      </div>
+    )
+  }
+
+  if (data.length === 0) {
+    return (
+      <div className='flex h-40 items-center justify-center text-xs text-muted-foreground'>
+        No documents found
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex flex-col h-full'>
+      <div className='flex-1 overflow-auto'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id} style={{ width: header.column.getSize() }}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.map((row) => (
+              <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <Pagination table={table} />
+    </div>
+  )
+}

package/src/components/document-form.jsx

@@ -0,0 +1,211 @@
+import { useState, useEffect, useMemo } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter
+} from './ui/dialog'
+import { Button } from './ui/button'
+import { Input } from './ui/input'
+import { Checkbox } from './ui/checkbox'
+import { ScrollArea } from './ui/scroll-area'
+import { getInputType, parseValue, getDefaultValue } from '../lib/field-types'
+import { cn } from '../lib/utils'
+
+function FieldInput({ name, type, value, onChange, disabled }) {
+  const inputType = getInputType(type)
+  const typeName = typeof type === 'string' ? type : type?.type
+
+  if (inputType === 'checkbox') {
+    return (
+      <div className='flex items-center gap-2'>
+        <Checkbox
+          id={name}
+          checked={Boolean(value)}
+          onCheckedChange={(checked) => onChange(checked)}
+          disabled={disabled}
+        />
+        <label htmlFor={name} className='text-xs'>
+          {value ? 'true' : 'false'}
+        </label>
+      </div>
+    )
+  }
+
+  if (inputType === 'textarea') {
+    const displayValue =
+      typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value || '')
+    return (
+      <textarea
+        id={name}
+        value={displayValue}
+        onChange={(e) => onChange(parseValue(e.target.value, type))}
+        disabled={disabled}
+        className={cn(
+          'flex min-h-20 w-full rounded-md border border-input bg-input/20 px-3 py-2 text-xs',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          'font-mono'
+        )}
+        rows={4}
+      />
+    )
+  }
+
+  return (
+    <Input
+      id={name}
+      type={inputType}
+      value={value ?? ''}
+      onChange={(e) => {
+        const val = inputType === 'number' ? parseValue(e.target.value, type) : e.target.value
+        onChange(val)
+      }}
+      disabled={disabled}
+      className='text-xs'
+    />
+  )
+}
+
+function FormField({ name, type, value, onChange, disabled, isKey }) {
+  const typeName = typeof type === 'string' ? type : type?.type
+
+  return (
+    <div className='space-y-1.5'>
+      <label htmlFor={name} className='flex items-center gap-2 text-xs font-medium'>
+        {name}
+        {isKey && (
+          <span className='text-[10px] text-muted-foreground px-1 py-0.5 bg-muted rounded'>
+            key
+          </span>
+        )}
+        <span className='text-[10px] text-muted-foreground ml-auto'>{typeName || 'string'}</span>
+      </label>
+      <FieldInput name={name} type={type} value={value} onChange={onChange} disabled={disabled} />
+    </div>
+  )
+}
+
+export function DocumentForm({ open, onOpenChange, schema, doc, onSave, onDelete }) {
+  const isNew = !doc || Object.keys(doc).length === 0
+  const [values, setValues] = useState({})
+  const [saving, setSaving] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  // Initialize values when doc changes
+  useEffect(() => {
+    if (!schema?.fields) {
+      setValues({})
+      return
+    }
+
+    if (isNew) {
+      // Set default values for new doc
+      const defaults = Object.entries(schema.fields).reduce((acc, [field, type]) => {
+        acc[field] = getDefaultValue(type)
+        return acc
+      }, {})
+      setValues(defaults)
+    } else {
+      setValues({ ...doc })
+    }
+  }, [doc, schema, isNew])
+
+  const onChange = (field, value) => {
+    setValues((prev) => ({ ...prev, [field]: value }))
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await onSave(values, isNew)
+      onOpenChange(false)
+    } catch (err) {
+      console.error('Save failed:', err)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirmDelete) {
+      setConfirmDelete(true)
+      return
+    }
+
+    setDeleting(true)
+    try {
+      await onDelete(doc)
+      onOpenChange(false)
+    } catch (err) {
+      console.error('Delete failed:', err)
+    } finally {
+      setDeleting(false)
+      setConfirmDelete(false)
+    }
+  }
+
+  const onClose = (open) => {
+    if (!open) {
+      setConfirmDelete(false)
+    }
+    onOpenChange(open)
+  }
+
+  if (!schema) return null
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className='sm:max-w-md'>
+        <DialogHeader>
+          <DialogTitle>{isNew ? 'New Document' : 'Edit Document'}</DialogTitle>
+          <DialogDescription>
+            {isNew
+              ? `Create a new document in ${schema.name}`
+              : `Editing document in ${schema.name}`}
+          </DialogDescription>
+        </DialogHeader>
+        <ScrollArea className='max-h-96'>
+          <div className='space-y-4 px-1 py-2'>
+            {Object.entries(schema.fields).map(([field, type]) => (
+              <FormField
+                key={field}
+                name={field}
+                type={type}
+                value={values[field]}
+                onChange={(v) => onChange(field, v)}
+                disabled={!isNew && schema.key.includes(field)}
+                isKey={schema.key.includes(field)}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+        <DialogFooter className='flex-row gap-2'>
+          {!isNew && (
+            <Button
+              variant='destructive'
+              onClick={handleDelete}
+              disabled={deleting || saving}
+              className='mr-auto'
+            >
+              {confirmDelete ? 'Confirm Delete' : 'Delete'}
+            </Button>
+          )}
+          <Button
+            variant='outline'
+            onClick={() => onOpenChange(false)}
+            disabled={saving || deleting}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={saving || deleting}>
+            {saving ? 'Saving...' : isNew ? 'Create' : 'Save'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}