@builderos/create-agent-os 0.0.2

package/src/template/design/src/lib/router.tsx

@@ -0,0 +1,52 @@
+import { createBrowserRouter } from 'react-router-dom'
+import { ProductPage } from '@/components/ProductPage'
+import { DataModelPage } from '@/components/DataModelPage'
+import { DesignPage } from '@/components/DesignPage'
+import { SectionsPage } from '@/components/SectionsPage'
+import { SectionPage } from '@/components/SectionPage'
+import { ScreenDesignPage, ScreenDesignFullscreen } from '@/components/ScreenDesignPage'
+import { ShellDesignPage, ShellDesignFullscreen } from '@/components/ShellDesignPage'
+import { ExportPage } from '@/components/ExportPage'
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <ProductPage />,
+  },
+  {
+    path: '/data-model',
+    element: <DataModelPage />,
+  },
+  {
+    path: '/design',
+    element: <DesignPage />,
+  },
+  {
+    path: '/sections',
+    element: <SectionsPage />,
+  },
+  {
+    path: '/sections/:sectionId',
+    element: <SectionPage />,
+  },
+  {
+    path: '/sections/:sectionId/screen-designs/:screenDesignName',
+    element: <ScreenDesignPage />,
+  },
+  {
+    path: '/sections/:sectionId/screen-designs/:screenDesignName/fullscreen',
+    element: <ScreenDesignFullscreen />,
+  },
+  {
+    path: '/shell/design',
+    element: <ShellDesignPage />,
+  },
+  {
+    path: '/shell/design/fullscreen',
+    element: <ShellDesignFullscreen />,
+  },
+  {
+    path: '/export',
+    element: <ExportPage />,
+  },
+])

package/src/template/design/src/lib/section-loader.ts

@@ -0,0 +1,272 @@
+/**
+ * Section data loading utilities for spec.md, data.json, and screen designs
+ *
+ * File structure:
+ * - product/sections/[section-id]/spec.md     - Section specification
+ * - product/sections/[section-id]/data.json   - Sample data
+ * - src/sections/[section-id]/[PageName].tsx  - Screen design pages
+ */
+
+import type { SectionData, ParsedSpec, ScreenDesignInfo, ScreenshotInfo } from '@/types/section'
+import type { ComponentType } from 'react'
+
+// Load spec.md files from product/sections at build time
+const specFiles = import.meta.glob('/product/sections/*/spec.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+// Load data.json files from product/sections at build time
+const dataFiles = import.meta.glob('/product/sections/*/data.json', {
+  eager: true,
+}) as Record<string, { default: Record<string, unknown> }>
+
+// Load screen design components from src/sections lazily
+const screenDesignModules = import.meta.glob('/src/sections/*/*.tsx') as Record<
+  string,
+  () => Promise<{ default: ComponentType }>
+>
+
+// Load screenshot files from product/sections at build time
+const screenshotFiles = import.meta.glob('/product/sections/*/*.png', {
+  query: '?url',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+/**
+ * Extract section ID from a product/sections file path
+ * e.g., "/product/sections/invoices/spec.md" -> "invoices"
+ */
+function extractSectionIdFromProduct(path: string): string | null {
+  const match = path.match(/\/product\/sections\/([^/]+)\//)
+  return match?.[1] || null
+}
+
+/**
+ * Extract section ID from a src/sections file path
+ * e.g., "/src/sections/invoices/InvoiceList.tsx" -> "invoices"
+ */
+function extractSectionIdFromSrc(path: string): string | null {
+  const match = path.match(/\/src\/sections\/([^/]+)\//)
+  return match?.[1] || null
+}
+
+/**
+ * Extract screen design name from a file path
+ * e.g., "/src/sections/invoices/InvoiceList.tsx" -> "InvoiceList"
+ */
+function extractScreenDesignName(path: string): string | null {
+  const match = path.match(/\/src\/sections\/[^/]+\/([^/]+)\.tsx$/)
+  return match?.[1] || null
+}
+
+/**
+ * Extract screenshot name from a file path
+ * e.g., "/product/sections/invoices/invoice-list.png" -> "invoice-list"
+ */
+function extractScreenshotName(path: string): string | null {
+  const match = path.match(/\/product\/sections\/[^/]+\/([^/]+)\.png$/)
+  return match?.[1] || null
+}
+
+/**
+ * Parse spec.md content into ParsedSpec structure
+ *
+ * Expected format:
+ * # Section Specification
+ *
+ * ## Overview
+ * [Brief description of the section]
+ *
+ * ## User Flows
+ * - Flow 1
+ * - Flow 2
+ *
+ * ## UI Requirements
+ * - Requirement 1
+ * - Requirement 2
+ *
+ * ## Configuration (optional)
+ * - shell: false (to disable app shell wrapping for this section's screen designs)
+ */
+export function parseSpec(md: string): ParsedSpec | null {
+  if (!md || !md.trim()) return null
+
+  try {
+    // Extract title from first # heading
+    const titleMatch = md.match(/^#\s+(.+)$/m)
+    const title = titleMatch?.[1]?.trim() || 'Section Specification'
+
+    // Extract overview - content between ## Overview and next ##
+    const overviewMatch = md.match(/## Overview\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const overview = overviewMatch?.[1]?.trim() || ''
+
+    // Extract user flows - bullet list after ## User Flows
+    const userFlowsSection = md.match(/## User Flows\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const userFlows: string[] = []
+
+    if (userFlowsSection?.[1]) {
+      const lines = userFlowsSection[1].split('\n')
+      for (const line of lines) {
+        const trimmed = line.trim()
+        if (trimmed.startsWith('- ')) {
+          userFlows.push(trimmed.slice(2).trim())
+        }
+      }
+    }
+
+    // Extract UI requirements - bullet list after ## UI Requirements
+    const uiReqSection = md.match(/## UI Requirements\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const uiRequirements: string[] = []
+
+    if (uiReqSection?.[1]) {
+      const lines = uiReqSection[1].split('\n')
+      for (const line of lines) {
+        const trimmed = line.trim()
+        if (trimmed.startsWith('- ')) {
+          uiRequirements.push(trimmed.slice(2).trim())
+        }
+      }
+    }
+
+    // Extract configuration - check for shell: false
+    // Look for "shell: false" or "- shell: false" anywhere in the document
+    const shellDisabled = /(?:^|\n)\s*-?\s*shell\s*:\s*false/i.test(md)
+    const useShell = !shellDisabled
+
+    return { title, overview, userFlows, uiRequirements, useShell }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Get screen designs for a specific section
+ */
+export function getSectionScreenDesigns(sectionId: string): ScreenDesignInfo[] {
+  const screenDesigns: ScreenDesignInfo[] = []
+  const prefix = `/src/sections/${sectionId}/`
+
+  for (const path of Object.keys(screenDesignModules)) {
+    if (path.startsWith(prefix)) {
+      const name = extractScreenDesignName(path)
+      if (name) {
+        screenDesigns.push({
+          name,
+          path,
+          componentName: name,
+        })
+      }
+    }
+  }
+
+  return screenDesigns
+}
+
+/**
+ * Get screenshots for a specific section
+ */
+export function getSectionScreenshots(sectionId: string): ScreenshotInfo[] {
+  const screenshots: ScreenshotInfo[] = []
+  const prefix = `/product/sections/${sectionId}/`
+
+  for (const [path, url] of Object.entries(screenshotFiles)) {
+    if (path.startsWith(prefix)) {
+      const name = extractScreenshotName(path)
+      if (name) {
+        screenshots.push({
+          name,
+          path,
+          url,
+        })
+      }
+    }
+  }
+
+  return screenshots
+}
+
+/**
+ * Load screen design component dynamically
+ */
+export function loadScreenDesignComponent(
+  sectionId: string,
+  screenDesignName: string
+): (() => Promise<{ default: ComponentType }>) | null {
+  const path = `/src/sections/${sectionId}/${screenDesignName}.tsx`
+  return screenDesignModules[path] || null
+}
+
+/**
+ * Load all data for a specific section
+ */
+export function loadSectionData(sectionId: string): SectionData {
+  const specPath = `/product/sections/${sectionId}/spec.md`
+  const dataPath = `/product/sections/${sectionId}/data.json`
+
+  const specContent = specFiles[specPath] || null
+  const dataModule = dataFiles[dataPath]
+  const data = dataModule?.default || null
+
+  return {
+    sectionId,
+    spec: specContent,
+    specParsed: specContent ? parseSpec(specContent) : null,
+    data,
+    screenDesigns: getSectionScreenDesigns(sectionId),
+    screenshots: getSectionScreenshots(sectionId),
+  }
+}
+
+/**
+ * Check if a section has a spec.md file
+ */
+export function hasSectionSpec(sectionId: string): boolean {
+  return `/product/sections/${sectionId}/spec.md` in specFiles
+}
+
+/**
+ * Check if a section's screen designs should use the app shell
+ * Returns true by default, false if spec contains "shell: false"
+ */
+export function sectionUsesShell(sectionId: string): boolean {
+  const specPath = `/product/sections/${sectionId}/spec.md`
+  const specContent = specFiles[specPath]
+  if (!specContent) return true // Default to using shell if no spec
+
+  const parsed = parseSpec(specContent)
+  return parsed?.useShell ?? true
+}
+
+/**
+ * Check if a section has a data.json file
+ */
+export function hasSectionData(sectionId: string): boolean {
+  return `/product/sections/${sectionId}/data.json` in dataFiles
+}
+
+/**
+ * Get all section IDs that have any artifacts
+ */
+export function getAllSectionIds(): string[] {
+  const ids = new Set<string>()
+
+  for (const path of Object.keys(specFiles)) {
+    const id = extractSectionIdFromProduct(path)
+    if (id) ids.add(id)
+  }
+
+  for (const path of Object.keys(dataFiles)) {
+    const id = extractSectionIdFromProduct(path)
+    if (id) ids.add(id)
+  }
+
+  for (const path of Object.keys(screenDesignModules)) {
+    const id = extractSectionIdFromSrc(path)
+    if (id) ids.add(id)
+  }
+
+  return Array.from(ids)
+}

package/src/template/design/src/lib/shell-loader.ts

@@ -0,0 +1,175 @@
+/**
+ * Shell loading and parsing utilities
+ */
+
+import type { ShellSpec, ShellInfo } from '@/types/product'
+import type { ComponentType, ReactNode } from 'react'
+
+// Load shell spec markdown file at build time
+const shellSpecFiles = import.meta.glob('/product/shell/*.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+// Load shell components lazily
+const shellComponentModules = import.meta.glob('/src/shell/components/*.tsx') as Record<
+  string,
+  () => Promise<{ default: ComponentType }>
+>
+
+// Load shell preview component lazily
+const shellPreviewModules = import.meta.glob('/src/shell/*.tsx') as Record<
+  string,
+  () => Promise<{ default: ComponentType }>
+>
+
+/**
+ * Parse shell spec.md content into ShellSpec structure
+ *
+ * Expected format:
+ * # Application Shell Specification
+ *
+ * ## Overview
+ * Description of the shell design
+ *
+ * ## Navigation Structure
+ * - Nav Item 1 → Section
+ * - Nav Item 2 → Section
+ *
+ * ## Layout Pattern
+ * Description of layout (sidebar, top nav, etc.)
+ */
+export function parseShellSpec(md: string): ShellSpec | null {
+  if (!md || !md.trim()) return null
+
+  try {
+    // Extract overview
+    const overviewMatch = md.match(/## Overview\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const overview = overviewMatch?.[1]?.trim() || ''
+
+    // Extract navigation items
+    const navSection = md.match(/## Navigation Structure\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const navigationItems: string[] = []
+
+    if (navSection?.[1]) {
+      const lines = navSection[1].split('\n')
+      for (const line of lines) {
+        const trimmed = line.trim()
+        if (trimmed.startsWith('- ')) {
+          navigationItems.push(trimmed.slice(2).trim())
+        }
+      }
+    }
+
+    // Extract layout pattern
+    const layoutMatch = md.match(/## Layout Pattern\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const layoutPattern = layoutMatch?.[1]?.trim() || ''
+
+    // Return null if we couldn't parse anything meaningful
+    if (!overview && navigationItems.length === 0 && !layoutPattern) {
+      return null
+    }
+
+    return {
+      raw: md,
+      overview,
+      navigationItems,
+      layoutPattern,
+    }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Check if shell components exist
+ */
+export function hasShellComponents(): boolean {
+  // Check if AppShell.tsx exists
+  const exists = '/src/shell/components/AppShell.tsx' in shellComponentModules
+  // Debug: log available shell components
+  console.log('[Shell] hasShellComponents check:', {
+    exists,
+    availableComponents: Object.keys(shellComponentModules),
+    lookingFor: '/src/shell/components/AppShell.tsx'
+  })
+  return exists
+}
+
+/**
+ * Load shell component dynamically
+ */
+export function loadShellComponent(
+  componentName: string
+): (() => Promise<{ default: ComponentType }>) | null {
+  const path = `/src/shell/components/${componentName}.tsx`
+  return shellComponentModules[path] || null
+}
+
+/**
+ * Load AppShell component that can wrap content
+ * First tries to load ShellWrapper (designed for wrapping arbitrary content)
+ * Falls back to AppShell if ShellWrapper doesn't exist
+ */
+export function loadAppShell(): (() => Promise<{ default: ComponentType<{ children?: ReactNode }> }>) | null {
+  // First try ShellWrapper - a component specifically designed to wrap content
+  const wrapperPath = '/src/shell/components/ShellWrapper.tsx'
+  if (wrapperPath in shellComponentModules) {
+    return shellComponentModules[wrapperPath] as (() => Promise<{ default: ComponentType<{ children?: ReactNode }> }>)
+  }
+  // Fall back to AppShell
+  const path = '/src/shell/components/AppShell.tsx'
+  return shellComponentModules[path] as (() => Promise<{ default: ComponentType<{ children?: ReactNode }> }>) || null
+}
+
+/**
+ * Load shell preview wrapper dynamically
+ */
+export function loadShellPreview(): (() => Promise<{ default: ComponentType }>) | null {
+  return shellPreviewModules['/src/shell/ShellPreview.tsx'] || null
+}
+
+/**
+ * Load the complete shell info
+ */
+export function loadShellInfo(): ShellInfo | null {
+  const specContent = shellSpecFiles['/product/shell/spec.md']
+  const spec = specContent ? parseShellSpec(specContent) : null
+  const hasComponents = hasShellComponents()
+
+  // Return null if neither spec nor components exist
+  if (!spec && !hasComponents) {
+    return null
+  }
+
+  return { spec, hasComponents }
+}
+
+/**
+ * Check if shell has been defined (spec or components)
+ */
+export function hasShell(): boolean {
+  return hasShellSpec() || hasShellComponents()
+}
+
+/**
+ * Check if shell spec has been defined
+ */
+export function hasShellSpec(): boolean {
+  return '/product/shell/spec.md' in shellSpecFiles
+}
+
+/**
+ * Get list of shell component names
+ */
+export function getShellComponentNames(): string[] {
+  const names: string[] = []
+  for (const path of Object.keys(shellComponentModules)) {
+    const match = path.match(/\/src\/shell\/components\/([^/]+)\.tsx$/)
+    if (match) {
+      names.push(match[1])
+    }
+  }
+  return names
+}

package/src/template/design/src/lib/utils.ts

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

package/src/template/design/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { RouterProvider } from 'react-router-dom'
+import './index.css'
+import { router } from '@/lib/router'
+
+import { ToastProvider } from '@/components/ui/ToastContext'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ToastProvider>
+      <RouterProvider router={router} />
+    </ToastProvider>
+  </StrictMode>,
+)