create-visualbuild-app 0.1.0

package/visual-app-builder/src/components/CodePanel.tsx

@@ -0,0 +1,812 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useAppStore } from '../stores/useAppStore'
+import {
+  getPageSourcePath,
+  generateAppCode,
+  generateLayoutCode,
+  generatePageCode,
+  generateProjectSchema,
+} from '../utils/codegen'
+import { importProjectPage } from '../utils/projectPersistence'
+import {
+  loadProjectFile,
+  saveProjectFile,
+  type ProjectFile,
+} from '../utils/projectFiles'
+import type { Page } from '../types'
+import ProjectExplorer from './ProjectExplorer'
+
+export type CodeView = 'page' | 'app' | 'layout' | 'schema' | 'file'
+
+interface FileSystemChangeDetail {
+  type: 'filesystem-change'
+  path: string
+  action: 'add' | 'change' | 'unlink' | 'addDir' | 'unlinkDir'
+}
+
+const externalMoveMatchWindowMs = 1600
+
+function getProjectFileName(path: string) {
+  return path.split('/').pop() ?? path
+}
+
+export default function CodePanel({
+  view,
+  onViewChange,
+  onPageRegistered,
+  onWorkspaceSelectFile,
+  filePath,
+  embedded = false,
+}: {
+  view: CodeView
+  onViewChange: (view: CodeView) => void
+  onPageRegistered?: (page: Page) => void
+  onWorkspaceSelectFile?: (path: string) => void
+  filePath?: string | null
+  embedded?: boolean
+}) {
+  const {
+    appShell,
+    pages,
+    activePageId,
+    projectName,
+    registerPage,
+    saveProject,
+    setActivePage,
+    setSelectedComponent,
+  } = useAppStore()
+  const [copied, setCopied] = useState(false)
+  const [projectFile, setProjectFile] = useState<ProjectFile | null>(null)
+  const [fileContent, setFileContent] = useState('')
+  const [fileLoading, setFileLoading] = useState(false)
+  const [fileError, setFileError] = useState<string | null>(null)
+  const [fileSaveState, setFileSaveState] = useState<
+    'idle' | 'saving' | 'saved'
+  >('idle')
+  const [fileReloadVersion, setFileReloadVersion] = useState(0)
+  const [externalFileChangePending, setExternalFileChangePending] =
+    useState(false)
+  const fileStateRef = useRef({
+    view,
+    filePath,
+    projectFile,
+    fileContent,
+  })
+  const workspaceSelectFileRef = useRef(onWorkspaceSelectFile)
+  const recentAddedFilesRef = useRef(new Map<string, number>())
+  const pendingMovedFileRef = useRef<{
+    path: string
+    fileName: string
+  } | null>(null)
+  const missingFileTimerRef = useRef<number | null>(null)
+  const [registeringPage, setRegisteringPage] = useState(false)
+  const [registerName, setRegisterName] = useState('')
+  const [registerRoute, setRegisterRoute] = useState('')
+  const [registerError, setRegisterError] = useState<string | null>(null)
+  const [registerBusy, setRegisterBusy] = useState(false)
+  const [workspaceOpen, setWorkspaceOpen] = useState(false)
+  const activePage = pages.find((page) => page.id === activePageId) ?? pages[0]
+
+  useEffect(() => {
+    if (!workspaceOpen) return
+
+    const previousOverflow = document.body.style.overflow
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setWorkspaceOpen(false)
+      }
+    }
+
+    document.body.style.overflow = 'hidden'
+    window.addEventListener('keydown', closeOnEscape)
+
+    return () => {
+      document.body.style.overflow = previousOverflow
+      window.removeEventListener('keydown', closeOnEscape)
+    }
+  }, [workspaceOpen])
+
+  useEffect(() => {
+    fileStateRef.current = {
+      view,
+      filePath,
+      projectFile,
+      fileContent,
+    }
+  }, [fileContent, filePath, projectFile, view])
+
+  useEffect(() => {
+    workspaceSelectFileRef.current = onWorkspaceSelectFile
+  }, [onWorkspaceSelectFile])
+
+  useEffect(
+    () => () => {
+      if (missingFileTimerRef.current !== null) {
+        window.clearTimeout(missingFileTimerRef.current)
+      }
+    },
+    []
+  )
+
+  useEffect(() => {
+    if (view !== 'file' || !filePath) return
+    let cancelled = false
+
+    pendingMovedFileRef.current = null
+    if (missingFileTimerRef.current !== null) {
+      window.clearTimeout(missingFileTimerRef.current)
+      missingFileTimerRef.current = null
+    }
+
+    void Promise.resolve().then(async () => {
+      if (cancelled) return
+      setFileLoading(true)
+      setFileError(null)
+      setFileSaveState('idle')
+      setExternalFileChangePending(false)
+
+      try {
+        const nextFile = await loadProjectFile(filePath)
+
+        if (cancelled) return
+        setProjectFile(nextFile)
+        setFileContent(nextFile.content)
+      } catch (error) {
+        if (cancelled) return
+        setProjectFile(null)
+        setFileError(getErrorMessage(error))
+      } finally {
+        if (!cancelled) setFileLoading(false)
+      }
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [filePath, fileReloadVersion, view])
+
+  useEffect(() => {
+    const handleFileSystemChange = (event: Event) => {
+      const detail = (event as CustomEvent<FileSystemChangeDetail>).detail
+      const current = fileStateRef.current
+      const normalizedEventPath = detail?.path.replace(/\\/g, '/') ?? ''
+      const normalizedCurrentPath = current.filePath?.replace(/\\/g, '/')
+      const now = Date.now()
+
+      if (
+        !detail ||
+        detail.type !== 'filesystem-change' ||
+        current.view !== 'file' ||
+        !normalizedCurrentPath
+      ) {
+        return
+      }
+
+      for (const [addedPath, addedAt] of recentAddedFilesRef.current) {
+        if (now - addedAt > externalMoveMatchWindowMs) {
+          recentAddedFilesRef.current.delete(addedPath)
+        }
+      }
+
+      if (detail.action === 'add') {
+        recentAddedFilesRef.current.set(normalizedEventPath, now)
+        const pendingMove = pendingMovedFileRef.current
+
+        if (
+          pendingMove &&
+          normalizedEventPath !== pendingMove.path &&
+          getProjectFileName(normalizedEventPath) === pendingMove.fileName
+        ) {
+          pendingMovedFileRef.current = null
+          if (missingFileTimerRef.current !== null) {
+            window.clearTimeout(missingFileTimerRef.current)
+            missingFileTimerRef.current = null
+          }
+          setFileError(null)
+          workspaceSelectFileRef.current?.(normalizedEventPath)
+          return
+        }
+      }
+
+      const selectedPathWasRemoved =
+        (detail.action === 'unlink' &&
+          normalizedEventPath === normalizedCurrentPath) ||
+        (detail.action === 'unlinkDir' &&
+          normalizedCurrentPath.startsWith(`${normalizedEventPath}/`))
+
+      if (selectedPathWasRemoved) {
+        const hasLocalEdits =
+          current.projectFile?.content !== current.fileContent
+
+        if (hasLocalEdits) {
+          setExternalFileChangePending(true)
+          return
+        }
+
+        const fileName = getProjectFileName(normalizedCurrentPath)
+        const movedPath = Array.from(
+          recentAddedFilesRef.current.entries()
+        )
+          .filter(
+            ([addedPath, addedAt]) =>
+              addedPath !== normalizedCurrentPath &&
+              now - addedAt <= externalMoveMatchWindowMs &&
+              getProjectFileName(addedPath) === fileName
+          )
+          .sort((left, right) => right[1] - left[1])[0]?.[0]
+
+        if (movedPath) {
+          setFileError(null)
+          workspaceSelectFileRef.current?.(movedPath)
+          return
+        }
+
+        pendingMovedFileRef.current = {
+          path: normalizedCurrentPath,
+          fileName,
+        }
+        setFileError(null)
+
+        if (missingFileTimerRef.current !== null) {
+          window.clearTimeout(missingFileTimerRef.current)
+        }
+        missingFileTimerRef.current = window.setTimeout(() => {
+          if (pendingMovedFileRef.current?.path !== normalizedCurrentPath) {
+            return
+          }
+
+          pendingMovedFileRef.current = null
+          missingFileTimerRef.current = null
+          setProjectFile(null)
+          setFileError('This file was removed from the project.')
+        }, externalMoveMatchWindowMs)
+        return
+      }
+
+      if (normalizedEventPath !== normalizedCurrentPath) {
+        return
+      }
+
+      const hasLocalEdits =
+        current.projectFile?.content !== current.fileContent
+
+      if (hasLocalEdits) {
+        setExternalFileChangePending(true)
+        return
+      }
+
+      setFileReloadVersion((version) => version + 1)
+    }
+
+    window.addEventListener(
+      'visualbuild:filesystem-changed',
+      handleFileSystemChange
+    )
+    return () =>
+      window.removeEventListener(
+        'visualbuild:filesystem-changed',
+        handleFileSystemChange
+      )
+  }, [])
+
+  const generated = useMemo(() => {
+    if (view === 'file') {
+      return {
+        filename: filePath ?? 'No file selected',
+        code: fileContent,
+      }
+    }
+
+    if (view === 'page') {
+      return {
+        filename: getPageSourcePath(activePage),
+        code: generatePageCode(activePage),
+      }
+    }
+
+    if (view === 'app') {
+      return {
+        filename: 'src/App.tsx',
+        code: generateAppCode(pages, appShell),
+      }
+    }
+
+    if (view === 'layout') {
+      return {
+        filename: 'src/layouts/AppLayout.tsx',
+        code: generateLayoutCode(appShell),
+      }
+    }
+
+    if (view === 'schema') {
+      return {
+        filename: 'visualbuild/pages.json',
+        code: generateProjectSchema(pages, appShell, projectName),
+      }
+    }
+
+    return {
+      filename: 'visualbuild/pages.json',
+      code: generateProjectSchema(pages, appShell, projectName),
+    }
+  }, [activePage, appShell, fileContent, filePath, pages, projectName, view])
+
+  const copyCode = () => {
+    void navigator.clipboard?.writeText(generated.code)
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1000)
+  }
+
+  const saveFile = async () => {
+    if (!filePath || !projectFile || projectFile.isBinary || projectFile.isTooLarge) {
+      return
+    }
+
+    setFileSaveState('saving')
+    setFileError(null)
+
+    try {
+      await saveProjectFile(filePath, fileContent)
+      setProjectFile({
+        ...projectFile,
+        content: fileContent,
+        size: new Blob([fileContent]).size,
+      })
+      setExternalFileChangePending(false)
+      setFileSaveState('saved')
+      window.setTimeout(() => setFileSaveState('idle'), 1200)
+    } catch (error) {
+      setFileError(getErrorMessage(error))
+      setFileSaveState('idle')
+    }
+  }
+
+  const isFileDirty =
+    view === 'file' && projectFile?.content !== fileContent
+  const normalizedFilePath = filePath?.replace(/\\/g, '/') ?? ''
+  const canRegisterFileAsPage =
+    view === 'file' &&
+    Boolean(projectFile) &&
+    /^src\/.+\.(jsx|tsx)$/i.test(normalizedFilePath) &&
+    !pages.some((page) => getPageSourcePath(page) === normalizedFilePath)
+
+  const openPageRegistration = () => {
+    const name = derivePageName(normalizedFilePath)
+
+    setRegisterName(name)
+    setRegisterRoute(derivePageRoute(name))
+    setRegisterError(null)
+    setRegisteringPage(true)
+  }
+
+  const registerFileAsPage = async () => {
+    const name = registerName.trim()
+    const routeInput = registerRoute.trim()
+    const route = routeInput.startsWith('/') ? routeInput : `/${routeInput}`
+
+    if (!filePath || !name || !routeInput) {
+      setRegisterError('Enter a page name and route')
+      return
+    }
+
+    if (
+      pages.some((page) => page.name.toLowerCase() === name.toLowerCase())
+    ) {
+      setRegisterError('Page name already exists')
+      return
+    }
+
+    if (pages.some((page) => page.route === route)) {
+      setRegisterError('Route already exists')
+      return
+    }
+
+    setRegisterBusy(true)
+    setRegisterError(null)
+
+    try {
+      if (isFileDirty) {
+        await saveProjectFile(filePath, fileContent)
+        setProjectFile((current) =>
+          current
+            ? {
+                ...current,
+                content: fileContent,
+                size: new Blob([fileContent]).size,
+              }
+            : current
+        )
+      }
+
+      const page = await importProjectPage(filePath, name, route)
+      registerPage(page)
+      setActivePage(page.id)
+      await saveProject()
+      onViewChange('page')
+      onPageRegistered?.(page)
+      setRegisteringPage(false)
+    } catch (error) {
+      setRegisterError(getErrorMessage(error))
+    } finally {
+      setRegisterBusy(false)
+    }
+  }
+
+  const panelContent = (
+    <>
+      <div className="h-10 px-3 border-b border-white/[0.06] flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+            Code
+          </p>
+          <p className="text-[10px] text-gray-400 truncate">
+            {generated.filename}
+          </p>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {!workspaceOpen && (
+            <button
+              type="button"
+              onClick={() => setWorkspaceOpen(true)}
+              className="cursor-pointer rounded bg-white/[0.06] px-2 py-1 text-[10px] font-medium text-gray-300 transition-colors hover:bg-white/[0.1] hover:text-white"
+              title="Open a larger code workspace"
+            >
+              Open editor
+            </button>
+          )}
+          {canRegisterFileAsPage && (
+            <button
+              type="button"
+              onClick={openPageRegistration}
+              className="cursor-pointer rounded bg-emerald-500/15 px-2 py-1 text-[10px] font-medium text-emerald-300 transition-colors hover:bg-emerald-500/25 hover:text-emerald-200"
+            >
+              Register page
+            </button>
+          )}
+          {view === 'file' && externalFileChangePending && (
+            <button
+              type="button"
+              onClick={() => {
+                setExternalFileChangePending(false)
+                setFileReloadVersion((version) => version + 1)
+              }}
+              className="cursor-pointer rounded bg-amber-500/15 px-2 py-1 text-[10px] font-medium text-amber-300 transition-colors hover:bg-amber-500/25 hover:text-amber-200"
+              title="Discard unsaved editor text and load the external file version"
+            >
+              Reload disk
+            </button>
+          )}
+          {view === 'file' && projectFile && !projectFile.isBinary && !projectFile.isTooLarge && (
+            <button
+              type="button"
+              onClick={() => void saveFile()}
+              disabled={!isFileDirty || fileSaveState === 'saving'}
+              className="cursor-pointer rounded bg-blue-500 px-2 py-1 text-[10px] font-medium text-white transition-colors hover:bg-blue-400 disabled:cursor-default disabled:bg-white/[0.06] disabled:text-gray-500"
+            >
+              {fileSaveState === 'saving'
+                ? 'Saving...'
+                : fileSaveState === 'saved'
+                  ? 'Saved'
+                  : 'Save file'}
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={copyCode}
+            className="px-2 py-1 text-[10px] text-gray-300 bg-white/[0.06] hover:bg-white/[0.1] rounded transition-colors cursor-pointer select-none"
+          >
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      </div>
+
+      <div className="px-2 py-2 border-b border-white/[0.06] flex flex-wrap gap-1">
+        <CodeTab active={view === 'page'} onClick={() => onViewChange('page')}>
+          Page
+        </CodeTab>
+        <CodeTab active={view === 'app'} onClick={() => onViewChange('app')}>
+          App
+        </CodeTab>
+        {(appShell.header || appShell.footer) && (
+          <CodeTab
+            active={view === 'layout'}
+            onClick={() => onViewChange('layout')}
+          >
+            Layout
+          </CodeTab>
+        )}
+        <CodeTab
+          active={view === 'schema'}
+          onClick={() => onViewChange('schema')}
+        >
+          JSON
+        </CodeTab>
+        {filePath && (
+          <CodeTab active={view === 'file'} onClick={() => onViewChange('file')}>
+            File{isFileDirty ? ' *' : ''}
+          </CodeTab>
+        )}
+      </div>
+
+      {view === 'file' ? (
+        <FileEditor
+          file={projectFile}
+          content={fileContent}
+          loading={fileLoading}
+          error={fileError}
+          onChange={setFileContent}
+          onSave={() => void saveFile()}
+        />
+      ) : (
+        <pre className="flex-1 overflow-auto p-4 text-[11px] leading-5 font-mono text-gray-200 bg-[#0b0d11]">
+          <code>{generated.code}</code>
+        </pre>
+      )}
+      {registeringPage && (
+        <PageRegistrationDialog
+          name={registerName}
+          route={registerRoute}
+          error={registerError}
+          busy={registerBusy}
+          onNameChange={setRegisterName}
+          onRouteChange={setRegisterRoute}
+          onCancel={() => setRegisteringPage(false)}
+          onConfirm={() => void registerFileAsPage()}
+        />
+      )}
+    </>
+  )
+
+  const compactPanel = (
+    <aside
+      className={`${embedded ? 'h-full w-full' : 'w-[460px] border-l'} relative flex shrink-0 flex-col overflow-hidden border-white/[0.06] bg-[#101318]`}
+      onClick={() => setSelectedComponent(null)}
+    >
+      {panelContent}
+    </aside>
+  )
+
+  if (!workspaceOpen) {
+    return compactPanel
+  }
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[140] flex bg-black/70 p-3 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-label="VisualBuild code workspace"
+    >
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-md border border-white/10 bg-[#0b0d11] shadow-2xl">
+        <header className="flex h-12 shrink-0 items-center justify-between border-b border-white/[0.08] bg-[#15181e] px-4">
+          <div className="min-w-0">
+            <p className="text-xs font-semibold text-white">
+              VisualBuild Code Editor
+            </p>
+            <p className="truncate text-[10px] text-gray-500">
+              {generated.filename}
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setWorkspaceOpen(false)}
+            className="flex h-8 w-8 cursor-pointer items-center justify-center rounded text-lg text-gray-400 transition-colors hover:bg-white/[0.08] hover:text-white"
+            aria-label="Close code editor"
+            title="Close code editor"
+          >
+            x
+          </button>
+        </header>
+
+        <div className="flex min-h-0 flex-1 flex-col sm:flex-row">
+          <aside className="flex h-[38%] w-full shrink-0 flex-col overflow-hidden border-b border-white/[0.08] bg-[#101318] sm:h-auto sm:w-[300px] sm:border-r sm:border-b-0">
+            <div className="flex h-10 shrink-0 items-center border-b border-white/[0.06] px-3">
+              <p className="text-[10px] font-semibold uppercase tracking-widest text-gray-500">
+                Project files
+              </p>
+            </div>
+            <div className="min-h-0 flex-1 overflow-hidden">
+              <ProjectExplorer
+                selectedPath={filePath ?? null}
+                onSelectFile={(path) => {
+                  if (path) onWorkspaceSelectFile?.(path)
+                }}
+              />
+            </div>
+          </aside>
+
+          <section
+            className="relative flex min-w-0 flex-1 flex-col overflow-hidden bg-[#101318]"
+            onClick={() => setSelectedComponent(null)}
+          >
+            {panelContent}
+          </section>
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+function PageRegistrationDialog({
+  name,
+  route,
+  error,
+  busy,
+  onNameChange,
+  onRouteChange,
+  onCancel,
+  onConfirm,
+}: {
+  name: string
+  route: string
+  error: string | null
+  busy: boolean
+  onNameChange: (value: string) => void
+  onRouteChange: (value: string) => void
+  onCancel: () => void
+  onConfirm: () => void
+}) {
+  return (
+    <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/55 p-5 backdrop-blur-sm">
+      <div className="w-full max-w-sm rounded-lg border border-white/10 bg-[#191d24] p-4 shadow-2xl">
+        <h2 className="text-sm font-semibold text-white">Register as page</h2>
+        <p className="mt-1 text-[11px] leading-4 text-gray-400">
+          VisualBuild will manage this file from the canvas after registration.
+        </p>
+        <label className="mt-4 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+          Page name
+          <input
+            autoFocus
+            value={name}
+            onChange={(event) => onNameChange(event.target.value)}
+            className="mt-1 w-full rounded border border-white/10 bg-black/20 px-2.5 py-2 text-xs normal-case tracking-normal text-white outline-none focus:border-blue-400"
+          />
+        </label>
+        <label className="mt-3 block text-[10px] font-semibold uppercase tracking-wider text-gray-500">
+          Route
+          <input
+            value={route}
+            onChange={(event) => onRouteChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') onConfirm()
+            }}
+            className="mt-1 w-full rounded border border-white/10 bg-black/20 px-2.5 py-2 text-xs normal-case tracking-normal text-white outline-none focus:border-blue-400"
+          />
+        </label>
+        {error && <p className="mt-3 text-xs text-red-300">{error}</p>}
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onCancel}
+            disabled={busy}
+            className="cursor-pointer rounded px-3 py-1.5 text-xs text-gray-400 hover:bg-white/[0.06] hover:text-white disabled:cursor-default"
+          >
+            Keep as file
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={busy}
+            className="cursor-pointer rounded bg-blue-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-400 disabled:cursor-default disabled:bg-blue-500/40"
+          >
+            {busy ? 'Registering...' : 'Register page'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function FileEditor({
+  file,
+  content,
+  loading,
+  error,
+  onChange,
+  onSave,
+}: {
+  file: ProjectFile | null
+  content: string
+  loading: boolean
+  error: string | null
+  onChange: (content: string) => void
+  onSave: () => void
+}) {
+  if (loading) {
+    return (
+      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] text-xs text-gray-500">
+        Opening file...
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] p-6 text-center text-xs leading-5 text-red-300">
+        {error}
+      </div>
+    )
+  }
+
+  if (file?.isBinary || file?.isTooLarge) {
+    return (
+      <div className="flex flex-1 items-center justify-center bg-[#0b0d11] p-6 text-center text-xs leading-5 text-gray-400">
+        {file.isBinary
+          ? 'Binary files cannot be edited in the code panel.'
+          : 'This file is larger than the 2 MB editor limit.'}
+      </div>
+    )
+  }
+
+  return (
+    <textarea
+      value={content}
+      onChange={(event) => onChange(event.target.value)}
+      onKeyDown={(event) => {
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+          event.preventDefault()
+          onSave()
+        }
+      }}
+      spellCheck={false}
+      className="min-h-0 flex-1 resize-none overflow-auto bg-[#0b0d11] p-4 font-mono text-[11px] leading-5 text-gray-200 outline-none"
+      aria-label="Project file editor"
+    />
+  )
+}
+
+function CodeTab({
+  active,
+  children,
+  onClick,
+}: {
+  active: boolean
+  children: React.ReactNode
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`px-2 py-1 text-[10px] rounded transition-colors cursor-pointer select-none ${
+        active
+          ? 'bg-accent text-white'
+          : 'text-gray-500 hover:text-gray-200 hover:bg-white/[0.06]'
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+
+function getErrorMessage(error: unknown) {
+  return error instanceof Error ? error.message : 'Project file operation failed'
+}
+
+function derivePageName(filePath: string) {
+  const filename = filePath.split('/').pop() ?? 'Page'
+  const baseName = filename
+    .replace(/\.[^.]+$/, '')
+    .replace(/Page$/i, '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[-_]+/g, ' ')
+    .trim()
+
+  return baseName
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ') || 'Page'
+}
+
+function derivePageRoute(name: string) {
+  const slug = name
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+  return slug === 'home' ? '/' : `/${slug || 'page'}`
+}