create-visualbuild-app 0.1.0

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

@@ -0,0 +1,36 @@
+export const generatedStarterClassNames = `
+  min-h-screen bg-slate-950 text-white flex items-center justify-center px-6
+  w-full max-w-5xl rounded-2xl border border-white/10 bg-white/10 px-8 py-12 text-center shadow-2xl backdrop-blur
+  mb-4 text-xs font-semibold uppercase tracking-[0.28em] text-blue-300
+  text-4xl font-bold tracking-tight sm:text-5xl
+  mx-auto mt-5 max-w-2xl text-base text-slate-300
+  mt-8 flex-wrap gap-3
+  rounded-lg bg-blue-500 px-5 py-3 text-sm shadow-lg shadow-blue-500/25 hover:bg-blue-400
+  text-slate-400
+`
+
+export const editableCanvasClassNames = `
+  block inline inline-block inline-flex flex grid hidden contents
+  flex-row flex-col flex-wrap items-start items-center items-end items-stretch justify-start justify-center justify-end justify-between justify-around content-center self-start self-center self-end
+  gap-0 gap-1 gap-2 gap-3 gap-4 gap-5 gap-6 gap-8 gap-10 gap-12
+  grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-5 grid-cols-6 col-span-1 col-span-2 col-span-3 col-span-full
+  w-full w-screen w-auto w-fit w-1/2 w-1/3 w-2/3 w-1/4 w-3/4 min-w-0 max-w-sm max-w-md max-w-lg max-w-xl max-w-2xl max-w-3xl max-w-4xl max-w-5xl max-w-6xl max-w-full
+  h-full h-screen h-auto min-h-0 min-h-6 min-h-8 min-h-10 min-h-12 min-h-16 min-h-24 min-h-32 min-h-48 min-h-screen
+  p-0 p-1 p-2 p-3 p-4 p-5 p-6 p-8 p-10 p-12
+  px-0 px-1 px-2 px-3 px-4 px-5 px-6 px-8 px-10 px-12
+  py-0 py-1 py-2 py-3 py-4 py-5 py-6 py-8 py-10 py-12
+  pt-0 pt-1 pt-2 pt-3 pt-4 pt-5 pt-6 pt-8 pb-0 pb-1 pb-2 pb-3 pb-4 pb-5 pb-6 pb-8
+  pl-0 pl-1 pl-2 pl-3 pl-4 pl-5 pl-6 pl-8 pr-0 pr-1 pr-2 pr-3 pr-4 pr-5 pr-6 pr-8
+  m-0 m-1 m-2 m-3 m-4 m-5 m-6 m-8 mx-auto mx-0 mx-1 mx-2 mx-3 mx-4 mx-5 mx-6 mx-8 my-0 my-1 my-2 my-3 my-4 my-5 my-6 my-8
+  mt-0 mt-1 mt-2 mt-3 mt-4 mt-5 mt-6 mt-8 mb-0 mb-1 mb-2 mb-3 mb-4 mb-5 mb-6 mb-8
+  space-y-1 space-y-2 space-y-3 space-y-4 space-y-5 space-y-6 space-x-1 space-x-2 space-x-3 space-x-4 space-x-5 space-x-6
+  text-left text-center text-right text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl text-5xl font-thin font-light font-normal font-medium font-semibold font-bold font-extrabold italic not-italic underline line-through leading-none leading-tight leading-normal leading-relaxed tracking-tight tracking-normal tracking-wide tracking-widest uppercase lowercase capitalize
+  text-white text-black text-gray-50 text-gray-100 text-gray-200 text-gray-300 text-gray-400 text-gray-500 text-gray-600 text-gray-700 text-gray-800 text-gray-900 text-slate-300 text-slate-400 text-slate-950 text-red-500 text-orange-500 text-amber-500 text-yellow-500 text-green-500 text-emerald-500 text-teal-500 text-cyan-500 text-sky-500 text-blue-100 text-blue-300 text-blue-400 text-blue-500 text-blue-600 text-blue-700 text-indigo-500 text-indigo-600 text-indigo-700 text-violet-500 text-purple-500 text-pink-500
+  bg-white bg-black bg-transparent bg-slate-950 bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-800 bg-gray-900 bg-gray-950 bg-red-500 bg-orange-500 bg-yellow-500 bg-green-500 bg-blue-500 bg-blue-600 bg-blue-700 bg-indigo-600 bg-indigo-700 bg-purple-600
+  bg-white/10 bg-white/20 bg-gray-950/25 bg-blue-100/20 bg-gradient-to-br from-blue-600 to-indigo-700
+  border border-0 border-2 border-t border-b border-l border-r border-transparent border-white border-black border-gray-200 border-gray-300 border-gray-700 border-blue-500 border-white/10 border-white/20
+  rounded rounded-sm rounded-md rounded-lg rounded-xl rounded-2xl rounded-full
+  shadow shadow-sm shadow-md shadow-lg shadow-xl shadow-2xl shadow-blue-500/25
+  overflow-hidden overflow-auto overflow-x-auto overflow-y-auto relative absolute fixed sticky top-0 right-0 bottom-0 left-0 z-10 z-20 z-50
+  opacity-0 opacity-50 opacity-75 opacity-100 cursor-pointer select-none transition transition-colors duration-150 duration-200 hover:bg-blue-400 hover:bg-gray-100 hover:bg-gray-900 hover:text-white hover:text-black focus:outline-none focus:ring-2 focus:ring-blue-500 backdrop-blur backdrop-blur-sm
+`

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

@@ -0,0 +1,261 @@
+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
+}

package/visual-app-builder/src/utils/codegen.ts

@@ -0,0 +1,66 @@
+import {
+  createPageSourcePath as createAstPageSourcePath,
+  generateAppSource,
+  generateLayoutSource,
+  generateNodeSource,
+  generatePageSource,
+  getPageSourcePath as getAstPageSourcePath,
+  toPageComponentName as toAstPageComponentName,
+} from '../../shared/generateReactSource.mjs'
+import type { AppShell, ComponentType, Page, VisualNode } from '../types'
+
+export function generatePageCode(page: Page): string {
+  return generatePageSource(page).trimEnd()
+}
+
+export function generateAppCode(pages: Page[], appShell: AppShell): string {
+  return generateAppSource(pages, appShell).trimEnd()
+}
+
+export function generateLayoutCode(appShell: AppShell): string {
+  return generateLayoutSource(appShell).trimEnd()
+}
+
+export function generateProjectSchema(
+  pages: Page[],
+  appShell: AppShell,
+  projectName = 'my-blog'
+): string {
+  return JSON.stringify(
+    {
+      meta: {
+        projectName,
+        framework: 'react',
+        styling: 'tailwind',
+      },
+      appShell,
+      pages,
+    },
+    null,
+    2
+  )
+}
+
+export function generateComponentSource(type: ComponentType): string {
+  return `export function ${type}() {
+  return null
+}`
+}
+
+export function toPageComponentName(name: string): string {
+  return toAstPageComponentName(name)
+}
+
+export function getPageSourcePath(
+  page: Pick<Page, 'name' | 'sourcePath'>
+): string {
+  return getAstPageSourcePath(page)
+}
+
+export function createPageSourcePath(name: string): string {
+  return createAstPageSourcePath(name)
+}
+
+export function generateNodeCode(node: VisualNode, indent: string): string {
+  return generateNodeSource(node, indent)
+}

package/visual-app-builder/src/utils/projectFiles.ts

@@ -0,0 +1,146 @@
+export type ProjectEntryKind = 'file' | 'directory' | 'symlink'
+
+export interface ProjectEntry {
+  name: string
+  path: string
+  kind: ProjectEntryKind
+}
+
+export interface ProjectDirectory {
+  rootName: string
+  path: string
+  entries: ProjectEntry[]
+}
+
+export interface ProjectFile {
+  path: string
+  content: string
+  size: number
+  isBinary: boolean
+  isTooLarge: boolean
+}
+
+export async function listProjectDirectory(path = '') {
+  return requestJson<ProjectDirectory>(
+    `/__visualbuild/files?path=${encodeURIComponent(path)}`
+  )
+}
+
+const excludedMoveDirectoryNames = new Set(['node_modules'])
+
+export async function listProjectDirectories() {
+  const root = await listProjectDirectory()
+  const directories: ProjectEntry[] = [
+    { name: root.rootName, path: '', kind: 'directory' },
+  ]
+  let pendingPaths = ['']
+
+  while (pendingPaths.length > 0) {
+    const results = await Promise.all(
+      pendingPaths.map((directoryPath) =>
+        listProjectDirectory(directoryPath)
+      )
+    )
+    const nextPaths: string[] = []
+
+    for (const result of results) {
+      for (const entry of result.entries) {
+        if (
+          entry.kind !== 'directory' ||
+          excludedMoveDirectoryNames.has(entry.name)
+        ) {
+          continue
+        }
+
+        directories.push(entry)
+        nextPaths.push(entry.path)
+      }
+    }
+
+    pendingPaths = nextPaths
+  }
+
+  return directories.sort((left, right) =>
+    left.path.localeCompare(right.path)
+  )
+}
+
+export async function createProjectEntry(
+  parentPath: string,
+  name: string,
+  kind: 'file' | 'directory'
+) {
+  return requestJson<ProjectEntry>('/__visualbuild/files', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ parentPath, name, kind }),
+  })
+}
+
+export async function renameProjectEntry(path: string, name: string) {
+  return requestJson<ProjectEntry>('/__visualbuild/files', {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path, name }),
+  })
+}
+
+export async function moveProjectEntry(
+  path: string,
+  parentPath: string
+) {
+  const name = path.split('/').pop()
+
+  if (!name) {
+    throw new Error('The project root cannot be moved')
+  }
+
+  return requestJson<ProjectEntry>('/__visualbuild/files', {
+    method: 'PATCH',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path, name, parentPath }),
+  })
+}
+
+export async function deleteProjectEntry(path: string) {
+  await request(`/__visualbuild/files?path=${encodeURIComponent(path)}`, {
+    method: 'DELETE',
+  })
+}
+
+export async function loadProjectFile(path: string) {
+  return requestJson<ProjectFile>(
+    `/__visualbuild/file?path=${encodeURIComponent(path)}`
+  )
+}
+
+export async function saveProjectFile(path: string, content: string) {
+  await request('/__visualbuild/file', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path, content }),
+  })
+  notifyProjectFilesChanged()
+}
+
+export function notifyProjectFilesChanged() {
+  window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
+}
+
+async function requestJson<T>(url: string, init?: RequestInit) {
+  const response = await request(url, init)
+  return (await response.json()) as T
+}
+
+async function request(url: string, init?: RequestInit) {
+  const response = await fetch(url, init)
+
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => null)) as {
+      error?: string
+    } | null
+    throw new Error(payload?.error ?? `Request failed with ${response.status}`)
+  }
+
+  return response
+}

package/visual-app-builder/src/utils/projectPersistence.ts

@@ -0,0 +1,177 @@
+import type { AppShell, Page } from '../types'
+
+export interface ProjectSchema {
+  meta: {
+    projectName: string
+    framework: string
+    styling: string
+  }
+  appShell: AppShell
+  pages: Page[]
+  runtimeProjectId?: string
+}
+
+export type ImportedProjectPage = Page
+
+export interface GeneratorDiagnostic {
+  severity: 'error'
+  phase: 'generate'
+  code: string
+  title: string
+  message: string
+  path: string
+  suggestion?: string
+}
+
+class ProjectSaveError extends Error {
+  diagnostic?: GeneratorDiagnostic
+
+  constructor(message: string, diagnostic?: GeneratorDiagnostic) {
+    super(message)
+    this.name = 'ProjectSaveError'
+    this.diagnostic = diagnostic
+  }
+}
+
+export function getGeneratorDiagnostic(error: unknown) {
+  return error instanceof ProjectSaveError ? error.diagnostic : undefined
+}
+
+export function createProjectSchema(
+  pages: Page[],
+  appShell: AppShell,
+  projectName = 'my-blog'
+): ProjectSchema {
+  return {
+    meta: {
+      projectName,
+      framework: 'react',
+      styling: 'tailwind',
+    },
+    appShell,
+    pages,
+  }
+}
+
+export async function loadProjectSchema(): Promise<ProjectSchema | null> {
+  const response = await fetch('/__visualbuild/pages')
+
+  if (!response.ok) {
+    return null
+  }
+
+  const schema = (await response.json()) as ProjectSchema
+
+  return {
+    ...schema,
+    runtimeProjectId:
+      response.headers.get('X-VisualBuild-Project-Id') ?? undefined,
+  }
+}
+
+export async function saveProjectSchema(
+  pages: Page[],
+  appShell: AppShell,
+  projectName: string
+) {
+  const response = await fetch('/__visualbuild/pages', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(createProjectSchema(pages, appShell, projectName), null, 2),
+  })
+
+  if (!response.ok) {
+    const responseBody = await response.text()
+    let payload: {
+      error?: string
+      diagnostic?: GeneratorDiagnostic
+    } | null = null
+
+    try {
+      payload = JSON.parse(responseBody) as {
+        error?: string
+        diagnostic?: GeneratorDiagnostic
+      }
+    } catch {
+      // Older servers may still return a plain error string.
+    }
+
+    throw new ProjectSaveError(
+      payload?.error ||
+        responseBody ||
+        'Failed to save VisualBuild project',
+      payload?.diagnostic
+    )
+  }
+
+  notifyProjectFilesChanged()
+}
+
+export async function importProjectPage(
+  path: string,
+  name: string,
+  route: string
+) {
+  const response = await fetch('/__visualbuild/import-page', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ path, name, route }),
+  })
+
+  if (!response.ok) {
+    const payload = (await response.json().catch(() => null)) as {
+      error?: string
+    } | null
+    throw new Error(payload?.error ?? 'Failed to import page source')
+  }
+
+  return (await response.json()) as ImportedProjectPage
+}
+
+export async function syncTailwindClasses(pages: Page[], appShell: AppShell) {
+  const classNames = collectProjectClassNames(pages, appShell)
+  const response = await fetch('/__visualbuild/tailwind', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'text/plain',
+    },
+    body: classNames.join('\n'),
+  })
+
+  if (!response.ok) {
+    throw new Error(
+      (await response.text()) || 'Failed to compile Tailwind classes'
+    )
+  }
+}
+
+function collectProjectClassNames(pages: Page[], appShell: AppShell) {
+  const classNames = new Set<string>()
+  const visitNode = (node: Page['root']) => {
+    const value = String(node.props.className ?? '').trim()
+
+    if (value) {
+      classNames.add(value)
+    }
+
+    node.children.forEach(visitNode)
+  }
+
+  if (appShell.header) visitNode(appShell.header)
+  if (appShell.footer) visitNode(appShell.footer)
+
+  pages.forEach((page) => {
+    visitNode(page.root)
+    page.components.forEach(visitNode)
+  })
+
+  return [...classNames]
+}
+
+function notifyProjectFilesChanged() {
+  window.dispatchEvent(new Event('visualbuild:filesystem-changed'))
+}