@liorandb/studio 0.0.1

package/template/src/components/DocumentViewer.tsx

@@ -0,0 +1,313 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Plus, Edit2, Trash2, Copy } from 'lucide-react';
+import { useAppStore } from '@/store';
+import { LioranDBService } from '@/lib/lioran';
+import { Document } from '@/types';
+import { formatJSON, copyToClipboard } from '@/lib/utils';
+import { useToast } from './Toast';
+import { JsonViewer } from './JsonViewer';
+
+interface DocumentViewerProps {
+  onAddDocument?: () => void;
+  onEditDocument?: (doc: Document) => void;
+}
+
+export function DocumentViewer({ onAddDocument, onEditDocument }: DocumentViewerProps) {
+  const { currentDatabase, selectedCollection, documents, isLoading } = useAppStore();
+  const [viewMode, setViewMode] = useState<'table' | 'json'>('table');
+  const { addToast } = useToast();
+
+  useEffect(() => {
+    if (!currentDatabase || !selectedCollection) return;
+
+    loadDocuments();
+  }, [currentDatabase, selectedCollection]);
+
+  async function loadDocuments() {
+    if (!currentDatabase || !selectedCollection) return;
+
+    try {
+      useAppStore.setState({ isLoading: true });
+      const { documents: docs } = await LioranDBService.find(
+        currentDatabase,
+        selectedCollection,
+        {},
+        100
+      );
+      useAppStore.setState({ documents: docs });
+    } catch (error) {
+      addToast(`Error loading documents: ${error}`, 'error');
+    } finally {
+      useAppStore.setState({ isLoading: false });
+    }
+  }
+
+  async function handleDelete(doc: Document) {
+    if (!currentDatabase || !selectedCollection) return;
+    if (!confirm('Delete this document? This action cannot be undone.')) return;
+
+    try {
+      useAppStore.setState({ isLoading: true });
+      const _id = doc._id;
+      await LioranDBService.deleteMany(currentDatabase, selectedCollection, { _id });
+      await loadDocuments();
+      addToast('Document deleted', 'success');
+    } catch (error) {
+      addToast(`Error deleting document: ${error}`, 'error');
+    } finally {
+      useAppStore.setState({ isLoading: false });
+    }
+  }
+
+  async function handleCopy(doc: Document) {
+    try {
+      await copyToClipboard(formatJSON(doc));
+      addToast('Copied to clipboard', 'success');
+    } catch (error) {
+      addToast('Failed to copy', 'error');
+    }
+  }
+
+  if (!currentDatabase || !selectedCollection) {
+    return (
+      <div className="flex items-center justify-center h-full text-slate-400">
+        <p>Select a collection to view documents</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Toolbar */}
+      <div className="p-4 border-b border-slate-800 flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-slate-100">
+          Documents ({documents.length})
+        </h3>
+
+        <div className="flex items-center gap-3">
+          <div className="flex gap-1 bg-slate-900 rounded p-1">
+            <button
+              onClick={() => setViewMode('table')}
+              className={`px-3 py-1 rounded text-sm transition ${
+                viewMode === 'table'
+                  ? 'bg-emerald-600 text-white'
+                  : 'text-slate-400 hover:text-slate-200'
+              }`}
+            >
+              Table
+            </button>
+            <button
+              onClick={() => setViewMode('json')}
+              className={`px-3 py-1 rounded text-sm transition ${
+                viewMode === 'json'
+                  ? 'bg-emerald-600 text-white'
+                  : 'text-slate-400 hover:text-slate-200'
+              }`}
+            >
+              JSON
+            </button>
+          </div>
+
+          <button
+            onClick={onAddDocument}
+            disabled={isLoading}
+            className="flex items-center gap-2 px-3 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded transition disabled:opacity-50"
+          >
+            <Plus size={16} />
+            <span className="text-sm">Add Document</span>
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-auto">
+        {isLoading ? (
+          <div className="flex items-center justify-center h-full text-slate-400">
+            <p>Loading documents...</p>
+          </div>
+        ) : documents.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-slate-400">
+            <p>No documents in this collection</p>
+          </div>
+        ) : viewMode === 'table' ? (
+          <DocumentTable
+            documents={documents}
+            onEdit={onEditDocument}
+            onDelete={handleDelete}
+            onCopy={handleCopy}
+          />
+        ) : (
+          <JsonViewMode
+            documents={documents}
+            onEdit={onEditDocument}
+            onDelete={handleDelete}
+            onCopy={handleCopy}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function DocumentTable({
+  documents,
+  onEdit,
+  onDelete,
+  onCopy,
+}: {
+  documents: Document[];
+  onEdit?: (doc: Document) => void;
+  onDelete: (doc: Document) => void;
+  onCopy: (doc: Document) => void;
+}) {
+  if (documents.length === 0) return null;
+
+  const keys = Array.from(
+    new Set(documents.flatMap((doc) => Object.keys(doc)))
+  ).slice(0, 5); // Show first 5 columns
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="w-full border-collapse">
+        <thead>
+          <tr className="border-b border-slate-800 bg-slate-900">
+            {keys.map((key) => (
+              <th
+                key={key}
+                className="px-4 py-3 text-left text-sm font-medium text-slate-300 truncate"
+              >
+                {key}
+              </th>
+            ))}
+            <th className="px-4 py-3 text-left text-sm font-medium text-slate-300 w-24">
+              Actions
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {documents.map((doc, idx) => (
+            <tr
+              key={idx}
+              className="border-b border-slate-800 hover:bg-slate-900/50 transition"
+            >
+              {keys.map((key) => (
+                <td
+                  key={key}
+                  className="px-4 py-3 text-sm text-slate-300 truncate"
+                >
+                  {formatCellValue(doc[key])}
+                </td>
+              ))}
+              <td className="px-4 py-3">
+                <div className="flex items-center gap-2">
+                  {onEdit && (
+                    <button
+                      onClick={() => onEdit(doc)}
+                      className="p-1 hover:bg-slate-800 rounded transition text-slate-400 hover:text-amber-400"
+                      title="Edit"
+                    >
+                      <Edit2 size={14} />
+                    </button>
+                  )}
+                  <button
+                    onClick={() => onCopy(doc)}
+                    className="p-1 hover:bg-slate-800 rounded transition text-slate-400 hover:text-cyan-400"
+                    title="Copy"
+                  >
+                    <Copy size={14} />
+                  </button>
+                  <button
+                    onClick={() => onDelete(doc)}
+                    className="p-1 hover:bg-slate-800 rounded transition text-slate-400 hover:text-red-400"
+                    title="Delete"
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function JsonViewMode({
+  documents,
+  onEdit,
+  onDelete,
+  onCopy,
+}: {
+  documents: Document[];
+  onEdit?: (doc: Document) => void;
+  onDelete: (doc: Document) => void;
+  onCopy: (doc: Document) => void;
+}) {
+  const [expandedDocs, setExpandedDocs] = useState<Set<number>>(new Set());
+
+  return (
+    <div className="space-y-2 p-4">
+      {documents.map((doc, idx) => (
+        <div
+          key={idx}
+          className="bg-slate-900 rounded border border-slate-800 overflow-hidden"
+        >
+          <div className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-slate-800/50 transition">
+            <button
+              onClick={() => {
+                const next = new Set(expandedDocs);
+                next.has(idx) ? next.delete(idx) : next.add(idx);
+                setExpandedDocs(next);
+              }}
+              className="text-slate-400 hover:text-slate-200"
+            >
+              {expandedDocs.has(idx) ? '▼' : '▶'}
+            </button>
+            <span className="flex-1 text-sm text-slate-300 ml-2 font-mono">
+              Document {idx + 1}
+            </span>
+            <div className="flex items-center gap-2">
+              {onEdit && (
+                <button
+                  onClick={() => onEdit(doc)}
+                  className="p-1 hover:bg-slate-700 rounded transition text-slate-400 hover:text-amber-400"
+                  title="Edit"
+                >
+                  <Edit2 size={14} />
+                </button>
+              )}
+              <button
+                onClick={() => onCopy(doc)}
+                className="p-1 hover:bg-slate-700 rounded transition text-slate-400 hover:text-cyan-400"
+                title="Copy"
+              >
+                <Copy size={14} />
+              </button>
+              <button
+                onClick={() => onDelete(doc)}
+                className="p-1 hover:bg-slate-700 rounded transition text-slate-400 hover:text-red-400"
+                title="Delete"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          </div>
+          {expandedDocs.has(idx) && (
+            <div className="px-4 py-3 bg-slate-950 border-t border-slate-800">
+              <JsonViewer data={doc} />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function formatCellValue(value: any): string {
+  if (value === null || value === undefined) return '';
+  if (typeof value === 'object') return JSON.stringify(value).slice(0, 50) + '...';
+  return String(value).slice(0, 50);
+}

package/template/src/components/JsonViewer.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React from 'react';
+
+interface JsonViewerProps {
+  data: any;
+  collapsed?: boolean;
+}
+
+export function JsonViewer({ data, collapsed = false }: JsonViewerProps) {
+  const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
+
+  if (data === null) {
+    return <span className="text-slate-400">null</span>;
+  }
+
+  if (data === undefined) {
+    return <span className="text-slate-400">undefined</span>;
+  }
+
+  if (typeof data !== 'object') {
+    return <span className={getTypeColor(typeof data)}>{JSON.stringify(data)}</span>;
+  }
+
+  if (Array.isArray(data)) {
+    return (
+      <div>
+        <span
+          className="cursor-pointer text-emerald-400 select-none"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+        >
+          {isCollapsed ? '▶' : '▼'}
+        </span>
+        <span className="text-slate-400">[</span>
+        {!isCollapsed && (
+          <div className="ml-4 space-y-1">
+            {data.map((item, idx) => (
+              <div key={idx}>
+                <span className="text-slate-500">{idx}:</span>
+                <span className="ml-2">
+                  <JsonViewer data={item} />
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+        <span className="text-slate-400">]</span>
+        {isCollapsed && <span className="text-slate-500 ml-2">... ({data.length} items)</span>}
+      </div>
+    );
+  }
+
+  // Object
+  const keys = Object.keys(data);
+  return (
+    <div>
+      <span
+        className="cursor-pointer text-emerald-400 select-none"
+        onClick={() => setIsCollapsed(!isCollapsed)}
+      >
+        {isCollapsed ? '▶' : '▼'}
+      </span>
+      <span className="text-slate-400">{'{}'}</span>
+      {!isCollapsed && (
+        <div className="ml-4 space-y-1">
+          {keys.map((key) => (
+            <div key={key}>
+              <span className="text-cyan-400">"{key}"</span>
+              <span className="text-slate-400">: </span>
+              <span className="ml-2">
+                <JsonViewer data={data[key]} />
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+      {isCollapsed && <span className="text-slate-500 ml-2">... ({keys.length} fields)</span>}
+    </div>
+  );
+}
+
+function getTypeColor(type: string): string {
+  switch (type) {
+    case 'string':
+      return 'text-amber-400';
+    case 'number':
+      return 'text-blue-400';
+    case 'boolean':
+      return 'text-pink-400';
+    default:
+      return 'text-slate-400';
+  }
+}

package/template/src/components/Modal.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  isOpen: boolean;
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void;
+  onConfirm?: () => Promise<void> | void;
+  confirmText?: string;
+  isLoading?: boolean;
+}
+
+export function Modal({
+  isOpen,
+  title,
+  children,
+  onClose,
+  onConfirm,
+  confirmText = 'Confirm',
+  isLoading = false,
+}: ModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-slate-900 rounded-lg border border-slate-800 w-full max-w-md max-h-[90vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-slate-800">
+          <h2 className="text-lg font-semibold text-slate-100">{title}</h2>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-slate-800 rounded transition text-slate-400"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">{children}</div>
+
+        {/* Footer */}
+        <div className="flex gap-2 p-4 border-t border-slate-800">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-100 rounded transition disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          {onConfirm && (
+            <button
+              onClick={onConfirm}
+              disabled={isLoading}
+              className="flex-1 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded transition disabled:opacity-50 font-medium"
+            >
+              {isLoading ? 'Loading...' : confirmText}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface InputModalProps {
+  isOpen: boolean;
+  title: string;
+  label: string;
+  placeholder?: string;
+  defaultValue?: string;
+  onClose: () => void;
+  onConfirm: (value: string) => Promise<void>;
+}
+
+export function InputModal({
+  isOpen,
+  title,
+  label,
+  placeholder,
+  defaultValue = '',
+  onClose,
+  onConfirm,
+}: InputModalProps) {
+  const [value, setValue] = useState(defaultValue);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue, isOpen]);
+
+  const handleConfirm = async () => {
+    if (!value.trim()) return;
+    try {
+      setIsLoading(true);
+      await onConfirm(value.trim());
+      setValue('');
+      onClose();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      title={title}
+      onClose={onClose}
+      onConfirm={handleConfirm}
+      isLoading={isLoading}
+    >
+      <div className="space-y-4">
+        <label className="block">
+          <span className="block text-sm font-medium text-slate-300 mb-2">{label}</span>
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            placeholder={placeholder}
+            className="w-full bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
+            disabled={isLoading}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') handleConfirm();
+            }}
+          />
+        </label>
+      </div>
+    </Modal>
+  );
+}
+
+interface JsonInputModalProps {
+  isOpen: boolean;
+  title: string;
+  defaultValue?: string;
+  onClose: () => void;
+  onConfirm: (value: Record<string, any>) => Promise<void>;
+}
+
+export function JsonInputModal({
+  isOpen,
+  title,
+  defaultValue = '{}',
+  onClose,
+  onConfirm,
+}: JsonInputModalProps) {
+  const [value, setValue] = useState(defaultValue);
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    setValue(defaultValue);
+    setError('');
+  }, [defaultValue, isOpen]);
+
+  const handleConfirm = async () => {
+    try {
+      setError('');
+      const parsed = JSON.parse(value);
+      setIsLoading(true);
+      await onConfirm(parsed);
+      setValue('{}');
+      onClose();
+    } catch (err) {
+      setError(`Invalid JSON: ${err}`);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      title={title}
+      onClose={onClose}
+      onConfirm={handleConfirm}
+      isLoading={isLoading}
+    >
+      <div className="space-y-3">
+        <textarea
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          className="w-full h-64 bg-slate-800 border border-slate-700 rounded px-3 py-2 text-slate-100 font-mono text-sm placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 resize-none"
+          disabled={isLoading}
+        />
+        {error && <p className="text-sm text-red-400">{error}</p>}
+      </div>
+    </Modal>
+  );
+}

package/template/src/components/Navbar.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import React, { useState } from 'react';
+import { LogOut, Settings, Zap } from 'lucide-react';
+import { useAppStore } from '@/store';
+
+interface NavbarProps {
+  onLogout: () => void;
+  onSettings?: () => void;
+}
+
+export function Navbar({ onLogout, onSettings }: NavbarProps) {
+  const { currentDatabase, selectedCollection, isLoading } = useAppStore();
+  const [connectionStatus] = useState(true);
+
+  return (
+    <div className="h-16 bg-slate-950 border-b border-slate-800 flex items-center justify-between px-6">
+      {/* Left: Breadcrumb */}
+      <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2">
+          <div
+            className={`w-2.5 h-2.5 rounded-full transition ${
+              connectionStatus ? 'bg-emerald-500' : 'bg-red-500'
+            }`}
+          />
+          <span className="text-slate-400 text-sm">
+            {connectionStatus ? 'Connected' : 'Disconnected'}
+          </span>
+        </div>
+
+        {currentDatabase && (
+          <>
+            <span className="text-slate-600">/</span>
+            <span className="text-slate-300 font-medium">{currentDatabase}</span>
+
+            {selectedCollection && (
+              <>
+                <span className="text-slate-600">/</span>
+                <span className="text-slate-300 font-medium">{selectedCollection}</span>
+              </>
+            )}
+          </>
+        )}
+      </div>
+
+      {/* Right: Actions */}
+      <div className="flex items-center gap-3">
+        {isLoading && (
+          <div className="flex items-center gap-2 text-slate-400">
+            <Zap size={16} className="animate-spin" />
+            <span className="text-sm">Loading...</span>
+          </div>
+        )}
+
+        {onSettings && (
+          <button
+            onClick={onSettings}
+            className="p-2 hover:bg-slate-800 rounded transition text-slate-400 hover:text-slate-200"
+            title="Settings"
+          >
+            <Settings size={18} />
+          </button>
+        )}
+
+        <button
+          onClick={onLogout}
+          className="flex items-center gap-2 px-3 py-2 text-slate-400 hover:text-red-400 hover:bg-slate-800 rounded transition"
+          title="Logout"
+        >
+          <LogOut size={16} />
+          <span className="text-sm">Logout</span>
+        </button>
+      </div>
+    </div>
+  );
+}