@liorandb/studio 0.0.1

package/bin/index.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+import fs from "fs";
+import path from "path";
+import { execSync } from "child_process";
+
+const target = process.cwd();
+const templateDir = new URL("../template", import.meta.url).pathname;
+
+console.log("🚀 Creating LioranDB Studio...\n");
+
+fs.cpSync(templateDir, target, { recursive: true });
+
+console.log("📦 Installing dependencies...\n");
+
+execSync("npm install", { stdio: "inherit" });
+
+console.log("\n🔥 Starting dev server...\n");
+
+execSync("npm run dev", { stdio: "inherit" });

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@liorandb/studio",
+  "version": "0.0.1",
+  "bin": {
+    "liorandb-studio": "./bin/index.js"
+  },
+  "files": ["bin", "template"],
+  "type": "module",
+  "private": false
+}

package/template/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/template/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/app/globals.css

@@ -0,0 +1,73 @@
+@import "tailwindcss";
+
+:root {
+  --background: #0f172a;
+  --foreground: #f1f5f9;
+  --primary: #10b981;
+  --primary-dark: #059669;
+  --secondary: #06b6d4;
+  --destructive: #ef4444;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+html {
+  color-scheme: dark;
+}
+
+body {
+  background-color: #0f172a;
+  color: #f1f5f9;
+  overflow: hidden;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #64748b;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
+
+/* Selection */
+::selection {
+  background-color: #10b98140;
+  color: #f1f5f9;
+}
+
+/* Smooth transitions */
+@supports (supports: selector(:has(*))) {
+  html {
+    scroll-behavior: smooth;
+  }
+}

package/template/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { ToastProvider } from "@/components/Toast";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "LioranDB Studio",
+  description: "MongoDB Compass-like UI for LioranDB databases",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <ToastProvider>
+          {children}
+        </ToastProvider>
+      </body>
+    </html>
+  );
+}

package/template/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>
+  );
+}

package/template/app/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAppStore } from '@/store';
+
+export default function Home() {
+  const router = useRouter();
+  const { loadFromStorage, isLoggedIn } = useAppStore();
+
+  useEffect(() => {
+    loadFromStorage();
+    
+    // Check localStorage for existing session
+    const hasToken = typeof window !== 'undefined' && !!localStorage.getItem('liorandb_token');
+    
+    if (hasToken) {
+      router.push('/dashboard');
+    } else {
+      router.push('/login');
+    }
+  }, [router, loadFromStorage]);
+
+  return (
+    <div className="h-screen bg-slate-950 flex items-center justify-center">
+      <div className="text-center space-y-4">
+        <div className="text-4xl">⚡</div>
+        <p className="text-slate-400">Connecting to LioranDB...</p>
+      </div>
+    </div>
+  );
+}