@lumerahq/cli 0.19.3-dev.0 → 0.19.3

package/templates/default/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "type": "module",
+  "pnpm": {
+    "overrides": {
+      "@tanstack/router-core": "1.155.0"
+    }
+  },
+  "lumera": {
+    "version": 1,
+    "name": "{{projectTitle}}"
+  },
+  "scripts": {
+    "dev": "pnpm dlx @lumerahq/cli dev",
+    "deploy": "pnpm dlx @lumerahq/cli apply app",
+    "dev:vite": "vite",
+    "build": "vite build && tsc",
+    "preview": "vite preview",
+    "typecheck": "tsr generate && tsc --noEmit",
+    "lint": "biome lint --write .",
+    "format": "biome format --write .",
+    "check": "biome check --write .",
+    "check:ci": "biome check . && tsr generate && tsc --noEmit"
+  },
+  "dependencies": {
+    "@lumerahq/ui": "^0.7.6",
+    "@tanstack/react-query": "^5.90.11",
+    "@tanstack/react-router": "1.155.0",
+    "@tanstack/router-plugin": "1.155.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.7.0",
+    "radix-ui": "^1.4.3",
+    "shadcn": "^4.1.2",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.2.2"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.4.10",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/router-cli": "1.155.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3"
+  }
+}

package/templates/default/pyproject.toml

@@ -0,0 +1,14 @@
+[project]
+name = "{{projectName}}"
+version = "0.1.0"
+description = "{{projectTitle}} - Lumera custom app"
+requires-python = ">=3.11"
+dependencies = [
+    "lumera",
+]
+
+[project.optional-dependencies]
+dev = [
+    "ruff",
+    "pytest",
+]

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+
+export function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-background overflow-hidden">
+      <main className="overflow-auto scroll-smooth">
+        <div className="p-8 max-w-5xl mx-auto">{children}</div>
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+export 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);

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

@@ -0,0 +1,17 @@
+// import { type PbRecord, pbList, pbSql } from '@lumerahq/ui/lib';
+
+// Add your collection types and query functions here.
+//
+// Example:
+//
+//   export type Order = PbRecord & {
+//     title: string;
+//     amount: number;
+//     status: string;
+//   };
+//
+//   export async function listOrders(page = 1) {
+//     return pbList<Order>('orders', { page, perPage: 20, sort: '-created' });
+//   }
+//
+// Use bare collection names — namespacing is handled automatically.

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

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/default/src/main.tsx

@@ -0,0 +1,130 @@
+import { type HostPayload, isEmbedded, onInitMessage, postReadyMessage } from '@lumerahq/ui/lib';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createHashHistory, createRouter, RouterProvider } from '@tanstack/react-router';
+import { StrictMode, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Toaster } from 'sonner';
+
+import { AuthContext, type AuthContextValue } from './lib/auth';
+import { routeTree } from './routeTree.gen';
+import './styles.css';
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { staleTime: 30_000, retry: 1 },
+  },
+});
+
+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.href);
+    });
+  }, []);
+
+  return 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-background">
+        <div className="flex flex-col items-center gap-4">
+          <div className="size-10 rounded-xl bg-gradient-to-br from-[var(--accent-gradient-from)] to-[var(--accent-gradient-to)] flex items-center justify-center text-white font-semibold text-lg shadow-sm animate-pulse">
+            L
+          </div>
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        </div>
+      </main>
+    );
+  }
+
+  if (status === 'denied' || !hostContext) {
+    return (
+      <main className="flex min-h-screen items-center justify-center bg-background">
+        <div className="text-center space-y-3">
+          <div className="inline-flex size-12 rounded-xl bg-muted items-center justify-center mb-2">
+            <span className="text-2xl font-semibold text-muted-foreground">403</span>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Access denied, this app can only be accessed from within Lumera.
+          </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 { createRootRoute, Outlet } 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,87 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { useContext } from 'react';
+import { MessageSquare, LayoutGrid, Bot, Workflow } from 'lucide-react';
+import { AuthContext } from '../lib/auth';
+
+export const Route = createFileRoute('/')({
+  component: HomePage,
+});
+
+function HomePage() {
+  const auth = useContext(AuthContext);
+
+  return (
+    <div className="space-y-10">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">Welcome{auth?.user?.name ? `, ${auth.user.name}` : ''}</h1>
+        <p className="text-muted-foreground mt-2 text-[0.95rem] leading-relaxed">Your app is ready. Use Studio to start building.</p>
+      </div>
+
+      {/* Getting Started */}
+      <div className="rounded-xl bg-card p-6 shadow-[0_1px_3px_0_oklch(0_0_0/0.04),0_1px_2px_-1px_oklch(0_0_0/0.04)] border border-border/60 hover:shadow-[0_4px_12px_-2px_oklch(0_0_0/0.06)] transition-shadow duration-300">
+        <div className="flex items-start gap-4">
+          <div className="rounded-xl bg-gradient-to-br from-primary/10 to-primary/5 p-3 ring-1 ring-primary/10">
+            <MessageSquare className="size-6 text-primary" />
+          </div>
+          <div className="space-y-2">
+            <h2 className="font-semibold text-lg tracking-tight">Build with Studio</h2>
+            <p className="text-muted-foreground text-sm leading-relaxed">
+              Switch to the <strong>Chat</strong> tab and tell the agent what you want to build.
+              It will set up your data, write the logic, and build your UI — all from a conversation.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Example prompts */}
+      <div>
+        <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">Try asking the agent</h2>
+        <div className="flex flex-wrap gap-2">
+          {[
+            'Build an invoice processing app with approval workflows',
+            'Track vendor payments and flag overdue invoices',
+            'Create a month-end close checklist with task assignments',
+            'Set up an AP inbox that triages emails with AI',
+            'Build an expense tracker with categories and a dashboard',
+          ].map((prompt) => (
+            <span
+              key={prompt}
+              className="inline-flex items-center px-3.5 py-2 rounded-lg text-sm bg-card border border-border/60 text-muted-foreground shadow-[0_1px_2px_0_oklch(0_0_0/0.03)] hover:border-primary/30 hover:text-foreground transition-all duration-200 cursor-default"
+            >
+              {prompt}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* What you can build */}
+      <div>
+        <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-5">What you can build</h2>
+        <div className="grid gap-4 md:grid-cols-3">
+          <div className="group rounded-xl bg-card p-5 space-y-3 shadow-[0_1px_2px_0_oklch(0_0_0/0.03)] border border-border/60 hover:shadow-[0_4px_12px_-2px_oklch(0_0_0/0.06)] hover:border-border transition-all duration-300">
+            <LayoutGrid className="size-5 text-primary transition-colors duration-300" />
+            <h3 className="font-medium text-sm tracking-tight">Internal apps</h3>
+            <p className="text-xs text-muted-foreground leading-relaxed">
+              Back-office tools for your team — dashboards, approval queues, and operational workflows.
+            </p>
+          </div>
+          <div className="group rounded-xl bg-card p-5 space-y-3 shadow-[0_1px_2px_0_oklch(0_0_0/0.03)] border border-border/60 hover:shadow-[0_4px_12px_-2px_oklch(0_0_0/0.06)] hover:border-border transition-all duration-300">
+            <Bot className="size-5 text-primary transition-colors duration-300" />
+            <h3 className="font-medium text-sm tracking-tight">Agent-powered workflows</h3>
+            <p className="text-xs text-muted-foreground leading-relaxed">
+              AI agents that extract data, run reviews, draft outputs, and route exceptions — humans stay in the loop.
+            </p>
+          </div>
+          <div className="group rounded-xl bg-card p-5 space-y-3 shadow-[0_1px_2px_0_oklch(0_0_0/0.03)] border border-border/60 hover:shadow-[0_4px_12px_-2px_oklch(0_0_0/0.06)] hover:border-border transition-all duration-300">
+            <Workflow className="size-5 text-primary transition-colors duration-300" />
+            <h3 className="font-medium text-sm tracking-tight">Automations</h3>
+            <p className="text-xs text-muted-foreground leading-relaxed">
+              Connect to your systems, process inbound emails, and trigger actions automatically — with a full audit trail.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/styles.css

@@ -0,0 +1,128 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-feature-settings: "cv11", "ss01";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Lumera brand theme + full shadcn variable set */
+
+:root {
+  --radius: 0.75rem;
+
+  /* Warm off-white background */
+  --background: oklch(0.985 0.002 60);
+  /* Near-black foreground with warm undertone */
+  --foreground: oklch(0.16 0.01 60);
+  /* Cards: true white */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.16 0.01 60);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.16 0.01 60);
+  /* Lumera coral-orange primary */
+  --primary: oklch(0.62 0.17 35);
+  --primary-foreground: oklch(0.995 0 0);
+  /* Secondary */
+  --secondary: oklch(0.955 0.005 60);
+  --secondary-foreground: oklch(0.16 0.01 60);
+  /* Warm stone muted tones */
+  --muted: oklch(0.955 0.005 60);
+  --muted-foreground: oklch(0.50 0.01 60);
+  /* Accent — lighter orange tint */
+  --accent: oklch(0.95 0.03 50);
+  --accent-foreground: oklch(0.35 0.12 35);
+  /* Destructive */
+  --destructive: oklch(0.55 0.2 25);
+  --destructive-foreground: oklch(0.995 0 0);
+  /* Warm border */
+  --border: oklch(0.91 0.005 60);
+  --input: oklch(0.91 0.005 60);
+  --ring: oklch(0.62 0.17 35);
+  /* Charts */
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  /* Sidebar */
+  --sidebar: oklch(0.985 0.002 60);
+  --sidebar-foreground: oklch(0.16 0.01 60);
+  --sidebar-primary: oklch(0.62 0.17 35);
+  --sidebar-primary-foreground: oklch(0.995 0 0);
+  --sidebar-accent: oklch(0.95 0.03 50);
+  --sidebar-accent-foreground: oklch(0.35 0.12 35);
+  --sidebar-border: oklch(0.91 0.005 60);
+  --sidebar-ring: oklch(0.62 0.17 35);
+
+  /* Semantic status colors */
+  --success: oklch(0.55 0.14 145);
+  --success-foreground: oklch(0.995 0 0);
+  --warning: oklch(0.75 0.15 70);
+  --warning-foreground: oklch(0.25 0.05 60);
+
+  /* Accent gradient for logo mark */
+  --accent-gradient-from: oklch(0.62 0.17 35);
+  --accent-gradient-to: oklch(0.58 0.19 25);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/default/template.json

@@ -0,0 +1,7 @@
+{
+  "name": "default",
+  "title": "Blank Starter",
+  "description": "A minimal blank canvas with React frontend and Lumera platform scaffolding. No pre-built collections or agents — start from scratch.",
+  "category": "General",
+  "version": "1.1.0"
+}

package/templates/default/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "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,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/templates/default/vite.config.ts

@@ -0,0 +1,28 @@
+import tailwindcss from '@tailwindcss/vite';
+import { tanstackRouter } from '@tanstack/router-plugin/vite';
+import viteReact from '@vitejs/plugin-react';
+import { defineConfig } from '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',
+      'untunable-del-nonephemerally.ngrok-free.dev',
+    ],
+  },
+});