@liorandb/studio 0.0.1

package/template/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "liorandb-studio",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@liorandb/driver": "^1.0.4",
+    "@monaco-editor/react": "^4.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/template/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/template/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

package/template/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

package/template/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/template/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/template/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/template/src/app/dashboard/page.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAppStore } from '@/store';
+import { LioranDBService } from '@/lib/lioran';
+import { Sidebar } from '@/components/Sidebar';
+import { Navbar } from '@/components/Navbar';
+import { DocumentViewer } from '@/components/DocumentViewer';
+import { QueryEditor } from '@/components/QueryEditor';
+import { InputModal, JsonInputModal } from '@/components/Modal';
+import { useToast } from '@/components/Toast';
+import { Document } from '@/types';
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const { addToast } = useToast();
+
+  const {
+    isLoggedIn,
+    currentDatabase,
+    selectedCollection,
+    logout,
+    setCurrentDatabase,
+    setSelectedCollection,
+    setDatabases,
+    setCollections,
+  } = useAppStore();
+
+  // Modal states
+  const [createDbModal, setCreateDbModal] = useState(false);
+  const [createColModal, setCreateColModal] = useState(false);
+  const [addDocModal, setAddDocModal] = useState(false);
+  const [editDocModal, setEditDocModal] = useState(false);
+  const [editingDoc, setEditingDoc] = useState<Document | null>(null);
+
+  // Check authentication
+  useEffect(() => {
+    if (!isLoggedIn) {
+      router.push('/login');
+    }
+  }, [isLoggedIn, router]);
+
+  // Load databases on mount
+  useEffect(() => {
+    if (isLoggedIn) {
+      loadDatabases();
+    }
+  }, [isLoggedIn]);
+
+  // Load collections when database changes
+  useEffect(() => {
+    if (currentDatabase) {
+      loadCollections(currentDatabase);
+    }
+  }, [currentDatabase]);
+
+  async function loadDatabases() {
+    try {
+      const databases = await LioranDBService.listDatabases();
+      setDatabases(databases);
+    } catch (error) {
+      addToast(`Error loading databases: ${error}`, 'error');
+    }
+  }
+
+  async function loadCollections(dbName: string) {
+    try {
+      const collections = await LioranDBService.listCollections(dbName);
+      setCollections(dbName, collections);
+    } catch (error) {
+      addToast(`Error loading collections: ${error}`, 'error');
+    }
+  }
+
+  async function handleCreateDatabase(name: string) {
+    try {
+      await LioranDBService.createDatabase(name);
+      await loadDatabases();
+      setCurrentDatabase(name);
+      addToast(`Database "${name}" created`, 'success');
+    } catch (error) {
+      addToast(`Error creating database: ${error}`, 'error');
+    }
+  }
+
+  async function handleCreateCollection(name: string) {
+    if (!currentDatabase) return;
+    try {
+      await LioranDBService.createCollection(currentDatabase, name);
+      await loadCollections(currentDatabase);
+      setSelectedCollection(name);
+      addToast(`Collection "${name}" created`, 'success');
+    } catch (error) {
+      addToast(`Error creating collection: ${error}`, 'error');
+    }
+  }
+
+  async function handleAddDocument(doc: Record<string, any>) {
+    if (!currentDatabase || !selectedCollection) return;
+    try {
+      await LioranDBService.insertOne(currentDatabase, selectedCollection, doc);
+      addToast('Document added', 'success');
+      setAddDocModal(false);
+      // Reload documents
+      const docViewer = document.querySelector('[data-reload-documents]');
+      if (docViewer) {
+        const event = new CustomEvent('reload');
+        docViewer.dispatchEvent(event);
+      }
+    } catch (error) {
+      addToast(`Error adding document: ${error}`, 'error');
+    }
+  }
+
+  async function handleLogout() {
+    if (confirm('Are you sure you want to logout?')) {
+      logout();
+      LioranDBService.disconnect();
+      router.push('/login');
+    }
+  }
+
+  return (
+    <div className="h-screen flex flex-col bg-slate-950">
+      {/* Navbar */}
+      <Navbar onLogout={handleLogout} />
+
+      {/* Main Content */}
+      <div className="flex-1 flex overflow-hidden">
+        {/* Sidebar */}
+        <Sidebar
+          onDatabaseSelect={setCurrentDatabase}
+          onCollectionSelect={(db, col) => {
+            setCurrentDatabase(db);
+            setSelectedCollection(col);
+          }}
+          onCreateDatabase={() => setCreateDbModal(true)}
+          onCreateCollection={() => setCreateColModal(true)}
+        />
+
+        {/* Workspace */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {!currentDatabase ? (
+            // Empty State
+            <div className="flex-1 flex items-center justify-center text-slate-400">
+              <div className="text-center">
+                <div className="text-4xl mb-4">📦</div>
+                <p className="text-lg">No database selected</p>
+                <p className="text-sm text-slate-500">Create or select a database to get started</p>
+              </div>
+            </div>
+          ) : !selectedCollection ? (
+            // Collection Selection State
+            <div className="flex-1 flex items-center justify-center text-slate-400">
+              <div className="text-center">
+                <div className="text-4xl mb-4">📚</div>
+                <p className="text-lg">No collection selected</p>
+                <p className="text-sm text-slate-500">Select or create a collection to view documents</p>
+              </div>
+            </div>
+          ) : (
+            // Two Panel Layout
+            <div className="flex-1 flex overflow-hidden gap-4 p-4 bg-slate-900">
+              {/* Left: Document Viewer */}
+              <div className="flex-1 bg-slate-950 rounded-lg border border-slate-800 overflow-hidden flex flex-col">
+                <DocumentViewer
+                  onAddDocument={() => setAddDocModal(true)}
+                  onEditDocument={(doc) => {
+                    setEditingDoc(doc);
+                    setEditDocModal(true);
+                  }}
+                />
+              </div>
+
+              {/* Right: Query Editor */}
+              <div className="w-96 bg-slate-950 rounded-lg border border-slate-800 overflow-hidden">
+                <QueryEditor />
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Modals */}
+      <InputModal
+        isOpen={createDbModal}
+        title="Create Database"
+        label="Database Name"
+        placeholder="mydb"
+        onClose={() => setCreateDbModal(false)}
+        onConfirm={handleCreateDatabase}
+      />
+
+      <InputModal
+        isOpen={createColModal}
+        title="Create Collection"
+        label="Collection Name"
+        placeholder="users"
+        onClose={() => setCreateColModal(false)}
+        onConfirm={handleCreateCollection}
+      />
+
+      <JsonInputModal
+        isOpen={addDocModal}
+        title="Add Document"
+        defaultValue='{}'
+        onClose={() => setAddDocModal(false)}
+        onConfirm={handleAddDocument}
+      />
+
+      <JsonInputModal
+        isOpen={editDocModal}
+        title="Edit Document"
+        defaultValue={editingDoc ? JSON.stringify(editingDoc, null, 2) : '{}'}
+        onClose={() => {
+          setEditDocModal(false);
+          setEditingDoc(null);
+        }}
+        onConfirm={async (doc) => {
+          if (!currentDatabase || !selectedCollection || !editingDoc) return;
+          try {
+            const _id = editingDoc._id;
+            await LioranDBService.updateMany(
+              currentDatabase,
+              selectedCollection,
+              { _id },
+              { $set: doc }
+            );
+            addToast('Document updated', 'success');
+            setEditDocModal(false);
+            setEditingDoc(null);
+          } catch (error) {
+            addToast(`Error updating document: ${error}`, 'error');
+          }
+        }}
+      />
+    </div>
+  );
+}

package/template/src/app/login/page.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAppStore } from '@/store';
+import { LioranDBService } from '@/lib/lioran';
+import { parseConnectionUri } from '@/lib/utils';
+import { useToast } from '@/components/Toast';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const { addToast } = useToast();
+  const { setLoggedIn } = useAppStore();
+
+  const [uri, setUri] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const [username, setUsername] = useState('admin');
+  const [password, setPassword] = useState('');
+  const [host, setHost] = useState('localhost');
+  const [port, setPort] = useState('4000');
+
+  useEffect(() => {
+    // Load saved URI from localStorage
+    const savedUri = localStorage.getItem('liorandb_uri');
+    const savedToken = localStorage.getItem('liorandb_token');
+
+    if (savedUri && savedToken) {
+      // Try to auto-login
+      attemptAutoLogin(savedUri, savedToken);
+    }
+  }, []);
+
+  async function attemptAutoLogin(uri: string, token: string) {
+    try {
+      setIsLoading(true);
+      LioranDBService.initialize(uri);
+
+      // Test connection
+      const databases = await LioranDBService.listDatabases();
+
+      setLoggedIn(true, token, uri);
+      useAppStore.setState({ databases });
+      addToast('Connected successfully', 'success');
+      router.push('/dashboard');
+    } catch (error) {
+      localStorage.removeItem('liorandb_token');
+      localStorage.removeItem('liorandb_uri');
+      addToast(`Connection failed: ${error}`, 'error');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault();
+
+    const loginUri = showAdvanced
+      ? `lioran://${username}:${password}@${host}:${port}`
+      : uri;
+
+    if (!loginUri) {
+      addToast('Please enter a connection URI', 'warning');
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+
+      // Validate URI format
+      try {
+        parseConnectionUri(loginUri);
+      } catch (err) {
+        addToast(String(err), 'error');
+        return;
+      }
+
+      // Initialize client
+      await LioranDBService.initialize(loginUri);
+
+      // List databases to verify connection
+      const databases = await LioranDBService.listDatabases();
+
+      // Store session (in a real app, you'd get a token from the server)
+      const token = `token_${Date.now()}`;
+
+      setLoggedIn(true, token, loginUri);
+      useAppStore.setState({ databases });
+
+      addToast('Connected successfully', 'success');
+      router.push('/dashboard');
+    } catch (error) {
+      addToast(`Login failed: ${error}`, 'error');
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-800 flex items-center justify-center p-4">
+      {/* Background Effect */}
+      <div className="absolute inset-0 overflow-hidden">
+        <div className="absolute -top-40 -right-40 w-80 h-80 bg-emerald-500/5 rounded-full blur-3xl" />
+        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-cyan-500/5 rounded-full blur-3xl" />
+      </div>
+
+      {/* Login Card */}
+      <div className="relative w-full max-w-md">
+        <div className="bg-slate-900/80 backdrop-blur border border-slate-800 rounded-xl shadow-2xl overflow-hidden">
+          {/* Header */}
+          <div className="px-8 pt-8 pb-6 border-b border-slate-800">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="w-10 h-10 bg-gradient-to-br from-emerald-400 to-cyan-400 rounded-lg flex items-center justify-center">
+                <span className="text-slate-900 font-bold text-lg">⚡</span>
+              </div>
+              <h1 className="text-2xl font-bold text-slate-100">LioranDB</h1>
+            </div>
+            <p className="text-slate-400 text-sm">Database Studio</p>
+          </div>
+
+          {/* Form */}
+          <form onSubmit={handleLogin} className="px-8 py-8 space-y-6">
+            {!showAdvanced ? (
+              // Quick Connect
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  Connection URI
+                </label>
+                <input
+                  type="text"
+                  value={uri}
+                  onChange={(e) => setUri(e.target.value)}
+                  placeholder="lioran://admin:password@localhost:4000"
+                  className="w-full bg-slate-800/50 border border-slate-700 rounded-lg px-4 py-3 text-slate-100 placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition"
+                  disabled={isLoading}
+                />
+              </div>
+            ) : (
+              // Advanced Connect
+              <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Username
+                  </label>
+                  <input
+                    type="text"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    className="w-full bg-slate-800/50 border border-slate-700 rounded-lg px-4 py-3 text-slate-100 focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition"
+                    disabled={isLoading}
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-sm font-medium text-slate-300 mb-2">
+                    Password
+                  </label>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full bg-slate-800/50 border border-slate-700 rounded-lg px-4 py-3 text-slate-100 focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition"
+                    disabled={isLoading}
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      Host
+                    </label>
+                    <input
+                      type="text"
+                      value={host}
+                      onChange={(e) => setHost(e.target.value)}
+                      className="w-full bg-slate-800/50 border border-slate-700 rounded-lg px-4 py-3 text-slate-100 focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition"
+                      disabled={isLoading}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-slate-300 mb-2">
+                      Port
+                    </label>
+                    <input
+                      type="text"
+                      value={port}
+                      onChange={(e) => setPort(e.target.value)}
+                      className="w-full bg-slate-800/50 border border-slate-700 rounded-lg px-4 py-3 text-slate-100 focus:outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 transition"
+                      disabled={isLoading}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Toggle Advanced */}
+            <button
+              type="button"
+              onClick={() => setShowAdvanced(!showAdvanced)}
+              className="text-sm text-emerald-400 hover:text-emerald-300 transition"
+              disabled={isLoading}
+            >
+              {showAdvanced ? '← Back to Quick Connect' : 'Advanced Options →'}
+            </button>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={isLoading || (!showAdvanced && !uri) || (showAdvanced && !password)}
+              className="w-full bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-700 hover:to-emerald-600 text-white font-semibold py-3 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? 'Connecting...' : 'Connect to LioranDB'}
+            </button>
+          </form>
+
+          {/* Footer */}
+          <div className="px-8 py-6 bg-slate-800/30 border-t border-slate-800">
+            <p className="text-xs text-slate-400 text-center">
+              Default: <code className="bg-slate-900 px-2 py-1 rounded">lioran://admin:password@localhost:4000</code>
+            </p>
+          </div>
+        </div>
+
+        {/* Beta Badge */}
+        <div className="absolute -top-3 right-4 bg-amber-500 text-slate-900 px-3 py-1 rounded-full text-xs font-semibold">
+          BETA
+        </div>
+      </div>
+    </div>
+  );
+}