create-visualbuild-app 0.1.0 → 1.0.0

package/visual-app-builder/src/theme.ts

@@ -0,0 +1,71 @@
+import type { EditorTheme, EditorThemeChoice, ResolvedEditorTheme } from './types'
+
+export const editorThemeStorageKey = 'visualbuild:editor-theme'
+
+export function createEditorThemeStorageKey(projectName: string) {
+  return `${editorThemeStorageKey}:${encodeURIComponent(projectName)}`
+}
+
+export const editorThemeOptions: Array<{
+  id: EditorThemeChoice
+  label: string
+  description: string
+  swatches: [string, string, string]
+}> = [
+  {
+    id: 'default',
+    label: 'VisualBuild Default',
+    description: 'The original deep navy editor',
+    swatches: ['#13151a', '#1a1d23', '#4f6ef7'],
+  },
+  {
+    id: 'codex-dark',
+    label: 'Codex Dark',
+    description: 'Soft neutral charcoal surfaces',
+    swatches: ['#181818', '#202020', '#8b8bff'],
+  },
+  {
+    id: 'vs-light',
+    label: 'VS Code Light',
+    description: 'Bright editor with crisp borders',
+    swatches: ['#f3f3f3', '#ffffff', '#007acc'],
+  },
+  {
+    id: 'vs-dark',
+    label: 'VS Code Dark',
+    description: 'Classic Visual Studio Code dark',
+    swatches: ['#181818', '#252526', '#007acc'],
+  },
+  {
+    id: 'system',
+    label: 'System',
+    description: 'VS Code Light or Dark automatically',
+    swatches: ['#f3f3f3', '#1e1e1e', '#007acc'],
+  },
+]
+
+const themeChoices = new Set<EditorThemeChoice>(
+  editorThemeOptions.map((theme) => theme.id)
+)
+
+export function normalizeEditorTheme(theme: EditorTheme): EditorThemeChoice {
+  if (theme === 'dark') return 'default'
+  if (theme === 'light') return 'vs-light'
+  return theme
+}
+
+export function parseStoredEditorTheme(
+  value: string | null
+): EditorThemeChoice | null {
+  return value && themeChoices.has(value as EditorThemeChoice)
+    ? (value as EditorThemeChoice)
+    : null
+}
+
+export function resolveEditorTheme(
+  theme: EditorThemeChoice,
+  prefersLight: boolean
+): ResolvedEditorTheme {
+  if (theme === 'system') return prefersLight ? 'vs-light' : 'vs-dark'
+  return theme
+}

package/visual-app-builder/src/types/index.ts

@@ -1,261 +1,350 @@
-import type { ReactNode } from 'react'
-
-export type ComponentType =
-  | 'Navbar'
-  | 'Hero'
-  | 'Card'
-  | 'Button'
-  | 'Footer'
-
-export type PrimitiveType =
-  | 'header'
-  | 'main'
-  | 'div'
-  | 'section'
-  | 'nav'
-  | 'article'
-  | 'aside'
-  | 'footer'
-  | 'address'
-  | 'hgroup'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'p'
-  | 'br'
-  | 'hr'
-  | 'pre'
-  | 'blockquote'
-  | 'span'
-  | 'strong'
-  | 'b'
-  | 'em'
-  | 'i'
-  | 'u'
-  | 's'
-  | 'small'
-  | 'mark'
-  | 'sub'
-  | 'sup'
-  | 'code'
-  | 'kbd'
-  | 'samp'
-  | 'var'
-  | 'abbr'
-  | 'cite'
-  | 'q'
-  | 'time'
-  | 'a'
-  | 'ul'
-  | 'ol'
-  | 'li'
-  | 'dl'
-  | 'dt'
-  | 'dd'
-  | 'menu'
-  | 'button'
-  | 'img'
-  | 'picture'
-  | 'source'
-  | 'figure'
-  | 'figcaption'
-  | 'video'
-  | 'audio'
-  | 'iframe'
-  | 'canvas'
-  | 'svg'
-  | 'form'
-  | 'label'
-  | 'input'
-  | 'textarea'
-  | 'select'
-  | 'option'
-  | 'optgroup'
-  | 'fieldset'
-  | 'legend'
-  | 'datalist'
-  | 'output'
-  | 'progress'
-  | 'meter'
-  | 'table'
-  | 'caption'
-  | 'thead'
-  | 'tbody'
-  | 'tfoot'
-  | 'tr'
-  | 'th'
-  | 'td'
-  | 'colgroup'
-  | 'col'
-  | 'details'
-  | 'summary'
-  | 'dialog'
-
-export type AppShellSlot = 'header' | 'footer'
-
-export type Viewport = 'mobile' | 'tablet' | 'desktop'
-
-export type ProjectRefreshResult =
-  | 'updated'
-  | 'skipped-dirty'
-  | 'failed'
-
-export type PropType =
-  | 'string'
-  | 'text'
-  | 'number'
-  | 'boolean'
-  | 'color'
-  | 'select'
-  | 'array'
-
-export interface PropSchema {
-  type: PropType
-  label: string
-  default: unknown
-  options?: string[]
-}
-
-export interface ComponentDefinition {
-  type: ComponentType
-  label: string
-  category: string
-  icon: string
-  description: string
-  defaultProps: Record<string, unknown>
-  propSchema: Record<string, PropSchema>
-  renderer: (
-    props: Record<string, unknown>,
-    context: ComponentRenderContext
-  ) => ReactNode
-  generator: (props: Record<string, unknown>) => string
-  source: () => string
-}
-
-export interface PrimitiveDefinition {
-  type: PrimitiveType
-  label: string
-  category: string
-  icon: string
-  description: string
-  defaultProps: Record<string, unknown>
-  propSchema: Record<string, PropSchema>
-  acceptsChildren: boolean
-}
-
-export interface ComponentRenderContext {
-  pages: Page[]
-  activePageId: string
-  setActivePage: (id: string) => void
-}
-
-export interface VisualNode {
-  id: string
-  type: PrimitiveType
-  label?: string
-  props: Record<string, unknown>
-  children: VisualNode[]
-}
-
-export interface Page {
-  id: string
-  name: string
-  route: string
-  sourcePath: string
-  root: VisualNode
-  components: VisualNode[]
-}
-
-export interface AppShell {
-  header: VisualNode | null
-  footer: VisualNode | null
-}
-
-export interface AppState {
-  projectName: string
-  appShell: AppShell
-  pages: Page[]
-  activePageId: string
-  selectedComponentId: string | null
-  viewport: Viewport
-  previewMode: boolean
-  isProjectLoaded: boolean
-  // Actions
-  loadProject: () => Promise<void>
-  refreshProjectFromDisk: (
-    force?: boolean
-  ) => Promise<ProjectRefreshResult>
-  saveProject: () => Promise<void>
-  addPage: (name: string, route: string) => Page
-  registerPage: (page: Page) => void
-  deletePage: (id: string) => void
-  setActivePage: (id: string) => void
-  setSelectedComponent: (id: string | null) => void
-  setViewport: (viewport: Viewport) => void
-  togglePreviewMode: () => void
-  addComponent: (pageId: string, type: ComponentType) => void
-  addComponentAt: (
-    pageId: string,
-    type: ComponentType,
-    index: number
-  ) => void
-  addPrimitive: (pageId: string, type: PrimitiveType) => void
-  addPrimitiveAt: (
-    pageId: string,
-    type: PrimitiveType,
-    index: number
-  ) => void
-  addPrimitiveToNode: (
-    parentNodeId: string,
-    type: PrimitiveType
-  ) => void
-  addPrimitiveToNodeAt: (
-    parentNodeId: string,
-    type: PrimitiveType,
-    index: number
-  ) => void
-  addComponentToNode: (
-    parentNodeId: string,
-    type: ComponentType
-  ) => void
-  addComponentToNodeAt: (
-    parentNodeId: string,
-    type: ComponentType,
-    index: number
-  ) => void
-  removeNode: (nodeId: string) => void
-  moveNode: (
-    pageId: string,
-    nodeId: string,
-    targetParentNodeId: string | null,
-    targetIndex: number
-  ) => void
-  moveComponent: (
-    pageId: string,
-    nodeId: string,
-    targetIndex: number
-  ) => void
-  removeComponent: (pageId: string, nodeId: string) => void
-  setAppShellComponent: (slot: AppShellSlot, type: ComponentType) => void
-  removeAppShellComponent: (slot: AppShellSlot) => void
-  updateComponentProps: (
-    pageId: string,
-    nodeId: string,
-    props: Record<string, unknown>
-  ) => void
-  updateNodeProps: (nodeId: string, props: Record<string, unknown>) => void
-  updatePageRoot: (
-    pageId: string,
-    updates: {
-      type?: PrimitiveType
-      props?: Record<string, unknown>
-    }
-  ) => void
-  updateAppShellProps: (
-    slot: AppShellSlot,
-    props: Record<string, unknown>
-  ) => void
-}
+import type { ReactNode } from 'react'
+
+export type ComponentType =
+  | 'Navbar'
+  | 'Hero'
+  | 'Card'
+  | 'Button'
+  | 'Footer'
+  | 'Grid'
+  | 'Testimonials'
+  | 'Pricing'
+  | 'Form'
+  | 'Image'
+  | 'Features'
+  | 'Gallery'
+  | 'FAQ'
+  | 'ContactForm'
+  | 'LoginForm'
+
+export type PrimitiveType =
+  | 'header'
+  | 'main'
+  | 'div'
+  | 'section'
+  | 'nav'
+  | 'article'
+  | 'aside'
+  | 'footer'
+  | 'address'
+  | 'hgroup'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'p'
+  | 'br'
+  | 'hr'
+  | 'pre'
+  | 'blockquote'
+  | 'span'
+  | 'strong'
+  | 'b'
+  | 'em'
+  | 'i'
+  | 'u'
+  | 's'
+  | 'small'
+  | 'mark'
+  | 'sub'
+  | 'sup'
+  | 'code'
+  | 'kbd'
+  | 'samp'
+  | 'var'
+  | 'abbr'
+  | 'cite'
+  | 'q'
+  | 'time'
+  | 'a'
+  | 'ul'
+  | 'ol'
+  | 'li'
+  | 'dl'
+  | 'dt'
+  | 'dd'
+  | 'menu'
+  | 'button'
+  | 'img'
+  | 'picture'
+  | 'source'
+  | 'figure'
+  | 'figcaption'
+  | 'video'
+  | 'audio'
+  | 'iframe'
+  | 'canvas'
+  | 'svg'
+  | 'form'
+  | 'label'
+  | 'input'
+  | 'textarea'
+  | 'select'
+  | 'option'
+  | 'optgroup'
+  | 'fieldset'
+  | 'legend'
+  | 'datalist'
+  | 'output'
+  | 'progress'
+  | 'meter'
+  | 'table'
+  | 'caption'
+  | 'thead'
+  | 'tbody'
+  | 'tfoot'
+  | 'tr'
+  | 'th'
+  | 'td'
+  | 'colgroup'
+  | 'col'
+  | 'details'
+  | 'summary'
+  | 'dialog'
+
+export type AppShellSlot = 'header' | 'footer'
+
+export type Viewport = 'mobile' | 'tablet' | 'desktop'
+export type EditorThemeChoice =
+  | 'default'
+  | 'codex-dark'
+  | 'vs-light'
+  | 'vs-dark'
+  | 'system'
+export type EditorTheme = EditorThemeChoice | 'dark' | 'light'
+export type ResolvedEditorTheme = Exclude<EditorThemeChoice, 'system'>
+
+export interface VisualBuildRuntimeConfig {
+  paths: {
+    sourceDir: string
+    pagesDir: string
+    layoutsDir: string
+    appFile: string
+    schemaFile: string
+    componentRegistryFile: string
+    generatedManifestFile: string
+  }
+  editor: {
+    theme: EditorTheme
+    defaultViewport: Viewport
+    responsiveWidths: {
+      mobile: number
+      tablet: number
+      desktop: number | 'fluid'
+    }
+    panels: {
+      leftOpen: boolean
+      leftTab: 'files' | 'elements'
+      rightOpen: boolean
+      rightTab: 'code' | 'properties'
+      codeView: 'page' | 'app' | 'layout' | 'schema' | 'file'
+    }
+  }
+  generator: {
+    emitApp: boolean
+    emitLayout: boolean
+    cleanStaleFiles: boolean
+  }
+  deployment: {
+    provider: 'vercel'
+    outputDirectory: string
+    projectName?: string
+    teamId?: string
+  }
+}
+
+export type ProjectRefreshResult =
+  | 'updated'
+  | 'skipped-dirty'
+  | 'failed'
+
+export type PropType =
+  | 'string'
+  | 'text'
+  | 'number'
+  | 'boolean'
+  | 'color'
+  | 'select'
+  | 'array'
+  | 'attributes'
+
+export interface PropSchema {
+  type: PropType
+  label: string
+  default: unknown
+  options?: string[]
+}
+
+export interface CustomComponentDefinition {
+  name: string
+  label: string
+  category: string
+  icon: string
+  description: string
+  importPath: string
+  exportName: 'default' | string
+  defaultProps: Record<string, unknown>
+  propSchema: Record<string, PropSchema>
+  acceptsChildren: boolean
+  preview?: {
+    rootTag: string
+    rootProps: Record<string, unknown>
+    children: VisualNode[]
+    rendersChildren: boolean
+  }
+}
+
+export interface ComponentDefinition {
+  type: ComponentType
+  label: string
+  category: string
+  icon: string
+  description: string
+  defaultProps: Record<string, unknown>
+  propSchema: Record<string, PropSchema>
+  renderer: (
+    props: Record<string, unknown>,
+    context: ComponentRenderContext
+  ) => ReactNode
+  generator: (props: Record<string, unknown>) => string
+  source: () => string
+}
+
+export interface PrimitiveDefinition {
+  type: PrimitiveType
+  label: string
+  category: string
+  icon: string
+  description: string
+  defaultProps: Record<string, unknown>
+  propSchema: Record<string, PropSchema>
+  acceptsChildren: boolean
+}
+
+export interface ComponentRenderContext {
+  pages: Page[]
+  activePageId: string
+  setActivePage: (id: string) => void
+}
+
+export interface VisualNode {
+  id: string
+  type: PrimitiveType | string
+  label?: string
+  props: Record<string, unknown>
+  children: VisualNode[]
+}
+
+export interface Page {
+  id: string
+  name: string
+  route: string
+  sourcePath: string
+  root: VisualNode
+  components: VisualNode[]
+}
+
+export interface AppShell {
+  header: VisualNode | null
+  footer: VisualNode | null
+}
+
+export interface AppState {
+  projectName: string
+  appShell: AppShell
+  pages: Page[]
+  activePageId: string
+  selectedComponentId: string | null
+  viewport: Viewport
+  previewMode: boolean
+  isProjectLoaded: boolean
+  customComponents: CustomComponentDefinition[]
+  projectConfig: VisualBuildRuntimeConfig
+  // Actions
+  loadProject: () => Promise<void>
+  refreshCustomComponents: () => Promise<void>
+  refreshProjectFromDisk: (
+    force?: boolean
+  ) => Promise<ProjectRefreshResult>
+  saveProject: () => Promise<void>
+  addPage: (name: string, route: string) => Page
+  registerPage: (page: Page) => void
+  deletePage: (id: string) => void
+  setActivePage: (id: string) => void
+  setSelectedComponent: (id: string | null) => void
+  setViewport: (viewport: Viewport) => void
+  togglePreviewMode: () => void
+  addComponent: (pageId: string, type: ComponentType) => void
+  addComponentAt: (
+    pageId: string,
+    type: ComponentType,
+    index: number
+  ) => void
+  addPrimitive: (pageId: string, type: PrimitiveType) => void
+  addPrimitiveAt: (
+    pageId: string,
+    type: PrimitiveType,
+    index: number
+  ) => void
+  addPrimitiveToNode: (
+    parentNodeId: string,
+    type: PrimitiveType
+  ) => void
+  addPrimitiveToNodeAt: (
+    parentNodeId: string,
+    type: PrimitiveType,
+    index: number
+  ) => void
+  addComponentToNode: (
+    parentNodeId: string,
+    type: ComponentType
+  ) => void
+  addComponentToNodeAt: (
+    parentNodeId: string,
+    type: ComponentType,
+    index: number
+  ) => void
+  addCustomComponent: (pageId: string, name: string) => void
+  addCustomComponentAt: (pageId: string, name: string, index: number) => void
+  addCustomComponentToNode: (parentNodeId: string, name: string) => void
+  addCustomComponentToNodeAt: (
+    parentNodeId: string,
+    name: string,
+    index: number
+  ) => void
+  registerCustomComponent: (definition: CustomComponentDefinition) => void
+  removeNode: (nodeId: string) => void
+  moveNode: (
+    pageId: string,
+    nodeId: string,
+    targetParentNodeId: string | null,
+    targetIndex: number
+  ) => void
+  moveComponent: (
+    pageId: string,
+    nodeId: string,
+    targetIndex: number
+  ) => void
+  removeComponent: (pageId: string, nodeId: string) => void
+  setAppShellComponent: (slot: AppShellSlot, type: ComponentType) => void
+  removeAppShellComponent: (slot: AppShellSlot) => void
+  updateComponentProps: (
+    pageId: string,
+    nodeId: string,
+    props: Record<string, unknown>
+  ) => void
+  updateNodeProps: (nodeId: string, props: Record<string, unknown>) => void
+  updatePageRoot: (
+    pageId: string,
+    updates: {
+      type?: PrimitiveType
+      props?: Record<string, unknown>
+    }
+  ) => void
+  updateAppShellProps: (
+    slot: AppShellSlot,
+    props: Record<string, unknown>
+  ) => void
+}