@lumerahq/cli 0.7.0

package/templates/default/src/components/Sidebar.tsx

@@ -0,0 +1,84 @@
+import { Link, useRouterState } from '@tanstack/react-router';
+import { LayoutDashboard, Settings, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '@lumerahq/ui/lib';
+
+type NavItem = {
+  to: string;
+  label: string;
+  icon: React.ElementType;
+};
+
+const navItems: NavItem[] = [
+  { to: '/', label: 'Dashboard', icon: LayoutDashboard },
+  { to: '/settings', label: 'Settings', icon: Settings },
+];
+
+export function Sidebar() {
+  const [collapsed, setCollapsed] = useState(false);
+  const routerState = useRouterState();
+  const currentPath = routerState.location.pathname;
+
+  const isActive = (path: string) => {
+    if (path === '/') return currentPath === '/';
+    return currentPath.startsWith(path);
+  };
+
+  return (
+    <aside
+      className={cn(
+        'flex flex-col bg-slate-900 text-white border-r border-slate-800 transition-all duration-200',
+        collapsed ? 'w-16' : 'w-56'
+      )}
+    >
+      {/* Logo */}
+      <div className="flex items-center h-14 px-4 border-b border-slate-800">
+        <Link to="/" className="flex items-center gap-2">
+          <div className="size-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground font-bold text-sm">
+            {{projectInitial}}
+          </div>
+          {!collapsed && (
+            <span className="font-semibold text-sm">{{projectTitle}}</span>
+          )}
+        </Link>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 p-2 space-y-1">
+        {navItems.map((item) => {
+          const active = isActive(item.to);
+          return (
+            <Link
+              key={item.to}
+              to={item.to}
+              className={cn(
+                'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+                active
+                  ? 'bg-slate-800 text-white'
+                  : 'text-slate-400 hover:bg-slate-800/50 hover:text-white'
+              )}
+            >
+              <item.icon className="size-4 shrink-0" />
+              {!collapsed && <span>{item.label}</span>}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Collapse toggle */}
+      <div className="p-2 border-t border-slate-800">
+        <button
+          type="button"
+          onClick={() => setCollapsed(!collapsed)}
+          className={cn(
+            'flex items-center gap-2 w-full px-3 py-2 rounded-md text-sm text-slate-400 hover:text-white hover:bg-slate-800/50 transition-colors',
+            collapsed && 'justify-center'
+          )}
+        >
+          {collapsed ? <ChevronRight className="size-4" /> : <ChevronLeft className="size-4" />}
+          {!collapsed && <span>Collapse</span>}
+        </button>
+      </div>
+    </aside>
+  );
+}

package/templates/default/src/components/StatCard.tsx

@@ -0,0 +1,31 @@
+import { cn } from '@lumerahq/ui/lib';
+import type { ReactNode } from 'react';
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  icon?: ReactNode;
+  className?: string;
+}
+
+export function StatCard({ title, value, subtitle, icon, className }: StatCardProps) {
+  return (
+    <div className={cn('rounded-xl border bg-card p-5', className)}>
+      <div className="flex items-start justify-between">
+        <div className="space-y-1">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <p className="text-2xl font-semibold tracking-tight">{value}</p>
+          {subtitle && (
+            <p className="text-sm text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+        {icon && (
+          <div className="rounded-lg bg-muted p-2.5 text-muted-foreground">
+            {icon}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/default/src/components/layout.tsx

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { Sidebar } from './Sidebar';
+
+export function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex h-screen bg-background">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">
+        <div className="p-6">{children}</div>
+      </main>
+    </div>
+  );
+}

package/templates/default/src/lib/queries.ts

@@ -0,0 +1,27 @@
+import { pbList, type PbRecord } from '@lumerahq/ui/lib';
+
+export type ExampleRecord = PbRecord & {
+  name: string;
+  status: string;
+};
+
+export async function getExampleData() {
+  // Replace with your actual data fetching logic
+  return {
+    message: 'Replace this with your data fetching logic',
+    timestamp: new Date().toISOString(),
+    instructions: [
+      '1. Edit src/lib/queries.ts',
+      '2. Use pbSql or pbList from @lumerahq/ui/lib',
+      '3. Create query functions for your data',
+    ],
+  };
+}
+
+export async function listExampleRecords(page = 1) {
+  return pbList<ExampleRecord>('your_collection', {
+    page,
+    perPage: 20,
+    sort: '-created',
+  });
+}

package/templates/default/src/main.tsx

@@ -0,0 +1,137 @@
+import { StrictMode, createContext, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider, createRouter, createHashHistory } from '@tanstack/react-router';
+import { Toaster } from 'sonner';
+
+import {
+  isEmbedded,
+  onInitMessage,
+  postReadyMessage,
+  type HostPayload,
+} from '@lumerahq/ui/lib';
+
+import { routeTree } from './routeTree.gen';
+import '@lumerahq/ui/styles.css';
+import './styles.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: 30_000, retry: 1 },
+  },
+});
+
+// Use hash history so route persists across iframe refreshes
+const hashHistory = createHashHistory();
+
+const router = createRouter({
+  routeTree,
+  history: hashHistory,
+  context: {},
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const ROUTE_STORAGE_KEY = '{{projectName}}-route';
+
+function RouteRestorer() {
+  const isFirstLoad = useRef(true);
+
+  useEffect(() => {
+    if (isFirstLoad.current) {
+      isFirstLoad.current = false;
+      const savedRoute = localStorage.getItem(ROUTE_STORAGE_KEY);
+      if (savedRoute && savedRoute !== '/' && router.state.location.pathname === '/') {
+        router.navigate({ to: savedRoute });
+      }
+    }
+
+    return router.subscribe('onResolved', ({ toLocation }) => {
+      localStorage.setItem(ROUTE_STORAGE_KEY, toLocation.pathname);
+    });
+  }, []);
+
+  return null;
+}
+
+type AuthContextValue = {
+  company?: { id: string; name?: string; apiName?: string };
+  user?: { id: string; name: string; email: string; role?: string };
+  sessionToken?: string;
+};
+
+export const AuthContext = createContext<AuthContextValue | null>(null);
+
+const App = () => {
+  const [hostContext, setHostContext] = useState<AuthContextValue | null>(null);
+  const [status, setStatus] = useState<'pending' | 'ready' | 'denied'>('pending');
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const standaloneDevMode =
+      import.meta.env.DEV && !isEmbedded() && !!import.meta.env.VITE_DEV_API_BASE_URL;
+
+    if (!isEmbedded() && !standaloneDevMode) {
+      setStatus('denied');
+      return;
+    }
+
+    const cleanup = onInitMessage((payload?: HostPayload) => {
+      setHostContext({
+        company: payload?.company,
+        user: payload?.user,
+        sessionToken: payload?.session?.token,
+      });
+      setStatus('ready');
+    });
+
+    postReadyMessage();
+    return cleanup;
+  }, []);
+
+  if (status === 'pending') {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-slate-900 text-white">
+        <p>Authenticating...</p>
+      </main>
+    );
+  }
+
+  if (status === 'denied' || !hostContext) {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-slate-900 text-white">
+        <div className="text-center space-y-4 rounded-xl border border-slate-700/60 bg-slate-800/70 px-8 py-10">
+          <p className="text-sm uppercase tracking-widest text-slate-400">Error</p>
+          <p className="text-6xl font-semibold">403</p>
+          <p className="text-sm text-slate-300">Access Denied</p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <AuthContext.Provider value={hostContext}>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+        <RouteRestorer />
+        <Toaster position="top-right" richColors />
+      </QueryClientProvider>
+    </AuthContext.Provider>
+  );
+};
+
+const rootElement = document.getElementById('app');
+if (rootElement && !rootElement.innerHTML) {
+  ReactDOM.createRoot(rootElement).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}

package/templates/default/src/routes/__root.tsx

@@ -0,0 +1,10 @@
+import { Outlet, createRootRoute } from '@tanstack/react-router';
+import { AppLayout } from '../components/layout';
+
+export const Route = createRootRoute({
+  component: () => (
+    <AppLayout>
+      <Outlet />
+    </AppLayout>
+  ),
+});

package/templates/default/src/routes/index.tsx

@@ -0,0 +1,90 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { useContext } from 'react';
+import { Users, FileText, Activity, TrendingUp } from 'lucide-react';
+import { AuthContext } from '../main';
+import { StatCard } from '../components/StatCard';
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+});
+
+function HomePage() {
+  const auth = useContext(AuthContext);
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-semibold">Dashboard</h1>
+        <p className="text-muted-foreground mt-1">
+          Welcome back, {auth?.user?.name ?? 'User'}
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <StatCard
+          title="Total Users"
+          value="1,234"
+          subtitle="+12% from last month"
+          icon={<Users className="size-5" />}
+        />
+        <StatCard
+          title="Documents"
+          value="856"
+          subtitle="23 added today"
+          icon={<FileText className="size-5" />}
+        />
+        <StatCard
+          title="Active Sessions"
+          value="42"
+          subtitle="Real-time"
+          icon={<Activity className="size-5" />}
+        />
+        <StatCard
+          title="Growth Rate"
+          value="+24.5%"
+          subtitle="vs last quarter"
+          icon={<TrendingUp className="size-5" />}
+        />
+      </div>
+
+      {/* Content Area */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        <div className="rounded-xl border bg-card p-6">
+          <h2 className="font-semibold mb-4">Recent Activity</h2>
+          <div className="space-y-3">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex items-center gap-3 text-sm">
+                <div className="size-2 rounded-full bg-primary" />
+                <span className="text-muted-foreground">Activity item {i}</span>
+                <span className="ml-auto text-xs text-muted-foreground">2h ago</span>
+              </div>
+            ))}
+          </div>
+          <p className="text-sm text-muted-foreground mt-4 pt-4 border-t">
+            Replace with your actual activity data
+          </p>
+        </div>
+
+        <div className="rounded-xl border bg-card p-6">
+          <h2 className="font-semibold mb-4">Quick Actions</h2>
+          <div className="grid grid-cols-2 gap-3">
+            {['Create Report', 'Add User', 'View Analytics', 'Settings'].map((action) => (
+              <button
+                key={action}
+                type="button"
+                className="p-3 text-sm font-medium rounded-lg border bg-background hover:bg-muted transition-colors text-left"
+              >
+                {action}
+              </button>
+            ))}
+          </div>
+          <p className="text-sm text-muted-foreground mt-4 pt-4 border-t">
+            Customize these actions for your app
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/routes/settings.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/settings')({
+  component: SettingsPage,
+});
+
+function SettingsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-semibold">Settings</h1>
+        <p className="text-muted-foreground mt-1">
+          Manage your application settings
+        </p>
+      </div>
+
+      <div className="rounded-xl border bg-card p-6">
+        <h2 className="font-semibold mb-4">General</h2>
+        <p className="text-sm text-muted-foreground">
+          Add your settings UI here
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/styles.css

@@ -0,0 +1,40 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.32 0.05 200);
+  --primary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --border: oklch(0.92 0.004 286.32);
+  --radius: 0.625rem;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --radius-lg: var(--radius);
+}
+
+@layer base {
+  * { @apply border-border; }
+  body { @apply bg-background text-foreground; }
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "include": ["**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/templates/default/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import viteReact from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
+
+export default defineConfig({
+  base: './', // Use relative paths for S3 hosting at subpaths
+  plugins: [
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+    }),
+    viteReact(),
+    tailwindcss(),
+  ],
+  resolve: {
+    alias: {
+      '@': new URL('./src', import.meta.url).pathname,
+    },
+    dedupe: ['react', 'react-dom'],
+  },
+  server: {
+    allowedHosts: [
+      'mac.lumerahq.com',
+    ],
+  },
+});