@microbuild/cli 0.1.0

package/dist/templates/api/login-page.tsx

@@ -0,0 +1,142 @@
+/**
+ * Login Page Template
+ * 
+ * Server-side proxy login page that uses the /api/auth/login proxy route
+ * instead of calling Supabase directly from the browser.
+ * This avoids CORS issues in the two-tier architecture.
+ * 
+ * Pattern: Browser → /api/auth/login (same origin) → Supabase Auth (server-side)
+ * 
+ * @microbuild/origin: pages/login
+ * @microbuild/version: 1.0.0
+ */
+
+'use client';
+
+import { useState } from 'react';
+import {
+  Paper,
+  TextInput,
+  PasswordInput,
+  Button,
+  Title,
+  Text,
+  Container,
+  Stack,
+  Box,
+  Group,
+  Anchor,
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { notifications } from '@mantine/notifications';
+import { useRouter } from 'next/navigation';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const form = useForm({
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validate: {
+      email: (value) => (!value ? 'Email is required' : /^\S+@\S+$/.test(value) ? null : 'Invalid email'),
+      password: (value) => (!value ? 'Password is required' : null),
+    },
+  });
+
+  const handleLogin = async (values: { email: string; password: string }) => {
+    setLoading(true);
+
+    try {
+      // Use the proxy route — NOT the Supabase client directly
+      // This avoids CORS issues because the request stays same-origin
+      const response = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(values),
+        credentials: 'include', // Include cookies
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.errors?.[0]?.message || 'Login failed');
+      }
+
+      notifications.show({
+        title: 'Success',
+        message: 'Logged in successfully',
+        color: 'green',
+      });
+
+      router.push('/');
+      router.refresh();
+    } catch (error) {
+      console.error('Login error:', error);
+      notifications.show({
+        title: 'Error',
+        message: error instanceof Error ? error.message : 'Failed to login',
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Box
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%)',
+      }}
+    >
+      <Container size={420}>
+        <Title ta="center" mb="md">
+          Welcome back
+        </Title>
+        <Text c="dimmed" size="sm" ta="center" mb="xl">
+          Sign in to your account
+        </Text>
+
+        <Paper withBorder shadow="md" p={30} radius="md">
+          <form onSubmit={form.onSubmit(handleLogin)}>
+            <Stack>
+              <TextInput
+                label="Email"
+                placeholder="you@example.com"
+                required
+                {...form.getInputProps('email')}
+              />
+
+              <PasswordInput
+                label="Password"
+                placeholder="Your password"
+                required
+                {...form.getInputProps('password')}
+              />
+
+              <Group justify="flex-end">
+                <Anchor component="button" type="button" c="dimmed" size="xs">
+                  Forgot password?
+                </Anchor>
+              </Group>
+
+              <Button type="submit" fullWidth loading={loading}>
+                Sign in
+              </Button>
+            </Stack>
+          </form>
+        </Paper>
+      </Container>
+    </Box>
+  );
+}

package/dist/templates/api/relations-route.ts

@@ -0,0 +1,46 @@
+/**
+ * Relations API Route
+ * 
+ * Proxies relation schema requests to the DaaS backend.
+ * Required for M2O, M2M, O2M, and M2A relation components.
+ * 
+ * @microbuild/origin: api-routes/relations
+ * @microbuild/version: 1.0.0
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getAuthHeaders, getDaasUrl } from '@/lib/api/auth-headers';
+
+/**
+ * GET /api/relations
+ * Get all relation definitions
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const headers = await getAuthHeaders();
+    const daasUrl = getDaasUrl();
+    
+    // Forward query parameters (e.g., filter by collection)
+    const searchParams = request.nextUrl.searchParams.toString();
+    const url = `${daasUrl}/api/relations${searchParams ? `?${searchParams}` : ''}`;
+    
+    const response = await fetch(url, {
+      headers,
+      cache: 'no-store',
+    });
+    
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ errors: [{ message: 'Request failed' }] }));
+      return NextResponse.json(error, { status: response.status });
+    }
+    
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Relations API error:', error);
+    return NextResponse.json(
+      { errors: [{ message: error instanceof Error ? error.message : 'Internal server error' }] },
+      { status: 500 }
+    );
+  }
+}

package/dist/templates/app/design-tokens.css

@@ -0,0 +1,183 @@
+/* Design system tokens */
+
+:root {
+  /* Colors - full shade scale */
+  --ds-primary-100: #ece6fb;
+  --ds-primary-200: #cfcbfd;
+  --ds-primary-300: #a29bfb;
+  --ds-primary-400: #7857ff;
+  --ds-primary: #5925dc;
+  --ds-primary-600: #491db6;
+  --ds-primary-700: #39178e;
+  --ds-primary-800: #291167;
+  --ds-primary-900: #190a3f;
+  --ds-primary-950: #0f0629;
+
+  --ds-secondary-100: #ebf1ff;
+  --ds-secondary-200: #d3e2ff;
+  --ds-secondary-300: #99bbff;
+  --ds-secondary-400: #70a0ff;
+  --ds-secondary: #1f69ff;
+  --ds-secondary-600: #004ff0;
+  --ds-secondary-700: #0040c2;
+  --ds-secondary-800: #003194;
+  --ds-secondary-900: #002266;
+  --ds-secondary-950: #001a4d;
+
+  --ds-success-100: #ecfbee;
+  --ds-success-200: #c4e8c8;
+  --ds-success-300: #9dd9a3;
+  --ds-success-400: #58be62;
+  --ds-success-500: #3bb346;
+  --ds-success: #198754;
+  --ds-success-700: #2da337;
+  --ds-success-800: #196f25;
+  --ds-success-900: #0d4f15;
+  --ds-success-950: #0a3e11;
+
+  --ds-info-100: #e6f3fb;
+  --ds-info-200: #b9d8ee;
+  --ds-info-300: #90c1e4;
+  --ds-info-400: #58a1d4;
+  --ds-info-500: #59a1d4;
+  --ds-info: #0f71bb;
+  --ds-info-700: #0c5b97;
+  --ds-info-800: #0a4776;
+  --ds-info-900: #08395e;
+  --ds-info-950: #062b47;
+
+  --ds-warning-100: #fffaeb;
+  --ds-warning-200: #fef0c7;
+  --ds-warning-300: #fedf89;
+  --ds-warning-400: #fec84b;
+  --ds-warning-500: #fdb022;
+  --ds-warning: #f79009;
+  --ds-warning-700: #dc6803;
+  --ds-warning-800: #b7571e;
+  --ds-warning-900: #8f4419;
+  --ds-warning-950: #6d3314;
+
+  --ds-danger-100: #fff4f3;
+  --ds-danger-200: #ffcfc8;
+  --ds-danger-300: #fc9c90;
+  --ds-danger-400: #fb7463;
+  --ds-danger-500: #fa5741;
+  --ds-danger: #d7260f;
+  --ds-danger-700: #f8331c;
+  --ds-danger-800: #c4281a;
+  --ds-danger-900: #9a1f15;
+  --ds-danger-950: #72170f;
+
+  --ds-gray-100: #f7f7f9;
+  --ds-gray-200: #e4e7ec;
+  --ds-gray-300: #d0d5dd;
+  --ds-gray-400: #98a2b3;
+  --ds-gray-500: #667085;
+  --ds-gray-600: #344054;
+  --ds-gray-700: #1d2939;
+  --ds-gray-800: #101828;
+  --ds-gray-900: #000000;
+  --ds-gray-950: #000000;
+
+  /* Spacing (8px base) */
+  --ds-spacing-1: 0.25rem;
+  --ds-spacing-2: 0.5rem;
+  --ds-spacing-3: 0.75rem;
+  --ds-spacing-4: 1rem;
+  --ds-spacing-5: 1.25rem;
+  --ds-spacing-6: 1.5rem;
+  --ds-spacing-8: 2rem;
+  --ds-spacing-10: 2.5rem;
+  --ds-spacing-12: 3rem;
+  --ds-spacing-16: 4rem;
+
+  /* Typography */
+  --ds-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --ds-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --ds-font-size-xs: 0.75rem;
+  --ds-font-size-sm: 0.875rem;
+  --ds-font-size-base: 1rem;
+  --ds-body-font-size: 1rem;
+  --ds-font-size-lg: 1.125rem;
+  --ds-font-size-xl: 1.25rem;
+  --ds-font-size-2xl: 1.5rem;
+  --ds-font-size-3xl: 1.875rem;
+  --ds-font-size-4xl: 2.25rem;
+
+  --ds-font-weight-normal: 400;
+  --ds-font-weight-base: 400;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-semibold: 600;
+  --ds-font-weight-bold: 700;
+
+  --ds-line-height-tight: 1.25;
+  --ds-line-height-normal: 1.5;
+  --ds-line-height-base: 1.5;
+  --ds-line-height-relaxed: 1.75;
+
+  /* Radius */
+  --ds-radius-sm: 0.25rem;
+  --ds-radius: 0.375rem;
+  --ds-radius-md: 0.5rem;
+  --ds-radius-lg: 0.75rem;
+  --ds-radius-xl: 1rem;
+
+  /* Shadows */
+  --ds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --ds-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+  /* Base colors */
+  --ds-body-bg: #ffffff;
+  --ds-body-color: var(--ds-gray-600);
+  --ds-body-color-rgb: 52, 64, 84;
+  --ds-primary-rgb: 89, 37, 220;
+
+  /* States */
+  --ds-hover-opacity: 0.8;
+  --ds-focus-ring: 0 0 0 2px var(--ds-primary);
+  --ds-disabled-opacity: 0.6;
+}
+
+[data-mantine-color-scheme="dark"] {
+  --ds-primary: #7857ff;
+  --ds-primary-100: #291167;
+  --ds-primary-200: #39178e;
+  --ds-primary-300: #491db6;
+  --ds-primary-400: #5925dc;
+  --ds-primary-600: #a29bfb;
+  --ds-primary-700: #cfcbfd;
+  --ds-primary-800: #ece6fb;
+  --ds-primary-900: #f5f0ff;
+  --ds-primary-950: #faf8ff;
+
+  --ds-secondary: #70a0ff;
+  --ds-success: #58be62;
+  --ds-info: #58a1d4;
+  --ds-warning: #fec84b;
+  --ds-danger: #fb7463;
+
+  --ds-gray-100: #1a1b1e;
+  --ds-gray-200: #25262b;
+  --ds-gray-300: #2c2e33;
+  --ds-gray-400: #373a40;
+  --ds-gray-500: #909296;
+  --ds-gray-600: #c1c2c5;
+  --ds-gray-700: #dee2e6;
+  --ds-gray-800: #e9ecef;
+  --ds-gray-900: #f8f9fa;
+  --ds-gray-950: #ffffff;
+
+  --ds-body-bg: #1a1b1e;
+  --ds-body-color: #c1c2c5;
+  --ds-body-color-rgb: 193, 194, 197;
+  --ds-primary-rgb: 120, 87, 255;
+
+  --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
+  --ds-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
+  --ds-shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
+  --ds-shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.4), 0 4px 8px -4px rgba(0, 0, 0, 0.3);
+  --ds-shadow-xl: 0 20px 30px -5px rgba(0, 0, 0, 0.4), 0 8px 12px -6px rgba(0, 0, 0, 0.3);
+}

package/dist/templates/app/globals.css

@@ -0,0 +1,58 @@
+/* Global styles using design tokens */
+body {
+  background: var(--ds-body-bg);
+  color: var(--ds-body-color);
+  font-family: var(--ds-font-family);
+  font-size: var(--ds-body-font-size);
+  line-height: var(--ds-line-height-base);
+}
+
+.emoji-icon {
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.mantine-Tabs-tab:hover {
+  background-color: var(--ds-gray-100);
+  color: var(--ds-gray-700);
+}
+
+.mantine-Tabs-tab[data-active],
+.mantine-Tabs-tab[data-active]:hover {
+  color: var(--ds-primary);
+  border-bottom-color: var(--ds-primary);
+  font-weight: 600;
+}
+
+.mantine-Notification-root[data-variant="success"] {
+  border-left-color: var(--ds-success);
+}
+
+.mantine-Notification-root[data-variant="error"] {
+  border-left-color: var(--ds-danger);
+}
+
+.mantine-Notification-root[data-variant="warning"] {
+  border-left-color: var(--ds-warning);
+}
+
+.mantine-Notification-root[data-variant="info"] {
+  border-left-color: var(--ds-info);
+}
+
+.mantine-Input-input:focus {
+  border-color: var(--mantine-color-primary-6);
+}
+
+.mantine-Modal-close:hover {
+  background-color: var(--ds-gray-100);
+}
+
+.mantine-Anchor-root:hover {
+  text-decoration: underline;
+  color: var(--mantine-color-primary-6);
+}
+
+.mantine-ActionIcon-root:hover {
+  background-color: var(--ds-gray-100);
+}

package/dist/templates/app/layout.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from "next";
+import {
+  ColorSchemeScript,
+  MantineProvider,
+  mantineHtmlProps
+} from "@mantine/core";
+import { ModalsProvider } from "@mantine/modals";
+import { Notifications } from "@mantine/notifications";
+import { Inter } from "next/font/google";
+import "@mantine/core/styles.css";
+import "@mantine/notifications/styles.css";
+import "./design-tokens.css";
+import "./globals.css";
+import { theme } from "@/lib/theme";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"]
+});
+
+export const metadata: Metadata = {
+  title: "Microbuild App",
+  description: "DaaS-ready Next.js app with a token-based design system"
+};
+
+export default function RootLayout({
+  children
+}: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" {...mantineHtmlProps}>
+      <head>
+        <ColorSchemeScript />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+        />
+      </head>
+      <body className={inter.variable}>
+        <MantineProvider theme={theme} defaultColorScheme="auto">
+          <ModalsProvider>
+            <Notifications position="top-right" />
+            {children}
+          </ModalsProvider>
+        </MantineProvider>
+      </body>
+    </html>
+  );
+}

package/dist/templates/app/page.tsx

@@ -0,0 +1,23 @@
+import { Button, Group, Stack, Text, Title } from "@mantine/core";
+import { ColorSchemeToggle } from "@/components/ColorSchemeToggle";
+
+export default function HomePage() {
+  return (
+    <Stack gap="lg" p="xl">
+      <Group justify="space-between">
+        <Title order={2}>Microbuild Starter</Title>
+        <ColorSchemeToggle />
+      </Group>
+      <Text c="dimmed">
+        This starter uses token-based theming with Mantine and is ready to
+        consume Microbuild UI components.
+      </Text>
+      <Group>
+        <Button>Primary Action</Button>
+        <Button variant="light" color="secondary">
+          Secondary Action
+        </Button>
+      </Group>
+    </Stack>
+  );
+}

package/dist/templates/components/ColorSchemeToggle.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import {
+  ActionIcon,
+  Tooltip,
+  useComputedColorScheme,
+  useMantineColorScheme
+} from "@mantine/core";
+import { IconMoon, IconSun } from "@tabler/icons-react";
+
+export function ColorSchemeToggle() {
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme("light", {
+    getInitialValueInEffect: true
+  });
+
+  return (
+    <Tooltip label={computedColorScheme === "dark" ? "Light mode" : "Dark mode"}>
+      <ActionIcon
+        variant="subtle"
+        size="lg"
+        onClick={() =>
+          setColorScheme(computedColorScheme === "light" ? "dark" : "light")
+        }
+        aria-label="Toggle color scheme"
+      >
+        {computedColorScheme === "dark" ? (
+          <IconSun size={20} />
+        ) : (
+          <IconMoon size={20} />
+        )}
+      </ActionIcon>
+    </Tooltip>
+  );
+}

package/dist/templates/lib/common-utils.ts

@@ -0,0 +1,156 @@
+/**
+ * Microbuild Utilities
+ * 
+ * Shared utility functions for Microbuild components.
+ * This file is copied to your project and can be customized.
+ */
+
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge class names with Tailwind CSS conflict resolution
+ * Like shadcn's cn() utility
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Format file size from bytes to human-readable string
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const k = 1024;
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${units[i]}`;
+}
+
+/**
+ * Get file category based on MIME type
+ */
+export function getFileCategory(mimeType: string | null): 'image' | 'video' | 'audio' | 'document' | 'other' {
+  if (!mimeType) return 'other';
+  
+  if (mimeType.startsWith('image/')) return 'image';
+  if (mimeType.startsWith('video/')) return 'video';
+  if (mimeType.startsWith('audio/')) return 'audio';
+  if (
+    mimeType.startsWith('text/') ||
+    mimeType.includes('pdf') ||
+    mimeType.includes('document') ||
+    mimeType.includes('spreadsheet') ||
+    mimeType.includes('presentation')
+  ) {
+    return 'document';
+  }
+  
+  return 'other';
+}
+
+/**
+ * Get asset URL for a file
+ */
+export function getAssetUrl(fileId: string, options?: {
+  width?: number;
+  height?: number;
+  fit?: 'cover' | 'contain' | 'inside' | 'outside';
+  quality?: number;
+  format?: 'auto' | 'webp' | 'avif' | 'jpg' | 'png';
+}): string {
+  const baseUrl = process.env.NEXT_PUBLIC_API_URL || '/api';
+  let url = `${baseUrl}/assets/${fileId}`;
+  
+  if (options) {
+    const params = new URLSearchParams();
+    if (options.width) params.set('width', options.width.toString());
+    if (options.height) params.set('height', options.height.toString());
+    if (options.fit) params.set('fit', options.fit);
+    if (options.quality) params.set('quality', options.quality.toString());
+    if (options.format) params.set('format', options.format);
+    
+    const queryString = params.toString();
+    if (queryString) url += `?${queryString}`;
+  }
+  
+  return url;
+}
+
+/**
+ * Debounce a function call
+ */
+export function debounce<T extends (...args: unknown[]) => unknown>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout;
+  
+  return function executedFunction(...args: Parameters<T>) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+/**
+ * Check if a value is a valid primary key
+ */
+export function isValidPrimaryKey(value: unknown): value is string | number {
+  if (typeof value === 'number') return !isNaN(value);
+  if (typeof value === 'string') return value.length > 0 && value !== '+';
+  return false;
+}
+
+/**
+ * Deep merge two objects
+ */
+export function deepMerge<T extends Record<string, unknown>>(
+  target: T,
+  source: Partial<T>
+): T {
+  const result = { ...target };
+  
+  for (const key in source) {
+    const sourceValue = source[key];
+    const targetValue = result[key];
+    
+    if (
+      sourceValue &&
+      typeof sourceValue === 'object' &&
+      !Array.isArray(sourceValue) &&
+      targetValue &&
+      typeof targetValue === 'object' &&
+      !Array.isArray(targetValue)
+    ) {
+      result[key] = deepMerge(
+        targetValue as Record<string, unknown>,
+        sourceValue as Record<string, unknown>
+      ) as T[Extract<keyof T, string>];
+    } else {
+      result[key] = sourceValue as T[Extract<keyof T, string>];
+    }
+  }
+  
+  return result;
+}
+
+/**
+ * Convert a string to slug format
+ */
+export function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
+/**
+ * Generate a unique ID
+ */
+export function generateId(): string {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).substr(2, 9)}`;
+}