@buildpad/cli 0.1.4

package/dist/templates/app/content/layout.tsx

@@ -0,0 +1,64 @@
+/**
+ * Content Module Layout
+ *
+ * Provides a content management shell with sidebar collection navigation,
+ * header bar, and main content area. Wraps all /content/* pages.
+ *
+ * Generated by @buildpad/cli
+ */
+
+"use client";
+
+import React from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { ContentLayout } from '@/components/ui/content-layout';
+import { ContentNavigation } from '@/components/ui/content-navigation';
+import { useCollections } from '@/lib/buildpad/hooks';
+
+export default function ContentModuleLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Extract current collection from URL: /content/[collection]/...
+  const segments = pathname.split('/');
+  const currentCollection = segments.length > 2 ? segments[2] : undefined;
+
+  const {
+    rootCollections,
+    activeGroups,
+    toggleGroup,
+    showHidden,
+    setShowHidden,
+    hasHiddenCollections,
+    showSearch,
+    dense,
+    loading,
+  } = useCollections({ currentCollection });
+
+  return (
+    <ContentLayout
+      breadcrumbs={[{ label: 'Content', href: '/content' }]}
+      sidebar={
+        <ContentNavigation
+          rootCollections={rootCollections}
+          activeGroups={activeGroups}
+          onToggleGroup={toggleGroup}
+          currentCollection={currentCollection}
+          onNavigate={(collection) => router.push(`/content/${collection}`)}
+          showHidden={showHidden}
+          onToggleHidden={() => setShowHidden(!showHidden)}
+          hasHiddenCollections={hasHiddenCollections}
+          showSearch={showSearch}
+          dense={dense}
+          loading={loading}
+        />
+      }
+    >
+      {children}
+    </ContentLayout>
+  );
+}

package/dist/templates/app/content/page.tsx

@@ -0,0 +1,66 @@
+/**
+ * Content Module Index Page
+ *
+ * Redirects to the first available collection, or shows an empty state
+ * if there are no collections yet.
+ *
+ * Generated by @buildpad/cli
+ */
+
+"use client";
+
+import React, { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Stack, Text, Button, Center } from '@mantine/core';
+import { IconBox, IconPlus } from '@tabler/icons-react';
+import { useCollections } from '@/lib/buildpad/hooks';
+import { useLocalStorage } from '@/lib/buildpad/hooks';
+
+export default function ContentIndexPage() {
+  const router = useRouter();
+  const { visibleCollections, loading } = useCollections();
+  const { value: lastAccessed } = useLocalStorage<string>('last-accessed-collection');
+
+  useEffect(() => {
+    if (loading) return;
+
+    // Redirect to last accessed collection if it still exists
+    if (lastAccessed) {
+      const exists = visibleCollections.find((c) => c.collection === lastAccessed);
+      if (exists) {
+        router.replace(`/content/${lastAccessed}`);
+        return;
+      }
+    }
+
+    // Redirect to first available collection
+    if (visibleCollections.length > 0) {
+      const first = visibleCollections.find((c) => !!c.schema);
+      if (first) {
+        router.replace(`/content/${first.collection}`);
+        return;
+      }
+    }
+  }, [loading, lastAccessed, visibleCollections, router]);
+
+  if (loading) return null;
+
+  // No collections — show empty state
+  if (visibleCollections.length === 0) {
+    return (
+      <Center style={{ minHeight: '60vh' }}>
+        <Stack align="center" gap="md">
+          <IconBox size={64} color="var(--mantine-color-gray-5)" stroke={1.5} />
+          <Text size="xl" fw={600}>
+            No Collections
+          </Text>
+          <Text c="dimmed" ta="center" maw={400}>
+            There are no collections available. Create your first collection in the data model settings.
+          </Text>
+        </Stack>
+      </Center>
+    );
+  }
+
+  return null;
+}

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: "Buildpad 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}>Buildpad Starter</Title>
+        <ColorSchemeToggle />
+      </Group>
+      <Text c="dimmed">
+        This starter uses token-based theming with Mantine and is ready to
+        consume Buildpad 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 @@
+/**
+ * Buildpad Utilities
+ * 
+ * Shared utility functions for Buildpad 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)}`;
+}