@aprovan/patchwork-web 0.1.0-dev.4d82df8

package/src/components/ui/dialog.tsx

@@ -0,0 +1,60 @@
+import { X } from 'lucide-react';
+import * as React from 'react';
+
+interface DialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export function Dialog({ open, onOpenChange, children }: DialogProps) {
+  React.useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onOpenChange(false);
+    };
+    if (open) document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [open, onOpenChange]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="fixed inset-0 bg-black/50"
+        onClick={() => onOpenChange(false)}
+      />
+      <div className="relative z-50 w-full max-w-2xl max-h-[85vh] overflow-hidden rounded-lg border bg-background shadow-lg">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function DialogHeader({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return (
+    <div className={`flex items-center justify-between p-4 border-b ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+export function DialogTitle({ children }: { children: React.ReactNode }) {
+  return <h2 className="text-lg font-semibold">{children}</h2>;
+}
+
+export function DialogContent({ children, className = '' }: { children: React.ReactNode; className?: string }) {
+  return <div className={`p-4 overflow-auto max-h-[calc(85vh-4rem)] ${className}`}>{children}</div>;
+}
+
+export function DialogClose({ onClose }: { onClose: () => void }) {
+  return (
+    <button
+      onClick={onClose}
+      className="rounded-sm opacity-70 hover:opacity-100 transition-opacity"
+    >
+      <X className="h-4 w-4" />
+      <span className="sr-only">Close</span>
+    </button>
+  );
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,45 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/index.css

@@ -0,0 +1,190 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  /* .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  } */
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Tiptap Markdown Editor Styles */
+.markdown-editor .tiptap {
+  outline: none;
+}
+
+.markdown-editor .tiptap p {
+  margin: 0;
+}
+
+.markdown-editor .tiptap > * + * {
+  margin-top: 0.5em;
+}
+
+/* Placeholder styling */
+.markdown-editor .tiptap p.is-editor-empty:first-child::before {
+  color: hsl(var(--muted-foreground));
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Inline code */
+.markdown-editor .tiptap code {
+  background-color: hsl(var(--muted));
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875em;
+}
+
+/* Code blocks */
+.markdown-editor .tiptap pre {
+  background-color: hsl(var(--muted));
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875em;
+  overflow-x: auto;
+}
+
+.markdown-editor .tiptap pre code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+}
+
+/* Blockquotes */
+.markdown-editor .tiptap blockquote {
+  border-left: 4px solid hsl(var(--muted-foreground) / 0.3);
+  padding-left: 1rem;
+  font-style: italic;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Lists */
+.markdown-editor .tiptap ul,
+.markdown-editor .tiptap ol {
+  padding-left: 1.5rem;
+  margin: 0.25em 0;
+}
+
+.markdown-editor .tiptap ul {
+  list-style-type: disc;
+}
+
+.markdown-editor .tiptap ol {
+  list-style-type: decimal;
+}
+
+.markdown-editor .tiptap li {
+  margin: 0.125em 0;
+}
+
+/* Headings - more subtle for chat input */
+.markdown-editor .tiptap h1,
+.markdown-editor .tiptap h2,
+.markdown-editor .tiptap h3 {
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.markdown-editor .tiptap h1 {
+  font-size: 1.25em;
+}
+
+.markdown-editor .tiptap h2 {
+  font-size: 1.125em;
+}
+
+.markdown-editor .tiptap h3 {
+  font-size: 1em;
+}
+
+/* Bold & Italic */
+.markdown-editor .tiptap strong {
+  font-weight: 600;
+}
+
+.markdown-editor .tiptap em {
+  font-style: italic;
+}
+
+/* Strikethrough */
+.markdown-editor .tiptap s {
+  text-decoration: line-through;
+}
+
+/* Code block wrapper with language input */
+.markdown-editor .code-block-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.markdown-editor .code-block-wrapper pre {
+  margin: 0;
+}
+
+.markdown-editor .code-block-wrapper .language-input-wrapper {
+  user-select: none;
+  pointer-events: auto;
+}
+
+.markdown-editor .code-block-wrapper .language-input {
+  background: transparent;
+  user-select: text !important;
+  pointer-events: auto !important;
+  cursor: text;
+  -webkit-user-select: text !important;
+}

package/src/lib/utils.ts

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

package/src/lib/workspace-vfs.ts

@@ -0,0 +1,190 @@
+import {
+  HttpBackend,
+  VFSStore,
+  resolveEntry,
+  type VirtualFile,
+  type VirtualProject,
+  type WatchCallback,
+} from '@aprovan/patchwork-compiler';
+
+const VFS_BASE_URL = '/vfs';
+
+let storeInstance: VFSStore | null = null;
+
+function getStore(): VFSStore {
+  if (!storeInstance) {
+    const backend = new HttpBackend({ baseUrl: VFS_BASE_URL });
+    storeInstance = new VFSStore(backend, {
+      sync: false,
+    });
+  }
+  return storeInstance;
+}
+
+/** Tear down the current VFS store instance so the next call to getStore() creates a fresh one. */
+export function resetStore(): void {
+  storeInstance = null;
+}
+
+function normalizePath(path: string): string {
+  return path.replace(/^\/+|\/+$/g, '');
+}
+
+function dirname(path: string): string {
+  const normalized = normalizePath(path);
+  if (!normalized || !normalized.includes('/')) return '';
+  return normalized.split('/').slice(0, -1).join('/');
+}
+
+function basename(path: string): string {
+  const normalized = normalizePath(path);
+  if (!normalized) return '';
+  const parts = normalized.split('/');
+  return parts[parts.length - 1] ?? '';
+}
+
+function joinPath(base: string, path: string): string {
+  const normalizedBase = normalizePath(base);
+  const normalizedPath = normalizePath(path);
+  if (!normalizedBase) return normalizedPath;
+  if (!normalizedPath) return normalizedBase;
+  return `${normalizedBase}/${normalizedPath}`;
+}
+
+function toPrefix(path: string): string {
+  const normalized = normalizePath(path);
+  return normalized ? `${normalized}/` : '';
+}
+
+export function toWorkspaceTreeFiles(paths: string[]): VirtualFile[] {
+  return paths.map((path) => ({ path, content: '' }));
+}
+
+function toProjectRelativePath(projectId: string, absolutePath: string): string {
+  if (!projectId) return normalizePath(absolutePath);
+  const normalizedProjectId = normalizePath(projectId);
+  const normalizedPath = normalizePath(absolutePath);
+  const prefix = `${normalizedProjectId}/`;
+  if (normalizedPath.startsWith(prefix)) {
+    return normalizedPath.slice(prefix.length);
+  }
+  return normalizedPath;
+}
+
+function toWorkspacePath(projectId: string, relativePath: string): string {
+  const normalizedProjectId = normalizePath(projectId);
+  const normalizedRelativePath = normalizePath(relativePath);
+  if (!normalizedProjectId) return normalizedRelativePath;
+  return joinPath(normalizedProjectId, normalizedRelativePath);
+}
+
+export interface WorkspaceEntry {
+  name: string;
+  path: string;
+  isDir: boolean;
+}
+
+export async function listWorkspaceEntries(path = ''): Promise<WorkspaceEntry[]> {
+  const store = getStore();
+  const normalized = normalizePath(path);
+  const entries = await store.readdir(normalized);
+
+  return entries
+    .map((entry) => ({
+      name: entry.name,
+      path: normalized ? `${normalized}/${entry.name}` : entry.name,
+      isDir: entry.isDirectory(),
+    }))
+    .sort((a, b) => {
+      if (a.isDir !== b.isDir) return a.isDir ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    });
+}
+
+export async function listWorkspacePaths(): Promise<string[]> {
+  return getStore().listFiles();
+}
+
+export async function loadWorkspaceDirectoryProject(
+  directoryPath: string,
+): Promise<VirtualProject | null> {
+  const store = getStore();
+  const normalized = normalizePath(directoryPath);
+  const prefix = toPrefix(normalized);
+  const allPaths = await store.listFiles(normalized);
+  const filePaths = allPaths.filter((path) =>
+    prefix ? path.startsWith(prefix) : true,
+  );
+
+  if (filePaths.length === 0) {
+    return null;
+  }
+
+  const files = new Map<string, VirtualFile>();
+  await Promise.all(
+    filePaths.map(async (path) => {
+      const content = await store.readFile(path);
+      const relativePath = toProjectRelativePath(normalized, path);
+      files.set(relativePath, { path: relativePath, content });
+    }),
+  );
+
+  return {
+    id: normalized,
+    entry: resolveEntry(files),
+    files,
+  };
+}
+
+export async function loadWorkspaceFileProject(
+  filePath: string,
+): Promise<VirtualProject | null> {
+  const store = getStore();
+  const normalized = normalizePath(filePath);
+  const fileName = basename(normalized);
+  const projectId = dirname(normalized);
+
+  try {
+    const content = await store.readFile(normalized);
+    return {
+      id: projectId,
+      entry: fileName,
+      files: new Map([[fileName, { path: fileName, content }]]),
+    };
+  } catch {
+    return null;
+  }
+}
+
+export function createSingleWorkspaceFileProject(
+  filePath: string,
+  content: string,
+): VirtualProject {
+  const normalized = normalizePath(filePath);
+  const fileName = basename(normalized);
+  const projectId = dirname(normalized);
+  const files = new Map<string, VirtualFile>([
+    [fileName, { path: fileName, content }],
+  ]);
+
+  return {
+    id: projectId,
+    entry: fileName,
+    files,
+  };
+}
+
+export async function saveWorkspaceProject(
+  project: VirtualProject,
+): Promise<void> {
+  const store = getStore();
+  await Promise.all(
+    Array.from(project.files.values()).map((file) =>
+      store.writeFile(toWorkspacePath(project.id, file.path), file.content),
+    ),
+  );
+}
+
+export function subscribeToWorkspaceChanges(callback: WatchCallback): () => void {
+  return getStore().watch('', callback);
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);