@builderos/create-agent-os 0.0.2

package/src/template/design/src/index.css

@@ -0,0 +1,284 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+  Design OS - Refined Utility Design System
+  A professional, editorial-inspired aesthetic with warm neutrals
+  Using Tailwind's stone palette for warmth
+*/
+@theme {
+  /* Font families - DM Sans for clean, geometric type */
+  --font-display: "DM Sans", system-ui, sans-serif;
+  --font-body: "DM Sans", system-ui, sans-serif;
+  --font-sans: "DM Sans", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
+}
+
+/* Shadcn theme integration */
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --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-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);
+}
+
+/*
+  Light theme - Warm Stone palette
+  Professional, editorial aesthetic with warmth
+*/
+:root {
+  --radius: 0.5rem;
+  /* Backgrounds & Foregrounds - Stone palette for warmth */
+  --background: oklch(0.985 0.001 106.424);
+  /* stone-50 #FAFAF9 */
+  --foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 #1C1917 */
+  --card: oklch(1 0 0);
+  /* white */
+  --card-foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  --popover: oklch(1 0 0);
+  /* white */
+  --popover-foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  /* Primary - Stone dark */
+  --primary: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  --primary-foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  /* Secondary - Stone light */
+  --secondary: oklch(0.970 0.001 106.424);
+  /* stone-100 */
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  /* Muted - Stone for subdued text */
+  --muted: oklch(0.970 0.001 106.424);
+  /* stone-100 */
+  --muted-foreground: oklch(0.370 0.010 67.558);
+  /* stone-700 variant */
+  /* Accent - Lime green for subtle pops */
+  --accent: oklch(0.970 0.001 106.424);
+  /* stone-100 */
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  /* Destructive - Rose */
+  --destructive: oklch(0.586 0.253 17.585);
+  /* rose-600 */
+  /* Borders & Inputs - Stone very light */
+  --border: oklch(0.923 0.003 48.717);
+  /* stone-200 #E7E5E4 */
+  --input: oklch(0.923 0.003 48.717);
+  /* stone-200 */
+  --ring: oklch(0.553 0.013 58.071);
+  /* stone-500 */
+  /* Chart colors */
+  --chart-1: oklch(0.532 0.157 131.589);
+  /* lime-600 #65A30D */
+  --chart-2: oklch(0.6 0.118 184.704);
+  /* teal-600 */
+  --chart-3: oklch(0.398 0.07 227.392);
+  /* cyan-800 */
+  --chart-4: oklch(0.828 0.189 84.429);
+  /* yellow-400 */
+  --chart-5: oklch(0.769 0.188 70.08);
+  /* amber-400 */
+  /* Sidebar - Stone */
+  --sidebar: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  --sidebar-foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  --sidebar-accent: oklch(0.970 0.001 106.424);
+  /* stone-100 */
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  /* stone-200 */
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+  /* stone-500 */
+}
+
+/*
+  Dark theme - Warm Stone dark palette
+*/
+.dark {
+  /* Backgrounds & Foregrounds - Stone dark */
+  --background: oklch(0.216 0.006 56.043);
+  /* stone-900 #1C1917 */
+  --foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  --card: oklch(0.268 0.007 34.298);
+  /* stone-800 #292524 */
+  --card-foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  --popover: oklch(0.268 0.007 34.298);
+  /* stone-800 */
+  --popover-foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  /* Primary - Stone light */
+  --primary: oklch(0.923 0.003 48.717);
+  /* stone-200 */
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  /* Secondary - Stone dark */
+  --secondary: oklch(0.318 0.008 43.185);
+  /* stone-700 */
+  --secondary-foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  /* Muted - Stone dark */
+  --muted: oklch(0.318 0.008 43.185);
+  /* stone-700 */
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  /* stone-400 #A8A29E */
+  /* Accent - Stone dark */
+  --accent: oklch(0.318 0.008 43.185);
+  /* stone-700 */
+  --accent-foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  /* Destructive - Rose lighter for dark mode */
+  --destructive: oklch(0.712 0.194 13.428);
+  /* rose-400 */
+  /* Borders & Inputs - Stone dark */
+  --border: oklch(0.370 0.010 67.558);
+  /* stone-600 */
+  --input: oklch(0.370 0.010 67.558);
+  /* stone-600 */
+  --ring: oklch(0.553 0.013 58.071);
+  /* stone-500 */
+  /* Chart colors - brighter for dark mode */
+  --chart-1: oklch(0.648 0.2 131.684);
+  /* lime-500 */
+  --chart-2: oklch(0.696 0.17 162.48);
+  /* emerald-400 */
+  --chart-3: oklch(0.769 0.188 70.08);
+  /* amber-400 */
+  --chart-4: oklch(0.627 0.265 303.9);
+  /* purple-500 */
+  --chart-5: oklch(0.645 0.246 16.439);
+  /* rose-500 */
+  /* Sidebar - Stone dark */
+  --sidebar: oklch(0.268 0.007 34.298);
+  /* stone-800 */
+  --sidebar-foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  --sidebar-primary: oklch(0.648 0.2 131.684);
+  /* lime-500 */
+  --sidebar-primary-foreground: oklch(0.216 0.006 56.043);
+  /* stone-900 */
+  --sidebar-accent: oklch(0.318 0.008 43.185);
+  /* stone-700 */
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.424);
+  /* stone-50 */
+  --sidebar-border: oklch(0.370 0.010 67.558);
+  /* stone-600 */
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+  /* stone-500 */
+}
+
+/* Base layer styles */
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-display);
+    @apply font-semibold tracking-tight;
+  }
+
+  code,
+  pre,
+  kbd {
+    font-family: var(--font-mono);
+  }
+}
+
+/* Subtle page fade-in animation */
+@layer utilities {
+  .animate-fade-in {
+    animation: fade-in 200ms ease-out;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .animate-collapse-down {
+    animation: collapse-down 200ms ease-out;
+  }
+
+  .animate-collapse-up {
+    animation: collapse-up 200ms ease-out;
+  }
+
+  @keyframes collapse-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapse-up {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+}

package/src/template/design/src/lib/data-model-loader.ts

@@ -0,0 +1,91 @@
+/**
+ * Data model loading and parsing utilities
+ */
+
+import type { DataModel, Entity } from '@/types/product'
+
+// Load data model markdown file at build time
+const dataModelFiles = import.meta.glob('/product/data-model/*.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+/**
+ * Parse data-model.md content into DataModel structure
+ *
+ * Expected format:
+ * # Data Model
+ *
+ * ## Entities
+ *
+ * ### EntityName
+ * Description of what this entity represents.
+ *
+ * ### AnotherEntity
+ * Description of this entity.
+ *
+ * ## Relationships
+ *
+ * - Entity has many OtherEntity
+ * - OtherEntity belongs to Entity
+ */
+export function parseDataModel(md: string): DataModel | null {
+  if (!md || !md.trim()) return null
+
+  try {
+    const entities: Entity[] = []
+    const relationships: string[] = []
+
+    // Extract entities section
+    const entitiesSection = md.match(/## Entities\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+
+    if (entitiesSection?.[1]) {
+      // Match ### EntityName followed by description
+      const entityMatches = [...entitiesSection[1].matchAll(/### ([^\n]+)\n+([\s\S]*?)(?=\n### |\n## |$)/g)]
+      for (const match of entityMatches) {
+        entities.push({
+          name: match[1].trim(),
+          description: match[2].trim(),
+        })
+      }
+    }
+
+    // Extract relationships section
+    const relationshipsSection = md.match(/## Relationships\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+
+    if (relationshipsSection?.[1]) {
+      const lines = relationshipsSection[1].split('\n')
+      for (const line of lines) {
+        const trimmed = line.trim()
+        if (trimmed.startsWith('- ')) {
+          relationships.push(trimmed.slice(2).trim())
+        }
+      }
+    }
+
+    // Return null if we couldn't parse anything meaningful
+    if (entities.length === 0 && relationships.length === 0) {
+      return null
+    }
+
+    return { entities, relationships }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Load the data model from markdown file
+ */
+export function loadDataModel(): DataModel | null {
+  const content = dataModelFiles['/product/data-model/data-model.md']
+  return content ? parseDataModel(content) : null
+}
+
+/**
+ * Check if data model has been defined
+ */
+export function hasDataModel(): boolean {
+  return '/product/data-model/data-model.md' in dataModelFiles
+}

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

@@ -0,0 +1,101 @@
+/**
+ * Design system loading utilities for colors and typography
+ */
+
+import type { DesignSystem, ColorTokens, TypographyTokens } from '@/types/product'
+
+// Load JSON files from product/design-system at build time
+const designSystemFiles = import.meta.glob('/product/design-system/*.json', {
+  eager: true,
+}) as Record<string, { default: Record<string, string> }>
+
+/**
+ * Load color tokens from colors.json
+ *
+ * Expected format:
+ * {
+ *   "primary": "lime",
+ *   "secondary": "teal",
+ *   "neutral": "stone"
+ * }
+ */
+export function loadColorTokens(): ColorTokens | null {
+  const colorsModule = designSystemFiles['/product/design-system/colors.json']
+  if (!colorsModule?.default) return null
+
+  const colors = colorsModule.default
+  if (!colors.primary || !colors.secondary || !colors.neutral) {
+    return null
+  }
+
+  return {
+    primary: colors.primary,
+    secondary: colors.secondary,
+    neutral: colors.neutral,
+  }
+}
+
+/**
+ * Load typography tokens from typography.json
+ *
+ * Expected format:
+ * {
+ *   "heading": "DM Sans",
+ *   "body": "DM Sans",
+ *   "mono": "IBM Plex Mono"
+ * }
+ */
+export function loadTypographyTokens(): TypographyTokens | null {
+  const typographyModule = designSystemFiles['/product/design-system/typography.json']
+  if (!typographyModule?.default) return null
+
+  const typography = typographyModule.default
+  if (!typography.heading || !typography.body) {
+    return null
+  }
+
+  return {
+    heading: typography.heading,
+    body: typography.body,
+    mono: typography.mono || 'IBM Plex Mono',
+  }
+}
+
+/**
+ * Load the complete design system
+ */
+export function loadDesignSystem(): DesignSystem | null {
+  const colors = loadColorTokens()
+  const typography = loadTypographyTokens()
+
+  // Return null if neither colors nor typography are defined
+  if (!colors && !typography) {
+    return null
+  }
+
+  return { colors, typography }
+}
+
+/**
+ * Check if design system has been defined (at least colors or typography)
+ */
+export function hasDesignSystem(): boolean {
+  return (
+    '/product/design-system/colors.json' in designSystemFiles ||
+    '/product/design-system/typography.json' in designSystemFiles
+  )
+}
+
+/**
+ * Check if colors have been defined
+ */
+export function hasColors(): boolean {
+  return '/product/design-system/colors.json' in designSystemFiles
+}
+
+/**
+ * Check if typography has been defined
+ */
+export function hasTypography(): boolean {
+  return '/product/design-system/typography.json' in designSystemFiles
+}

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

@@ -0,0 +1,221 @@
+/**
+ * Product data loading and markdown parsing utilities
+ */
+
+import type { ProductOverview, ProductRoadmap, Problem, Section, ProductData } from '@/types/product'
+import { loadDataModel, hasDataModel } from './data-model-loader'
+import { loadDesignSystem, hasDesignSystem } from './design-system-loader'
+import { loadShellInfo, hasShell } from './shell-loader'
+
+// Load markdown files from /product/ directory at build time
+const productFiles = import.meta.glob('/product/*.md', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+// Load zip files from root directory at build time
+const exportZipFiles = import.meta.glob('/product-plan.zip', {
+  query: '?url',
+  import: 'default',
+  eager: true,
+}) as Record<string, string>
+
+/**
+ * Slugify a string for use as an ID
+ */
+function slugify(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '')
+}
+
+/**
+ * Parse product-overview.md content into ProductOverview structure
+ *
+ * Expected format:
+ * # [Product Name]
+ *
+ * ## Description
+ * [1-3 sentence product description]
+ *
+ * ## Problems & Solutions
+ *
+ * ### Problem 1: [Problem Title]
+ * [How the product solves it]
+ *
+ * ## Key Features
+ * - Feature 1
+ * - Feature 2
+ */
+export function parseProductOverview(md: string): ProductOverview | null {
+  if (!md || !md.trim()) return null
+
+  try {
+    // Extract product name from first # heading
+    const nameMatch = md.match(/^#\s+(.+)$/m)
+    const name = nameMatch?.[1]?.trim() || 'Product Overview'
+
+    // Extract description - content between ## Description and next ##
+    const descMatch = md.match(/## Description\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const description = descMatch?.[1]?.trim() || ''
+
+    // Extract problems - ### Problem N: Title pattern
+    const problemsSection = md.match(/## Problems & Solutions\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const problems: Problem[] = []
+
+    if (problemsSection?.[1]) {
+      const problemMatches = [...problemsSection[1].matchAll(/### Problem \d+:\s*(.+)\n+([\s\S]*?)(?=\n### |\n## |$)/g)]
+      for (const match of problemMatches) {
+        problems.push({
+          title: match[1].trim(),
+          solution: match[2].trim(),
+        })
+      }
+    }
+
+    // Extract features - bullet list after ## Key Features
+    const featuresSection = md.match(/## Key Features\s*\n+([\s\S]*?)(?=\n## |\n#[^#]|$)/)
+    const features: string[] = []
+
+    if (featuresSection?.[1]) {
+      const lines = featuresSection[1].split('\n')
+      for (const line of lines) {
+        const trimmed = line.trim()
+        if (trimmed.startsWith('- ')) {
+          features.push(trimmed.slice(2).trim())
+        }
+      }
+    }
+
+    // Return null if we couldn't parse anything meaningful
+    if (!description && problems.length === 0 && features.length === 0) {
+      return null
+    }
+
+    return { name, description, problems, features }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Parse product-roadmap.md content into ProductRoadmap structure
+ *
+ * Expected format:
+ * # Product Roadmap
+ *
+ * ## Sections
+ *
+ * ### 1. [Section Title]
+ * [One sentence description]
+ *
+ * ### 2. [Section Title]
+ * [One sentence description]
+ */
+export function parseProductRoadmap(md: string): ProductRoadmap | null {
+  if (!md || !md.trim()) return null
+
+  try {
+    const sections: Section[] = []
+
+    // Match sections with pattern: - [ ] **1. Title** \n Description
+    // OR pattern: ### 1. Title \n Description (legacy)
+
+    // Try Legacy Header format first
+    let sectionMatches = [...md.matchAll(/### (\d+)\.\s*(.+)\n+([\s\S]*?)(?=\n### |\n## |\n#[^#]|$)/g)]
+
+    if (sectionMatches.length === 0) {
+      // Try Bullet format: - [ ] **N. Title**
+      // Regex: - [x] **1. Title**
+      const bulletMatches = [...md.matchAll(/-\s+\[([ x])\]\s+\*\*(?:(\d+)\.)?\s*(.+?)\*\*\n\s+([\s\S]+?)(?=\n- |\n### |\n## |$)/g)];
+      for (const match of bulletMatches) {
+        const numberStr = match[2];
+        const title = match[3].trim();
+        const description = match[4].trim();
+        // Use parsed number or auto-increment if missing
+        const order = numberStr ? parseInt(numberStr, 10) : sections.length + 1;
+
+        sections.push({
+          id: slugify(title),
+          title,
+          description,
+          order,
+        })
+      }
+    } else {
+      // Legacy Loop
+      for (const match of sectionMatches) {
+        const order = parseInt(match[1], 10)
+        const title = match[2].trim()
+        const description = match[3].trim()
+
+        sections.push({
+          id: slugify(title),
+          title,
+          description,
+          order,
+        })
+      }
+    }
+
+    // Sort by order
+    sections.sort((a, b) => a.order - b.order)
+
+    if (sections.length === 0) {
+      return null
+    }
+
+    return { sections }
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Load all product data from markdown files and other sources
+ */
+export function loadProductData(): ProductData {
+  const overviewContent = productFiles['/product/product-overview.md']
+  const roadmapContent = productFiles['/product/product-roadmap.md']
+
+  return {
+    overview: overviewContent ? parseProductOverview(overviewContent) : null,
+    roadmap: roadmapContent ? parseProductRoadmap(roadmapContent) : null,
+    dataModel: loadDataModel(),
+    designSystem: loadDesignSystem(),
+    shell: loadShellInfo(),
+  }
+}
+
+/**
+ * Check if product overview has been defined
+ */
+export function hasProductOverview(): boolean {
+  return '/product/product-overview.md' in productFiles
+}
+
+/**
+ * Check if product roadmap has been defined
+ */
+export function hasProductRoadmap(): boolean {
+  return '/product/product-roadmap.md' in productFiles
+}
+
+/**
+ * Check if export zip file exists
+ */
+export function hasExportZip(): boolean {
+  return '/product-plan.zip' in exportZipFiles
+}
+
+/**
+ * Get the URL of the export zip file (if it exists)
+ */
+export function getExportZipUrl(): string | null {
+  return exportZipFiles['/product-plan.zip'] || null
+}
+
+// Re-export utility functions for checking individual pieces
+export { hasDataModel, hasDesignSystem, hasShell }