create-lego-one 2.0.10 → 2.0.12

package/template/host/src/kernel/shared-state/bridge.ts

@@ -0,0 +1,31 @@
+import { useGlobalKernelState } from './store';
+import { registerPluginChannels } from '../channels/plugin-hooks';
+
+// Declare window type for shared state
+declare global {
+  interface Window {
+    __LEGO_KERNEL_STATE__?: {
+      useGlobalKernelState: typeof useGlobalKernelState;
+    };
+    __LEGO_PLUGIN_CHANNELS__?: {
+      toast: (data: any) => void;
+    };
+  }
+}
+
+// Register shared state to window for plugin access
+export function registerSharedState() {
+  if (typeof window !== 'undefined') {
+    window.__LEGO_KERNEL_STATE__ = {
+      useGlobalKernelState,
+    };
+
+    // Also register plugin channels helper
+    registerPluginChannels();
+  }
+}
+
+// Hook for plugins to access kernel state
+export function useKernelState() {
+  return useGlobalKernelState;
+}

package/template/host/src/kernel/shared-state/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './store';
+export * from './bridge';

package/template/host/src/kernel/shared-state/store.ts

@@ -0,0 +1,62 @@
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import type { GlobalKernelState, Theme, User, Organization, Toast } from './types';
+
+const generateId = () => Math.random().toString(36).substring(2, 9);
+
+export const useGlobalKernelState = create<GlobalKernelState>()(
+  devtools(
+    persist(
+      (set) => ({
+        // Initial state
+        user: null,
+        token: null,
+        isAuthenticated: false,
+        organization: null,
+        theme: 'system',
+        sidebarOpen: true,
+        mobileMenuOpen: false,
+        toasts: [],
+        isLoading: false,
+
+        // Auth actions
+        setUser: (user: User | null) => set({ user, isAuthenticated: !!user }),
+        setToken: (token: string | null) => set({ token }),
+        setOrganization: (org: Organization | null) => set({ organization: org }),
+        clearAuth: () => set({
+          user: null,
+          token: null,
+          isAuthenticated: false,
+          organization: null,
+        }),
+
+        // UI actions
+        setTheme: (theme: Theme) => set({ theme }),
+        toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+        setSidebarOpen: (open: boolean) => set({ sidebarOpen: open }),
+        toggleMobileMenu: () => set((state) => ({ mobileMenuOpen: !state.mobileMenuOpen })),
+        setMobileMenuOpen: (open: boolean) => set({ mobileMenuOpen: open }),
+
+        // Toast actions
+        addToast: (toast: Omit<Toast, 'id'>) => set((state) => ({
+          toasts: [...state.toasts, { ...toast, id: generateId() }],
+        })),
+        removeToast: (id: string) => set((state) => ({
+          toasts: state.toasts.filter((t) => t.id !== id),
+        })),
+
+        // Loading actions
+        setIsLoading: (isLoading: boolean) => set({ isLoading }),
+      }),
+      {
+        name: 'lego-kernel-state',
+        partialize: (state) => ({
+          theme: state.theme,
+          sidebarOpen: state.sidebarOpen,
+          token: state.token,
+        }),
+      }
+    ),
+    { name: 'LegoKernelState' }
+  )
+);

package/template/host/src/kernel/shared-state/types.ts

@@ -0,0 +1,60 @@
+export interface User {
+  id: string;
+  email: string;
+  name: string;
+  avatar?: string;
+  role?: string;
+  organizationId?: string;
+}
+
+export interface Organization {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export interface AuthState {
+  user: User | null;
+  token: string | null;
+  isAuthenticated: boolean;
+  organization: Organization | null;
+}
+
+export type Theme = 'light' | 'dark' | 'system';
+
+export interface UIState {
+  theme: Theme;
+  sidebarOpen: boolean;
+  mobileMenuOpen: boolean;
+}
+
+export interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: 'default' | 'destructive' | 'success';
+}
+
+export interface GlobalKernelState extends AuthState, UIState {
+  // Auth actions
+  setUser: (user: User | null) => void;
+  setToken: (token: string | null) => void;
+  setOrganization: (org: Organization | null) => void;
+  clearAuth: () => void;
+
+  // UI actions
+  setTheme: (theme: Theme) => void;
+  toggleSidebar: () => void;
+  setSidebarOpen: (open: boolean) => void;
+  toggleMobileMenu: () => void;
+  setMobileMenuOpen: (open: boolean) => void;
+
+  // Toast actions
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, 'id'>) => void;
+  removeToast: (id: string) => void;
+
+  // Loading state
+  isLoading: boolean;
+  setIsLoading: (loading: boolean) => void;
+}

package/template/host/src/kernel/use-migrations.ts

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import { getPocketBaseAdmin } from '../lib/pocketbase';
+import { runMigrations } from '../lib/pocketbase/migrations';
+import { collections } from '../lib/pocketbase/collections';
+import { seedDatabase } from '../lib/pocketbase/seed';
+
+interface MigrationState {
+  status: 'pending' | 'running' | 'success' | 'error';
+  message: string | null;
+}
+
+export function useMigrations() {
+  const [state, setState] = useState<MigrationState>({
+    status: 'pending',
+    message: null,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      if (cancelled) return;
+
+      setState({ status: 'running', message: 'Running database migrations...' });
+
+      try {
+        const pb = getPocketBaseAdmin();
+
+        // Authenticate as admin
+        await pb.admins.authWithPassword(
+          import.meta.env.VITE_POCKETBASE_ADMIN_EMAIL || 'admin@example.com',
+          import.meta.env.VITE_POCKETBASE_ADMIN_PASSWORD || 'admin123'
+        );
+
+        if (cancelled) return;
+
+        // Run migrations
+        await runMigrations(pb, collections);
+
+        if (cancelled) return;
+
+        // Seed database (only if in development or explicitly requested)
+        if (import.meta.env.VITE_SEED_ADMIN_EMAIL) {
+          setState({ status: 'running', message: 'Seeding database...' });
+
+          await seedDatabase(pb, {
+            adminEmail: import.meta.env.VITE_SEED_ADMIN_EMAIL,
+            adminPassword: import.meta.env.VITE_SEED_ADMIN_PASSWORD || 'admin123',
+            adminName: import.meta.env.VITE_SEED_ADMIN_NAME || 'Super Admin',
+            orgName: import.meta.env.VITE_SEED_ORG_NAME || 'Demo Organization',
+          });
+        }
+
+        if (cancelled) return;
+
+        setState({ status: 'success', message: 'Database ready!' });
+      } catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        setState({ status: 'error', message });
+        console.error('[Migrations] Error:', error);
+      }
+    }
+
+    run();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return state;
+}

package/template/host/src/layout/MobileMenu.tsx

@@ -0,0 +1,61 @@
+import { NavLink } from '@modern-js/runtime/router';
+import { useGlobalKernelState } from '../kernel/shared-state';
+import {
+  Home,
+  LayoutDashboard,
+  Settings,
+  CheckSquare,
+  X,
+} from 'lucide-react';
+import { cn } from '../kernel/lib/utils';
+
+const navItems = [
+  { to: '/', icon: Home, label: 'Home' },
+  { to: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/todos', icon: CheckSquare, label: 'Todos' },
+  { to: '/settings', icon: Settings, label: 'Settings' },
+];
+
+export function MobileMenu() {
+  const { mobileMenuOpen, setMobileMenuOpen } = useGlobalKernelState();
+
+  if (!mobileMenuOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 lg:hidden">
+      <div className="fixed inset-y-0 right-0 w-64 border-l bg-background p-6 shadow-lg">
+        <div className="flex items-center justify-between mb-8">
+          <h2 className="text-lg font-semibold">Menu</h2>
+          <button
+            onClick={() => setMobileMenuOpen(false)}
+            className="rounded-lg p-2 text-muted-foreground hover:bg-muted"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        <nav className="space-y-1">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              onClick={() => setMobileMenuOpen(false)}
+              className={({ isActive }) =>
+                cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                )
+              }
+            >
+              <item.icon className="h-5 w-5" />
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+      </div>
+    </div>
+  );
+}

package/template/host/src/layout/Shell.tsx

@@ -0,0 +1,42 @@
+import { Outlet } from '@modern-js/runtime/router';
+import { Sidebar } from './Sidebar';
+import { Topbar } from './Topbar';
+import { MobileMenu } from './MobileMenu';
+import { useGlobalKernelState } from '../kernel/shared-state';
+
+export function Shell({ children }: { children?: React.ReactNode }) {
+  const { sidebarOpen, mobileMenuOpen } = useGlobalKernelState();
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Mobile menu overlay */}
+      {mobileMenuOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm lg:hidden"
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Sidebar */}
+      <Sidebar />
+
+      {/* Main content area */}
+      <div
+        className={`transition-all duration-300 lg:pl-64 ${
+          sidebarOpen ? 'lg:pl-64' : 'lg:pl-16'
+        }`}
+      >
+        {/* Topbar */}
+        <Topbar />
+
+        {/* Page content */}
+        <main className="min-h-[calc(100vh-4rem)] p-6">
+          {children || <Outlet />}
+        </main>
+      </div>
+
+      {/* Mobile menu */}
+      <MobileMenu />
+    </div>
+  );
+}

package/template/host/src/layout/Sidebar.tsx

@@ -0,0 +1,178 @@
+import { Link, NavLink } from '@modern-js/runtime/router';
+import { useGlobalKernelState } from '../kernel/shared-state';
+import { Slot } from '../kernel/plugins/Slot';
+import { SlotName } from '../kernel/plugins/types';
+import {
+  Home,
+  LayoutDashboard,
+  Settings,
+  ChevronLeft,
+  ChevronRight,
+  CheckSquare,
+} from 'lucide-react';
+import { cn } from '../kernel/lib/utils';
+
+const navItems = [
+  { to: '/', icon: Home, label: 'Home' },
+  { to: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/todos', icon: CheckSquare, label: 'Todos' },
+];
+
+export function Sidebar() {
+  const { sidebarOpen, toggleSidebar, mobileMenuOpen } = useGlobalKernelState();
+
+  return (
+    <>
+      {/* Mobile sidebar */}
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-50 w-64 transform border-r bg-card transition-transform duration-300 lg:hidden',
+          mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+      >
+        {/* Slot: sidebar top */}
+        <Slot name={SlotName.SIDEBAR_TOP} className="border-b p-4" />
+
+        <div className="flex h-16 items-center justify-between border-b px-6">
+          <Link to="/" className="flex items-center gap-2 font-semibold">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+              L
+            </div>
+            <span>Lego-One</span>
+          </Link>
+        </div>
+
+        {/* Slot: sidebar nav (before nav items) */}
+        <Slot name={SlotName.SIDEBAR_NAV} />
+
+        <nav className="space-y-1 p-4">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) =>
+                cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                )
+              }
+            >
+              <item.icon className="h-5 w-5" />
+              {item.label}
+            </NavLink>
+          ))}
+        </nav>
+
+        {/* Slot: sidebar bottom */}
+        <Slot name={SlotName.SIDEBAR_BOTTOM} className="absolute bottom-0 left-0 right-0 border-t p-4" />
+
+        <div className="absolute bottom-0 left-0 right-0 border-t p-4">
+          <NavLink
+            to="/settings"
+            className={({ isActive }) =>
+              cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )
+            }
+          >
+            <Settings className="h-5 w-5" />
+            Settings
+          </NavLink>
+        </div>
+      </aside>
+
+      {/* Desktop sidebar */}
+      <aside
+        className={cn(
+          'fixed inset-y-0 left-0 z-30 hidden border-r bg-card transition-all duration-300 lg:block',
+          sidebarOpen ? 'w-64' : 'w-16'
+        )}
+      >
+        {/* Slot: sidebar top (desktop) */}
+        <Slot name={SlotName.SIDEBAR_TOP} className="border-b p-4" />
+
+        <div className="flex h-16 items-center justify-between border-b px-4">
+          {sidebarOpen ? (
+            <Link to="/" className="flex items-center gap-2 font-semibold">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                L
+              </div>
+              <span>Lego-One</span>
+            </Link>
+          ) : (
+            <Link to="/" className="flex items-center justify-center">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                L
+              </div>
+            </Link>
+          )}
+
+          <button
+            onClick={toggleSidebar}
+            className="rounded-lg p-1.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+          >
+            {sidebarOpen ? (
+              <ChevronLeft className="h-5 w-5" />
+            ) : (
+              <ChevronRight className="h-5 w-5" />
+            )}
+          </button>
+        </div>
+
+        {/* Slot: sidebar nav (desktop) */}
+        <Slot name={SlotName.SIDEBAR_NAV} />
+
+        <nav className="space-y-1 p-2">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
+              className={({ isActive }) =>
+                cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                  !sidebarOpen && 'justify-center',
+                  isActive
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                )
+              }
+              title={!sidebarOpen ? item.label : undefined}
+            >
+              <item.icon className="h-5 w-5 flex-shrink-0" />
+              {sidebarOpen && <span>{item.label}</span>}
+            </NavLink>
+          ))}
+        </nav>
+
+        {/* Slot: sidebar bottom (desktop) */}
+        <Slot name={SlotName.SIDEBAR_BOTTOM} className="absolute bottom-0 left-0 right-0 border-t p-2" />
+
+        <div className="absolute bottom-0 left-0 right-0 border-t p-2">
+          <NavLink
+            to="/settings"
+            className={({ isActive }) =>
+              cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                !sidebarOpen && 'justify-center',
+                isActive
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )
+            }
+            title={!sidebarOpen ? 'Settings' : undefined}
+          >
+            <Settings className="h-5 w-5 flex-shrink-0" />
+            {sidebarOpen && <span>Settings</span>}
+          </NavLink>
+        </div>
+      </aside>
+    </>
+  );
+}

package/template/host/src/layout/Topbar.tsx

@@ -0,0 +1,50 @@
+import { useGlobalKernelState } from '../kernel/shared-state';
+import { Menu, Bell } from 'lucide-react';
+import { LogoutButton } from '../kernel/auth/components/LogoutButton';
+import { useAuth } from '../kernel/auth/hooks';
+import { OrganizationSelector } from '../kernel/rbac/components/OrganizationSelector';
+import { Slot } from '../kernel/plugins/Slot';
+import { SlotName } from '../kernel/plugins/types';
+
+export function Topbar() {
+  const { toggleMobileMenu } = useGlobalKernelState();
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-6">
+      {/* Mobile menu button */}
+      <button
+        onClick={toggleMobileMenu}
+        className="lg:hidden rounded-lg p-2 text-muted-foreground hover:bg-muted"
+      >
+        <Menu className="h-5 w-5" />
+      </button>
+
+      {/* Slot: topbar left */}
+      <Slot name={SlotName.TOPBAR_LEFT} className="flex items-center gap-2" />
+
+      {/* Organization selector */}
+      {isAuthenticated && <OrganizationSelector />}
+
+      {/* Slot: topbar center */}
+      <Slot name={SlotName.TOPBAR_CENTER} className="flex-1" />
+
+      {/* Breadcrumb/spacer */}
+      <div className="flex-1" />
+
+      {/* Slot: topbar right */}
+      <Slot name={SlotName.TOPBAR_RIGHT} className="flex items-center gap-2" />
+
+      {/* Actions */}
+      <div className="flex items-center gap-2">
+        {isAuthenticated && (
+          <button className="rounded-lg p-2 text-muted-foreground hover:bg-muted">
+            <Bell className="h-5 w-5" />
+          </button>
+        )}
+
+        {isAuthenticated && <LogoutButton />}
+      </div>
+    </header>
+  );
+}

package/template/host/src/layout/index.ts

@@ -0,0 +1,4 @@
+export * from './Shell';
+export * from './Sidebar';
+export * from './Topbar';
+export * from './MobileMenu';

package/template/host/src/lib/pocketbase/client.ts

@@ -0,0 +1,38 @@
+import PocketBase from 'pocketbase';
+
+let pbInstance: PocketBase | null = null;
+
+export function getPocketBase(): PocketBase {
+  if (pbInstance) {
+    return pbInstance;
+  }
+
+  const pb = new PocketBase(import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090');
+
+  // Auto-authenticate as admin for server-side operations
+  if (typeof window === 'undefined') {
+    pb.admins
+      .authWithPassword(
+        import.meta.env.VITE_POCKETBASE_ADMIN_EMAIL || 'admin@example.com',
+        import.meta.env.VITE_POCKETBASE_ADMIN_PASSWORD || 'admin123'
+      )
+      .catch((err) => {
+        console.error('Failed to authenticate with PocketBase:', err);
+      });
+  }
+
+  pbInstance = pb;
+  return pb;
+}
+
+export function getPocketBaseAdmin(): PocketBase {
+  const pb = new PocketBase(import.meta.env.VITE_POCKETBASE_URL || 'http://127.0.0.1:8090');
+
+  // This must be called with admin credentials
+  return pb;
+}
+
+// Reset singleton (useful for testing)
+export function resetPocketBase(): void {
+  pbInstance = null;
+}