@cero-base/panel 0.0.1

package/src/hooks/util.js

@@ -0,0 +1,10 @@
+import { Readable } from 'streamx'
+
+export function empty(value) {
+  const s = new Readable()
+  queueMicrotask(() => {
+    s.push(value)
+    s.push(null)
+  })
+  return s
+}

package/src/index.js

@@ -0,0 +1,5 @@
+export { CeroPanel } from './components/panel.jsx'
+export { useSchema, useSchemaByScope, useCollectionSchema } from './hooks/use-schema.js'
+export { useCollection } from './hooks/use-collection.js'
+export { useRooms, useRoomSelection } from './hooks/use-rooms.js'
+export { useIdentityData, useRoomData } from './hooks/use-system.js'

package/src/lib/field-types.js

@@ -0,0 +1,148 @@
+/**
+ * Field type utilities for displaying and editing schema values
+ */
+
+/**
+ * Format a value for display based on its schema type
+ */
+export function formatValue(value, type) {
+  if (value === null || value === undefined) return '—'
+
+  const typeName = typeof type === 'string' ? type : type?.type
+
+  switch (typeName) {
+    case 'bool':
+    case 'boolean':
+      return value ? 'true' : 'false'
+
+    case 'json':
+    case 'object':
+      return JSON.stringify(value)
+
+    case 'array':
+      if (Array.isArray(value)) {
+        return `[${value.length} items]`
+      }
+      return JSON.stringify(value)
+
+    case 'date':
+    case 'timestamp':
+      if (value instanceof Date) {
+        return value.toISOString()
+      }
+      if (typeof value === 'number') {
+        return new Date(value).toISOString()
+      }
+      return String(value)
+
+    case 'buffer':
+    case 'binary':
+      if (Buffer.isBuffer(value) || value instanceof Uint8Array) {
+        return `<Buffer ${value.length} bytes>`
+      }
+      return String(value)
+
+    default:
+      if (typeof value === 'object') {
+        return JSON.stringify(value)
+      }
+      return String(value)
+  }
+}
+
+/**
+ * Get input type for form fields based on schema type
+ */
+export function getInputType(type) {
+  const typeName = typeof type === 'string' ? type : type?.type
+
+  switch (typeName) {
+    case 'bool':
+    case 'boolean':
+      return 'checkbox'
+
+    case 'number':
+    case 'int':
+    case 'integer':
+    case 'float':
+      return 'number'
+
+    case 'json':
+    case 'object':
+    case 'array':
+      return 'textarea'
+
+    default:
+      return 'text'
+  }
+}
+
+/**
+ * Parse input value to match schema type
+ */
+export function parseValue(value, type) {
+  const typeName = typeof type === 'string' ? type : type?.type
+
+  switch (typeName) {
+    case 'bool':
+    case 'boolean':
+      return Boolean(value)
+
+    case 'number':
+    case 'float':
+      return parseFloat(value) || 0
+
+    case 'int':
+    case 'integer':
+      return parseInt(value, 10) || 0
+
+    case 'json':
+    case 'object':
+    case 'array':
+      try {
+        return JSON.parse(value)
+      } catch {
+        return value
+      }
+
+    default:
+      return value
+  }
+}
+
+/**
+ * Get default value for a schema type
+ */
+export function getDefaultValue(type) {
+  const typeName = typeof type === 'string' ? type : type?.type
+
+  switch (typeName) {
+    case 'bool':
+    case 'boolean':
+      return false
+
+    case 'number':
+    case 'int':
+    case 'integer':
+    case 'float':
+      return 0
+
+    case 'array':
+      return []
+
+    case 'json':
+    case 'object':
+      return {}
+
+    default:
+      return ''
+  }
+}
+
+/**
+ * Truncate long strings for display
+ */
+export function truncate(str, maxLength = 50) {
+  if (!str || str.length <= maxLength) return str
+  return str.slice(0, maxLength) + '...'
+}

package/src/lib/utils.js

@@ -0,0 +1,19 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatValue(value, type) {
+  if (value === null || value === undefined) return '—'
+  if (type?.type === 'bool') return value ? 'true' : 'false'
+  if (type?.type === 'json') return JSON.stringify(value)
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+
+export function truncate(str, maxLength = 50) {
+  if (!str || str.length <= maxLength) return str
+  return str.slice(0, maxLength) + '...'
+}

package/src/open-panel.js

@@ -0,0 +1,30 @@
+/* global Pear */
+
+/**
+ * Opens the Cero Panel in a separate Pear window.
+ * The panel window connects to the same storage path as the main app.
+ *
+ * @param {Object} opts
+ * @param {string} opts.storage - Storage path (usually Pear.config.storage)
+ * @param {number} [opts.width=900] - Window width
+ * @param {number} [opts.height=600] - Window height
+ */
+export async function openPanel({ storage, width = 900, height = 600 }) {
+  // Store config for the panel window to read
+  sessionStorage.setItem('cero-panel-storage', storage)
+
+  const win = new Pear.Window('./node_modules/cero-panel/build/src/panel-window.html', {
+    width,
+    height
+  })
+
+  // Send storage path to panel
+  win.on('message', (msg) => {
+    if (msg.type === 'ready') {
+      win.send({ type: 'config', storage })
+    }
+  })
+
+  await win.open({ show: true })
+  return win
+}

package/src/panel-window.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Cero Panel</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        font-family: system-ui, sans-serif;
+        background: #1e293b;
+        color: #e2e8f0;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./panel-window.js"></script>
+  </body>
+</html>

package/src/panel-window.jsx

@@ -0,0 +1,195 @@
+/* global Pear */
+import { useState, useEffect } from 'react'
+import { createRoot } from 'react-dom/client'
+
+// Panel receives base data via Pear.messages from parent window
+function PanelApp() {
+  const [collections, setCollections] = useState([])
+  const [rooms, setRooms] = useState([])
+  const [selected, setSelected] = useState(null)
+  const [room, setRoom] = useState(null)
+  const [data, setData] = useState([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    // Listen for data from parent window
+    const stream = Pear.messages((msg) => {
+      if (msg.type === 'init') {
+        setCollections(msg.collections)
+        setRooms(msg.rooms)
+      } else if (msg.type === 'data') {
+        setData(msg.data)
+        setLoading(false)
+      }
+    })
+
+    // Request initial data
+    Pear.message({ type: 'ready' })
+
+    return () => stream.destroy?.()
+  }, [])
+
+  const onSelect = (col) => {
+    setSelected(col)
+    setLoading(true)
+    Pear.message({ type: 'subscribe', collection: col.name, roomId: room?.id })
+  }
+
+  const onRoomChange = (r) => {
+    setRoom(r)
+    if (selected?.scope === 'shared') {
+      setLoading(true)
+      Pear.message({ type: 'subscribe', collection: selected.name, roomId: r?.id })
+    }
+  }
+
+  const fields = selected
+    ? Object.keys(collections.find((c) => c.name === selected.name)?.fields || {})
+    : []
+  const grouped = {
+    local: collections.filter((c) => c.scope === 'local'),
+    private: collections.filter((c) => c.scope === 'private'),
+    shared: collections.filter((c) => c.scope === 'shared')
+  }
+
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      {/* Sidebar */}
+      <div style={{ width: 200, borderRight: '1px solid #334155', padding: 12, overflow: 'auto' }}>
+        <div style={{ marginBottom: 16, fontWeight: 600, color: '#0ea5e9' }}>Cero Panel</div>
+        {Object.entries(grouped).map(
+          ([scope, cols]) =>
+            cols.length > 0 && (
+              <div key={scope} style={{ marginBottom: 16 }}>
+                <div
+                  style={{
+                    fontSize: 10,
+                    color: '#64748b',
+                    textTransform: 'uppercase',
+                    marginBottom: 8
+                  }}
+                >
+                  {scope} ({cols.length})
+                </div>
+                {cols.map((c) => (
+                  <button
+                    key={c.name}
+                    onClick={() => onSelect(c)}
+                    style={{
+                      display: 'block',
+                      width: '100%',
+                      padding: '8px 12px',
+                      marginBottom: 4,
+                      backgroundColor: selected?.name === c.name ? '#0ea5e9' : 'transparent',
+                      color: selected?.name === c.name ? 'white' : '#e2e8f0',
+                      border: 'none',
+                      borderRadius: 6,
+                      textAlign: 'left',
+                      cursor: 'pointer',
+                      fontSize: 12
+                    }}
+                  >
+                    {c.name}
+                  </button>
+                ))}
+              </div>
+            )
+        )}
+      </div>
+
+      {/* Main */}
+      <div style={{ flex: 1, padding: 16, overflow: 'auto' }}>
+        {!selected ? (
+          <div style={{ color: '#64748b', textAlign: 'center', marginTop: 40 }}>
+            Select a collection
+          </div>
+        ) : (
+          <div>
+            <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span style={{ fontWeight: 600 }}>{selected.name}</span>
+              <span
+                style={{
+                  fontSize: 10,
+                  color: '#64748b',
+                  padding: '2px 6px',
+                  backgroundColor: '#334155',
+                  borderRadius: 4
+                }}
+              >
+                {selected.scope}
+              </span>
+              {selected.scope === 'shared' && (
+                <select
+                  value={room?.id || ''}
+                  onChange={(e) => onRoomChange(rooms.find((r) => r.id === e.target.value) || null)}
+                  style={{
+                    padding: '6px 10px',
+                    backgroundColor: '#334155',
+                    color: '#e2e8f0',
+                    border: '1px solid #475569',
+                    borderRadius: 4,
+                    fontSize: 11
+                  }}
+                >
+                  <option value=''>Select room...</option>
+                  {rooms.map((r) => (
+                    <option key={r.id} value={r.id}>
+                      {r.name || r.id?.slice(0, 8)}
+                    </option>
+                  ))}
+                </select>
+              )}
+              <span style={{ fontSize: 11, color: '#64748b' }}>
+                {loading ? 'Loading...' : `${data.length} documents`}
+              </span>
+            </div>
+
+            {selected.scope === 'shared' && !room ? (
+              <div style={{ color: '#f59e0b', fontSize: 12 }}>Select a room to view data</div>
+            ) : data.length === 0 ? (
+              <div style={{ color: '#64748b' }}>No documents</div>
+            ) : (
+              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
+                <thead>
+                  <tr>
+                    {fields.map((f) => (
+                      <th
+                        key={f}
+                        style={{
+                          textAlign: 'left',
+                          padding: '8px 12px',
+                          borderBottom: '1px solid #334155',
+                          color: '#94a3b8'
+                        }}
+                      >
+                        {f}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {data.map((doc, i) => (
+                    <tr key={i}>
+                      {fields.map((f) => (
+                        <td
+                          key={f}
+                          style={{ padding: '8px 12px', borderBottom: '1px solid #334155' }}
+                        >
+                          {typeof doc[f] === 'object'
+                            ? JSON.stringify(doc[f])
+                            : String(doc[f] ?? '')}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+createRoot(document.getElementById('root')).render(<PanelApp />)

package/src/theme.css

@@ -0,0 +1,57 @@
+@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;
+  }
+}