add-velt 0.1.0

package/bin/velt.js

@@ -0,0 +1,1664 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+// Enhanced package manager detection (checks parent directories for workspaces)
+function detectPackageManager(cwd) {
+    // Check current directory first
+    if (fs.existsSync(path.join(cwd, 'pnpm-lock.yaml'))) return 'pnpm';
+    if (fs.existsSync(path.join(cwd, 'yarn.lock'))) return 'yarn';
+    if (fs.existsSync(path.join(cwd, 'package-lock.json'))) return 'npm';
+
+    // Check parent directories for workspace lockfiles
+    let dir = cwd;
+    const root = path.parse(dir).root;
+    while (dir !== root) {
+        dir = path.dirname(dir);
+        if (fs.existsSync(path.join(dir, 'pnpm-lock.yaml'))) return 'pnpm';
+        if (fs.existsSync(path.join(dir, 'yarn.lock'))) return 'yarn';
+        if (fs.existsSync(path.join(dir, 'package-lock.json'))) return 'npm';
+        const pkgPath = path.join(dir, 'package.json');
+        if (fs.existsSync(pkgPath)) {
+            try {
+                const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+                if (pkg.workspaces) break;
+            } catch {}
+        }
+    }
+    return 'npm';
+}
+
+// ============================================================================
+// DEPENDENCY DEFINITIONS (derived from sample apps)
+// ============================================================================
+
+const DEPS = {
+    // Baseline (always) - use v4.x.x versions
+    baseline: {
+        production: { '@veltdev/react': '^4.0.0' },
+        development: { '@veltdev/types': '^4.0.0' }
+    },
+    // Comments: no extra deps beyond baseline
+    comments: {
+        production: {},
+        development: {}
+    },
+    // Notifications: no extra deps beyond baseline
+    notifications: {
+        production: {},
+        development: {}
+    },
+    // ReactFlow CRDT - use v4.x.x versions
+    'reactflow-crdt': {
+        production: {
+            '@veltdev/reactflow-crdt': '^4.0.0',
+            'yjs': 'latest'
+        },
+        development: {}
+    },
+    // Tiptap CRDT - use v4.x.x versions
+    'tiptap-crdt': {
+        production: {
+            '@veltdev/tiptap-crdt': '^4.0.0',
+            '@veltdev/tiptap-crdt-react': '^4.0.0',
+            '@veltdev/tiptap-velt-comments': '^4.0.0',
+            'yjs': 'latest',
+            'y-prosemirror': 'latest'
+        },
+        development: {}
+    },
+    // CodeMirror CRDT - use v4.x.x versions
+    'codemirror-crdt': {
+        production: {
+            '@veltdev/codemirror-crdt': '^4.0.0',
+            '@veltdev/codemirror-crdt-react': '^4.0.0',
+            'yjs': 'latest',
+            'y-codemirror.next': 'latest'
+        },
+        development: {}
+    }
+};
+
+// ============================================================================
+// PROJECT ANALYSIS
+// ============================================================================
+
+function analyzeProject(cwd) {
+    const analysis = {
+        hasNextConfig: fs.existsSync(path.join(cwd, 'next.config.js')) || fs.existsSync(path.join(cwd, 'next.config.ts')),
+        hasAppRouter: fs.existsSync(path.join(cwd, 'app')),
+        hasPagesRouter: fs.existsSync(path.join(cwd, 'pages')),
+        hasComponents: fs.existsSync(path.join(cwd, 'components')),
+        packageManager: detectPackageManager(cwd),
+        existingDeps: {}
+    };
+
+    const pkg = readPkg(cwd);
+    if (pkg) {
+        analysis.existingDeps = { ...pkg.dependencies, ...pkg.devDependencies };
+    }
+
+    return analysis;
+}
+
+// ============================================================================
+// FEATURE PARSING
+// ============================================================================
+
+function parseFeatures(args) {
+    const features = {
+        comments: false,
+        notifications: false,
+        presence: false,
+        cursors: false,
+        crdt: 'none' // 'none' | 'reactflow' | 'tiptap' | 'codemirror'
+    };
+
+    // Check for CRDT type flags
+    const crdtFlags = [];
+    if (args['reactflow-crdt']) crdtFlags.push('reactflow');
+    if (args['tiptap-crdt']) crdtFlags.push('tiptap');
+    if (args['codemirror-crdt']) crdtFlags.push('codemirror');
+
+    // Enforce only one CRDT type
+    if (crdtFlags.length > 1) {
+        console.error('Error: Only one CRDT type flag can be specified at a time.');
+        console.error('Choose one of: --reactflow-crdt, --tiptap-crdt, --codemirror-crdt');
+        process.exit(1);
+    }
+
+    if (crdtFlags.length === 1) {
+        features.crdt = crdtFlags[0];
+    }
+
+    // Handle --all flag
+    if (args.all) {
+        if (features.crdt === 'none') {
+            console.error('Error: --all requires a CRDT type flag.');
+            console.error('Usage: npx add-velt --all --reactflow-crdt');
+            console.error('       npx add-velt --all --tiptap-crdt');
+            console.error('       npx add-velt --all --codemirror-crdt');
+            process.exit(1);
+        }
+        features.comments = true;
+        features.notifications = true;
+        features.presence = true;
+        features.cursors = true;
+    } else {
+        features.comments = !!args.comments;
+        features.notifications = !!args.notifications;
+        features.presence = !!args.presence;
+        features.cursors = !!args.cursors;
+    }
+
+    return features;
+}
+
+function hasAnyFeature(features) {
+    return features.comments || features.notifications || features.presence || features.cursors || features.crdt !== 'none';
+}
+
+// ============================================================================
+// DEPENDENCY RESOLUTION
+// ============================================================================
+
+function resolveDependencies(analysis, features) {
+    const deps = {
+        production: [],
+        development: []
+    };
+
+    // Helper: format package for install (use pkg@latest or just pkg for latest)
+    const formatPkg = (pkg, version) => {
+        // For 'latest', just use the package name without version to let npm resolve
+        if (version === 'latest') {
+            return pkg;
+        }
+        return `${pkg}@${version}`;
+    };
+
+    // Always include baseline
+    for (const [pkg, version] of Object.entries(DEPS.baseline.production)) {
+        if (!analysis.existingDeps[pkg]) {
+            deps.production.push(formatPkg(pkg, version));
+        }
+    }
+    for (const [pkg, version] of Object.entries(DEPS.baseline.development)) {
+        if (!analysis.existingDeps[pkg]) {
+            deps.development.push(formatPkg(pkg, version));
+        }
+    }
+
+    // Comments deps (none extra beyond baseline)
+    if (features.comments) {
+        for (const [pkg, version] of Object.entries(DEPS.comments.production)) {
+            if (!analysis.existingDeps[pkg]) {
+                deps.production.push(formatPkg(pkg, version));
+            }
+        }
+    }
+
+    // Notifications deps (none extra beyond baseline)
+    if (features.notifications) {
+        for (const [pkg, version] of Object.entries(DEPS.notifications.production)) {
+            if (!analysis.existingDeps[pkg]) {
+                deps.production.push(formatPkg(pkg, version));
+            }
+        }
+    }
+
+    // CRDT type deps
+    if (features.crdt !== 'none') {
+        const crdtKey = `${features.crdt}-crdt`;
+        for (const [pkg, version] of Object.entries(DEPS[crdtKey].production)) {
+            if (!analysis.existingDeps[pkg]) {
+                deps.production.push(formatPkg(pkg, version));
+            }
+        }
+        for (const [pkg, version] of Object.entries(DEPS[crdtKey].development)) {
+            if (!analysis.existingDeps[pkg]) {
+                deps.development.push(formatPkg(pkg, version));
+            }
+        }
+    }
+
+    return deps;
+}
+
+// ============================================================================
+// SMART INSTALL
+// ============================================================================
+
+function smartInstall(pm, deps, isDev, cwd, flags) {
+    if (!deps.length) return;
+
+    const installStrategies = [
+        { args: [], description: 'standard install' },
+        { args: ['--force'], description: 'with --force flag' },
+        ...(pm === 'npm' ? [{ args: ['--legacy-peer-deps'], description: 'with --legacy-peer-deps' }] : []),
+        ...(pm === 'npm' ? [{ args: ['--force', '--legacy-peer-deps'], description: 'with --force --legacy-peer-deps' }] : [])
+    ];
+
+    for (const strategy of installStrategies) {
+        try {
+            console.log(`Attempting ${strategy.description}...`);
+
+            let cmd;
+            const extraArgs = [...strategy.args];
+            if (flags.force && !extraArgs.includes('--force')) extraArgs.push('--force');
+            if (flags['legacy-peer-deps'] && pm === 'npm' && !extraArgs.includes('--legacy-peer-deps')) {
+                extraArgs.push('--legacy-peer-deps');
+            }
+
+            switch (pm) {
+                case 'pnpm':
+                    cmd = `pnpm add ${isDev ? '-D' : ''} ${deps.join(' ')} ${extraArgs.join(' ')}`.trim();
+                    break;
+                case 'yarn':
+                    cmd = `yarn add ${isDev ? '-D' : ''} ${deps.join(' ')} ${extraArgs.filter(a => a !== '--legacy-peer-deps').join(' ')}`.trim();
+                    break;
+                default:
+                    cmd = `npm install ${isDev ? '--save-dev' : ''} ${deps.join(' ')} ${extraArgs.join(' ')}`.trim();
+            }
+
+            console.log(`> ${cmd}`);
+            execSync(cmd, { stdio: 'inherit', cwd });
+            console.log(`Success with ${strategy.description}`);
+            return;
+        } catch (error) {
+            console.warn(`Failed with ${strategy.description}`);
+            if (strategy === installStrategies[installStrategies.length - 1]) {
+                throw new Error(`All installation strategies failed. Last error: ${error.message}`);
+            }
+        }
+    }
+}
+
+// ============================================================================
+// FILE TEMPLATES
+// ============================================================================
+
+// CORE: VeltInitializeDocument.tsx (same for all)
+const TEMPLATE_VELT_INITIALIZE_DOCUMENT = `import { useEffect } from 'react';
+import { useSetDocuments } from '@veltdev/react';
+
+// [Velt] Initialize Velt document
+export default function VeltInitializeDocument() {
+  // TODO: Replace with your own document ID source
+  const documentId = 'your-document-id';
+  const documentName = 'your-document-name';
+
+  const { setDocuments } = useSetDocuments();
+
+  useEffect(() => {
+    if (!documentId) return;
+    setDocuments([
+      { id: documentId, metadata: { documentName } },
+    ]);
+  }, [setDocuments, documentId]);
+
+  return null;
+}
+`;
+
+// CORE: VeltInitializeUser.tsx (same for all)
+const TEMPLATE_VELT_INITIALIZE_USER = `"use client";
+
+import type { VeltAuthProvider } from "@veltdev/types";
+import { useMemo } from "react";
+
+// [Velt] User authentication hook
+// TODO: Replace with your own user retrieval logic
+export function useVeltAuthProvider() {
+  const user = {
+    userId: 'user-id',
+    organizationId: 'organization-id',
+    email: 'user@example.com',
+  };
+
+  const authProvider: VeltAuthProvider | undefined = useMemo(() => {
+    if (!user) return undefined;
+    return {
+      user,
+      retryConfig: { retryCount: 3, retryDelay: 1000 },
+      // TODO: Add generateToken for JWT auth
+    };
+  }, [user]);
+
+  return { authProvider };
+}
+`;
+
+// CORE ONLY: VeltCollaboration.tsx (minimal)
+const TEMPLATE_VELT_COLLABORATION_CORE = `import VeltInitializeDocument from './VeltInitializeDocument';
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+// COMMENTS ONLY: VeltCollaboration.tsx
+const TEMPLATE_VELT_COLLABORATION_COMMENTS = `"use client";
+import { VeltComments, VeltCommentsSidebar } from "@veltdev/react";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltComments
+        popoverMode={true}
+        shadowDom={false}
+        textMode={false}
+        commentPinHighlighter={false}
+        dialogOnHover={false}
+      />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+// NOTIFICATIONS ONLY: VeltCollaboration.tsx
+const TEMPLATE_VELT_COLLABORATION_NOTIFICATIONS = `"use client";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+// COMMENTS + NOTIFICATIONS: VeltCollaboration.tsx
+const TEMPLATE_VELT_COLLABORATION_COMMENTS_NOTIFICATIONS = `"use client";
+import { VeltComments, VeltCommentsSidebar } from "@veltdev/react";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltComments
+        popoverMode={true}
+        shadowDom={false}
+        textMode={false}
+        commentPinHighlighter={false}
+        dialogOnHover={false}
+      />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+// REACTFLOW CRDT: VeltCollaboration.tsx
+const TEMPLATE_VELT_COLLABORATION_REACTFLOW = `"use client";
+import { VeltCursor, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltComments
+        popoverMode={true}
+        textMode={false}
+        commentPinHighlighter={false}
+        dialogOnHover={false}
+        popoverTriangleComponent={false}
+      />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+      <VeltCursor />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+// TIPTAP CRDT: VeltCollaboration.tsx (includes VeltCursor)
+const TEMPLATE_VELT_COLLABORATION_TIPTAP = `"use client";
+import { VeltComments, VeltCommentsSidebar, VeltCursor } from "@veltdev/react";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltComments
+        shadowDom={false}
+        textMode={false}
+      />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+      <VeltCursor />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+// CODEMIRROR CRDT: VeltCollaboration.tsx (includes VeltCursor)
+const TEMPLATE_VELT_COLLABORATION_CODEMIRROR = `"use client";
+import { VeltComments, VeltCommentsSidebar, VeltCursor } from "@veltdev/react";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltComments textMode={false} />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+      <VeltCursor />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+// ALL (comments + notifications + CRDT): VeltCollaboration variants
+const TEMPLATE_VELT_COLLABORATION_ALL_REACTFLOW = `"use client";
+import { VeltCursor, VeltComments, VeltCommentsSidebar } from "@veltdev/react";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltComments
+        popoverMode={true}
+        shadowDom={false}
+        textMode={false}
+        commentPinHighlighter={false}
+        dialogOnHover={false}
+        popoverTriangleComponent={false}
+      />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+      <VeltCursor />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+const TEMPLATE_VELT_COLLABORATION_ALL_TIPTAP = `"use client";
+import { VeltComments, VeltCommentsSidebar, VeltCursor } from "@veltdev/react";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltComments
+        shadowDom={false}
+        textMode={false}
+      />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+      <VeltCursor />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+const TEMPLATE_VELT_COLLABORATION_ALL_CODEMIRROR = `"use client";
+import { VeltComments, VeltCommentsSidebar, VeltCursor } from "@veltdev/react";
+import VeltInitializeDocument from "./VeltInitializeDocument";
+import { VeltCustomization } from "./ui-customization/VeltCustomization";
+
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+      <VeltComments textMode={false} />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+      <VeltCursor />
+      <VeltCustomization />
+    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+// VeltTools: COMMENTS ONLY (no notifications)
+const TEMPLATE_VELT_TOOLS_COMMENTS = `"use client";
+import { VeltPresence, VeltSidebarButton } from "@veltdev/react";
+
+function VeltTools() {
+  return (
+    <>
+      <VeltPresence />
+      <VeltSidebarButton />
+    </>
+  );
+}
+
+export default VeltTools;
+`;
+
+// VeltTools: NOTIFICATIONS ONLY (no sidebar)
+const TEMPLATE_VELT_TOOLS_NOTIFICATIONS = `"use client";
+import { VeltPresence, VeltNotificationsTool } from "@veltdev/react";
+
+function VeltTools() {
+  return (
+    <>
+      <VeltPresence />
+      <VeltNotificationsTool
+        settings={true}
+        shadowDom={false}
+        tabConfig={{
+          forYou: { name: "For You", enable: true },
+          documents: { name: "Documents", enable: true },
+          all: { name: "All", enable: true },
+        }}
+      />
+    </>
+  );
+}
+
+export default VeltTools;
+`;
+
+// VeltTools: COMMENTS + NOTIFICATIONS
+const TEMPLATE_VELT_TOOLS_COMMENTS_NOTIFICATIONS = `"use client";
+import { VeltPresence, VeltSidebarButton, VeltNotificationsTool } from "@veltdev/react";
+
+function VeltTools() {
+  return (
+    <>
+      <VeltPresence />
+      <VeltSidebarButton />
+      <VeltNotificationsTool
+        settings={true}
+        shadowDom={false}
+        tabConfig={{
+          forYou: { name: "For You", enable: true },
+          documents: { name: "Documents", enable: true },
+          all: { name: "All", enable: true },
+        }}
+      />
+    </>
+  );
+}
+
+export default VeltTools;
+`;
+
+// VeltTools: CRDT with huddle (for reactflow)
+const TEMPLATE_VELT_TOOLS_CRDT_REACTFLOW = `"use client";
+import { VeltPresence, VeltSidebarButton, VeltNotificationsTool, VeltHuddleTool } from "@veltdev/react";
+
+function VeltTools() {
+  return (
+    <>
+      <VeltPresence />
+      <VeltSidebarButton />
+      <VeltNotificationsTool
+        settings={true}
+        shadowDom={false}
+        tabConfig={{
+          forYou: { name: "For You", enable: true },
+          documents: { name: "Documents", enable: true },
+          all: { name: "All", enable: true },
+        }}
+      />
+      <VeltHuddleTool type='all' />
+    </>
+  );
+}
+
+export default VeltTools;
+`;
+
+// VeltTools: CRDT without huddle (for text editors)
+const TEMPLATE_VELT_TOOLS_CRDT_TEXT = `"use client";
+import { VeltPresence, VeltSidebarButton, VeltNotificationsTool } from "@veltdev/react";
+
+function VeltTools() {
+  return (
+    <>
+      <VeltPresence />
+      <VeltSidebarButton />
+      <VeltNotificationsTool
+        settings={true}
+        shadowDom={false}
+        tabConfig={{
+          forYou: { name: "For You", enable: true },
+          documents: { name: "Documents", enable: true },
+          all: { name: "All", enable: true },
+        }}
+      />
+    </>
+  );
+}
+
+export default VeltTools;
+`;
+
+// UI CUSTOMIZATION: Comments only
+const TEMPLATE_VELT_CUSTOMIZATION_COMMENTS = `"use client";
+import { useVeltClient, VeltWireframe } from "@veltdev/react";
+import VeltCommentBubbleWf from "./VeltCommentBubbleWf";
+import VeltCommentToolWf from "./VeltCommentToolWf";
+import "./styles.css";
+import { useEffect } from "react";
+
+export function VeltCustomization() {
+  const { client } = useVeltClient();
+
+  useEffect(() => {
+    if (client) {
+      client.setDarkMode(true);
+    }
+  }, [client]);
+
+  return (
+    <VeltWireframe>
+      <VeltCommentBubbleWf />
+      <VeltCommentToolWf />
+    </VeltWireframe>
+  );
+}
+`;
+
+// UI CUSTOMIZATION: Notifications only
+const TEMPLATE_VELT_CUSTOMIZATION_NOTIFICATIONS = `"use client";
+import { useVeltClient, VeltWireframe } from "@veltdev/react";
+import VeltNotificationsToolWf from "./VeltNotificationsToolWf";
+import "./styles.css";
+import { useEffect } from "react";
+
+export function VeltCustomization() {
+  const { client } = useVeltClient();
+
+  useEffect(() => {
+    if (client) {
+      client.setDarkMode(true);
+    }
+  }, [client]);
+
+  return (
+    <VeltWireframe>
+      <VeltNotificationsToolWf />
+    </VeltWireframe>
+  );
+}
+`;
+
+// UI CUSTOMIZATION: Comments + Notifications
+const TEMPLATE_VELT_CUSTOMIZATION_COMMENTS_NOTIFICATIONS = `"use client";
+import { useVeltClient, VeltWireframe } from "@veltdev/react";
+import VeltCommentBubbleWf from "./VeltCommentBubbleWf";
+import VeltCommentToolWf from "./VeltCommentToolWf";
+import VeltNotificationsToolWf from "./VeltNotificationsToolWf";
+import VeltSidebarButtonWf from "./VeltSidebarButtonWf";
+import "./styles.css";
+import { useEffect } from "react";
+
+export function VeltCustomization() {
+  const { client } = useVeltClient();
+
+  useEffect(() => {
+    if (client) {
+      client.setDarkMode(true);
+    }
+  }, [client]);
+
+  return (
+    <VeltWireframe>
+      <VeltCommentBubbleWf />
+      <VeltCommentToolWf />
+      <VeltNotificationsToolWf />
+      <VeltSidebarButtonWf />
+    </VeltWireframe>
+  );
+}
+`;
+
+// UI CUSTOMIZATION: CRDT (all wireframes)
+const TEMPLATE_VELT_CUSTOMIZATION_CRDT = `"use client";
+import { useVeltClient, VeltWireframe } from "@veltdev/react";
+import VeltCommentBubbleWf from "./VeltCommentBubbleWf";
+import VeltCommentToolWf from "./VeltCommentToolWf";
+import VeltNotificationsToolWf from "./VeltNotificationsToolWf";
+import VeltSidebarButtonWf from "./VeltSidebarButtonWf";
+import "./styles.css";
+import { useEffect } from "react";
+
+export function VeltCustomization() {
+  const { client } = useVeltClient();
+
+  useEffect(() => {
+    if (client) {
+      client.setDarkMode(true);
+    }
+  }, [client]);
+
+  return (
+    <VeltWireframe>
+      <VeltCommentBubbleWf />
+      <VeltCommentToolWf />
+      <VeltNotificationsToolWf />
+      <VeltSidebarButtonWf />
+    </VeltWireframe>
+  );
+}
+`;
+
+// Wireframe components
+const TEMPLATE_VELT_COMMENT_BUBBLE_WF = `"use client";
+import { VeltCommentBubbleWireframe, VeltIf } from '@veltdev/react';
+
+const VeltCommentBubbleWf = () => {
+  return (
+    <VeltCommentBubbleWireframe>
+      <div style={{ position: 'relative', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+        <VeltIf condition="{commentAnnotation.comments.length} > 0">
+          <div style={{
+            background: 'rgba(255, 255, 255, 0.08)',
+            borderRadius: '18.667px',
+            padding: '4.667px 8px 4.667px 6.222px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '3.111px',
+            height: '28px',
+            flexShrink: 0,
+            boxSizing: 'border-box'
+          }}>
+            <div style={{
+              width: '15.556px',
+              height: '15.556px',
+              position: 'relative',
+              overflow: 'clip',
+              flexShrink: 0
+            }}>
+              <div style={{
+                position: 'absolute',
+                left: 'calc(50% + 0.492px)',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: '11px',
+                height: '11px',
+                border: '1.5px solid white',
+                borderRadius: '6px 6px 6px 1px',
+                boxSizing: 'border-box'
+              }} />
+            </div>
+            <p style={{
+              fontFamily: 'Urbanist, sans-serif',
+              fontWeight: 700,
+              fontSize: '14px',
+              lineHeight: '1.3',
+              color: 'white',
+              margin: 0,
+              whiteSpace: 'pre',
+              flexShrink: 0
+            }}>
+              <VeltCommentBubbleWireframe.CommentsCount />
+            </p>
+          </div>
+        </VeltIf>
+        <VeltIf condition="{commentAnnotation.comments.length} === 0">
+          <div style={{ width: '0px', height: '0px', flexShrink: 0 }} />
+        </VeltIf>
+      </div>
+    </VeltCommentBubbleWireframe>
+  );
+};
+
+export default VeltCommentBubbleWf;
+`;
+
+const TEMPLATE_VELT_COMMENT_TOOL_WF = `"use client";
+import { VeltCommentToolWireframe } from '@veltdev/react';
+
+const VeltCommentToolWf = () => {
+  return (
+    <VeltCommentToolWireframe>
+      <div style={{
+        background: '#141414',
+        border: 'none',
+        padding: '4.667px 6.32px 4.667px 6.222px',
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '28px',
+        height: '28px',
+        borderRadius: '18.667px',
+        boxSizing: 'border-box'
+      }}>
+        <div style={{
+          width: '15.556px',
+          height: '15.556px',
+          position: 'relative',
+          overflow: 'clip',
+          flexShrink: 0
+        }}>
+          <div style={{
+            position: 'absolute',
+            left: 'calc(50% + 0.492px)',
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+            width: '11px',
+            height: '11px',
+            border: '0.972px solid white',
+            borderRadius: '6px 6px 6px 1px',
+            boxSizing: 'border-box'
+          }} />
+        </div>
+      </div>
+    </VeltCommentToolWireframe>
+  );
+};
+
+export default VeltCommentToolWf;
+`;
+
+const TEMPLATE_VELT_NOTIFICATIONS_TOOL_WF = `"use client";
+import { VeltNotificationsToolWireframe } from '@veltdev/react';
+
+const bellIcon = "/icons/bell-icon.svg";
+
+const VeltNotificationsToolWf = () => {
+  return (
+    <VeltNotificationsToolWireframe>
+      <div style={{
+        background: '#141414',
+        borderRadius: '23.333px',
+        padding: '5.833px 4px 5.833px 7px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '3.889px',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+        flexShrink: 0
+      }}>
+        <div style={{ width: '19.444px', height: '19.444px', position: 'relative', flexShrink: 0 }}>
+          <img src={bellIcon} alt="" style={{ width: '100%', height: '100%', display: 'block' }} />
+        </div>
+        <div style={{
+          fontFamily: 'Poppins, sans-serif',
+          fontWeight: 500,
+          fontSize: '14px',
+          lineHeight: '1.5',
+          color: 'white',
+          whiteSpace: 'pre',
+          flexShrink: 0
+        }}>
+          <VeltNotificationsToolWireframe.UnreadCount />
+        </div>
+      </div>
+    </VeltNotificationsToolWireframe>
+  );
+};
+
+export default VeltNotificationsToolWf;
+`;
+
+const TEMPLATE_VELT_SIDEBAR_BUTTON_WF = `"use client";
+import { VeltSidebarButtonWireframe } from '@veltdev/react';
+
+const inboxIcon = "/icons/inbox-icon.svg";
+
+const VeltSidebarButtonWf = () => {
+  return (
+    <VeltSidebarButtonWireframe>
+      <div style={{
+        background: '#141414',
+        borderRadius: '24px',
+        padding: '6px 7px 6px 12px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: '4px',
+        height: '28px',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+        flexShrink: 0
+      }}>
+        <div style={{ width: '19.444px', height: '19.444px', position: 'relative', flexShrink: 0 }}>
+          <img src={inboxIcon} alt="" style={{ width: '100%', height: '100%', display: 'block' }} />
+        </div>
+        <div style={{
+          fontFamily: 'Poppins, sans-serif',
+          fontWeight: 500,
+          fontSize: '14px',
+          lineHeight: '1.5',
+          color: 'white',
+          whiteSpace: 'pre',
+          flexShrink: 0
+        }}>
+          <VeltSidebarButtonWireframe.CommentsCount />
+        </div>
+      </div>
+    </VeltSidebarButtonWireframe>
+  );
+};
+
+export default VeltSidebarButtonWf;
+`;
+
+const TEMPLATE_STYLES_CSS = `/* [Velt] UI customization styles */
+
+velt-comment-dialog::part(triangle) {
+  border-color: rgb(255, 205, 46) !important;
+}
+
+velt-comment-dialog::part(triangle-fill) {
+  fill: rgb(255, 205, 46) !important;
+}
+
+/* Dark Mode Theme */
+--velt-dark-mode-accent: #141414;
+--velt-dark-mode-accent-text: #ffffff;
+--velt-dark-mode-background-0: #000000;
+--velt-dark-mode-background-2: #141414;
+--velt-dark-mode-text-0: #ffffff;
+`;
+
+// ============================================================================
+// DYNAMIC TEMPLATE GENERATORS
+// ============================================================================
+
+function generateVeltCollaborationTemplate(features) {
+    const hasComments = features.comments;
+    const hasCursors = features.cursors;
+    const hasCrdt = features.crdt !== 'none';
+    const crdtType = features.crdt;
+
+    // Build imports
+    const veltImports = [];
+    if (hasComments) veltImports.push('VeltComments', 'VeltCommentsSidebar');
+    if (hasCursors) veltImports.push('VeltCursor');
+
+    const hasVeltImports = veltImports.length > 0;
+    const hasCustomization = hasComments || features.notifications;
+
+    // Determine comment props based on CRDT type
+    let commentProps = '';
+    if (hasComments) {
+        if (crdtType === 'reactflow') {
+            commentProps = `
+        popoverMode={true}
+        textMode={false}
+        commentPinHighlighter={false}
+        dialogOnHover={false}
+        popoverTriangleComponent={false}`;
+        } else if (crdtType === 'tiptap') {
+            commentProps = `
+        shadowDom={false}
+        textMode={false}`;
+        } else if (crdtType === 'codemirror') {
+            commentProps = ` textMode={false}`;
+        } else {
+            commentProps = `
+        popoverMode={true}
+        shadowDom={false}
+        textMode={false}
+        commentPinHighlighter={false}
+        dialogOnHover={false}`;
+        }
+    }
+
+    // Build template
+    let template = `"use client";
+`;
+
+    if (hasVeltImports) {
+        template += `import { ${veltImports.join(', ')} } from "@veltdev/react";
+`;
+    }
+
+    template += `import VeltInitializeDocument from "./VeltInitializeDocument";
+`;
+
+    if (hasCustomization) {
+        template += `import { VeltCustomization } from "./ui-customization/VeltCustomization";
+`;
+    }
+
+    template += `
+export function VeltCollaboration() {
+  return (
+    <>
+      <VeltInitializeDocument />
+`;
+
+    if (hasComments) {
+        template += `      <VeltComments${commentProps}
+      />
+      <VeltCommentsSidebar groupConfig={{ enable: false }} />
+`;
+    }
+
+    if (hasCursors) {
+        template += `      <VeltCursor />
+`;
+    }
+
+    if (hasCustomization) {
+        template += `      <VeltCustomization />
+`;
+    }
+
+    template += `    </>
+  );
+}
+
+export default VeltCollaboration;
+`;
+
+    return template;
+}
+
+function generateVeltToolsTemplate(features) {
+    const hasPresence = features.presence;
+    const hasComments = features.comments;
+    const hasNotifications = features.notifications;
+    const hasCrdt = features.crdt !== 'none';
+    const crdtType = features.crdt;
+
+    // Build imports
+    const veltImports = [];
+    if (hasPresence) veltImports.push('VeltPresence');
+    if (hasComments) veltImports.push('VeltSidebarButton');
+    if (hasNotifications) veltImports.push('VeltNotificationsTool');
+    if (hasCrdt && crdtType === 'reactflow') veltImports.push('VeltHuddleTool');
+
+    if (veltImports.length === 0) {
+        return null; // No VeltTools needed
+    }
+
+    let template = `"use client";
+import { ${veltImports.join(', ')} } from "@veltdev/react";
+
+function VeltTools() {
+  return (
+    <>
+`;
+
+    if (hasPresence) {
+        template += `      <VeltPresence />
+`;
+    }
+
+    if (hasComments) {
+        template += `      <VeltSidebarButton />
+`;
+    }
+
+    if (hasNotifications) {
+        template += `      <VeltNotificationsTool
+        settings={true}
+        shadowDom={false}
+        tabConfig={{
+          forYou: { name: "For You", enable: true },
+          documents: { name: "Documents", enable: true },
+          all: { name: "All", enable: true },
+        }}
+      />
+`;
+    }
+
+    if (hasCrdt && crdtType === 'reactflow') {
+        template += `      <VeltHuddleTool type='all' />
+`;
+    }
+
+    template += `    </>
+  );
+}
+
+export default VeltTools;
+`;
+
+    return template;
+}
+
+// ============================================================================
+// FILE GENERATION LOGIC
+// ============================================================================
+
+function generateVeltConfig(features) {
+    const files = {};
+
+    // Always include core files
+    files['components/velt/VeltInitializeDocument.tsx'] = TEMPLATE_VELT_INITIALIZE_DOCUMENT;
+    files['components/velt/VeltInitializeUser.tsx'] = TEMPLATE_VELT_INITIALIZE_USER;
+
+    const hasComments = features.comments;
+    const hasNotifications = features.notifications;
+    const hasPresence = features.presence;
+    const hasCursors = features.cursors;
+    const hasCrdt = features.crdt !== 'none';
+
+    // Generate VeltCollaboration dynamically based on features
+    files['components/velt/VeltCollaboration.tsx'] = generateVeltCollaborationTemplate(features);
+
+    // Generate VeltTools dynamically based on features
+    const veltToolsTemplate = generateVeltToolsTemplate(features);
+    if (veltToolsTemplate) {
+        files['components/velt/VeltTools.tsx'] = veltToolsTemplate;
+    }
+
+    // Add UI customization files based on features
+    if (hasCrdt || (hasComments && hasNotifications)) {
+        // Full customization
+        files['components/velt/ui-customization/styles.css'] = TEMPLATE_STYLES_CSS;
+        files['components/velt/ui-customization/VeltCustomization.tsx'] = TEMPLATE_VELT_CUSTOMIZATION_CRDT;
+        files['components/velt/ui-customization/VeltCommentBubbleWf.tsx'] = TEMPLATE_VELT_COMMENT_BUBBLE_WF;
+        files['components/velt/ui-customization/VeltCommentToolWf.tsx'] = TEMPLATE_VELT_COMMENT_TOOL_WF;
+        files['components/velt/ui-customization/VeltNotificationsToolWf.tsx'] = TEMPLATE_VELT_NOTIFICATIONS_TOOL_WF;
+        files['components/velt/ui-customization/VeltSidebarButtonWf.tsx'] = TEMPLATE_VELT_SIDEBAR_BUTTON_WF;
+    } else if (hasComments) {
+        // Comments only
+        files['components/velt/ui-customization/styles.css'] = TEMPLATE_STYLES_CSS;
+        files['components/velt/ui-customization/VeltCustomization.tsx'] = TEMPLATE_VELT_CUSTOMIZATION_COMMENTS;
+        files['components/velt/ui-customization/VeltCommentBubbleWf.tsx'] = TEMPLATE_VELT_COMMENT_BUBBLE_WF;
+        files['components/velt/ui-customization/VeltCommentToolWf.tsx'] = TEMPLATE_VELT_COMMENT_TOOL_WF;
+    } else if (hasNotifications) {
+        // Notifications only
+        files['components/velt/ui-customization/styles.css'] = TEMPLATE_STYLES_CSS;
+        files['components/velt/ui-customization/VeltCustomization.tsx'] = TEMPLATE_VELT_CUSTOMIZATION_NOTIFICATIONS;
+        files['components/velt/ui-customization/VeltNotificationsToolWf.tsx'] = TEMPLATE_VELT_NOTIFICATIONS_TOOL_WF;
+    }
+
+    return files;
+}
+
+// ============================================================================
+// MAIN FUNCTIONS
+// ============================================================================
+
+function main() {
+    const args = parseArgs(process.argv);
+
+    if (args.help || args.h) {
+        printUsage();
+        process.exit(0);
+    }
+
+    const cwd = process.cwd();
+    console.log('Analyzing existing project...');
+    const analysis = analyzeProject(cwd);
+    const features = parseFeatures(args);
+
+    console.log(`Project Analysis:
+  - Package Manager: ${analysis.packageManager}
+  - Router Type: ${analysis.hasAppRouter ? 'App Router' : analysis.hasPagesRouter ? 'Pages Router' : 'Unknown'}
+  - Has Components: ${analysis.hasComponents ? 'Yes' : 'No'}
+    `);
+
+    // Show enabled features
+    const enabledFeatures = [];
+    if (features.presence) enabledFeatures.push('presence');
+    if (features.cursors) enabledFeatures.push('cursors');
+    if (features.comments) enabledFeatures.push('comments');
+    if (features.notifications) enabledFeatures.push('notifications');
+    if (features.crdt !== 'none') enabledFeatures.push(`${features.crdt}-crdt`);
+
+    if (enabledFeatures.length > 0) {
+        console.log(`Features enabled: ${enabledFeatures.join(', ')}\n`);
+    } else {
+        console.log('Features enabled: core only\n');
+    }
+
+    const flags = {
+        force: !!args.force || !!args.f,
+        'legacy-peer-deps': !!args['legacy-peer-deps'],
+    };
+
+    try {
+        console.log('Generating Velt integration files...');
+        const filesWritten = applyScaffold({ cwd, flags, features });
+
+        console.log('\nInstalling dependencies...');
+        const deps = resolveDependencies(analysis, features);
+
+        if (deps.production.length) {
+            smartInstall(analysis.packageManager, deps.production, false, cwd, flags);
+        }
+        if (deps.development.length) {
+            smartInstall(analysis.packageManager, deps.development, true, cwd, flags);
+        }
+
+        // Copy icon assets if features use them
+        if (hasAnyFeature(features)) {
+            console.log('\nCopying icon assets...');
+            copyIconAssets(cwd);
+        }
+
+        generateSetupInstructions(analysis, features, filesWritten, deps);
+        console.log(`\nVelt integration complete!`);
+
+    } catch (error) {
+        console.error(`Installation failed: ${error.message}`);
+        console.log('\nTroubleshooting tips:');
+        console.log('  - Try: npx add-velt --force');
+        console.log('  - Or: npx add-velt --legacy-peer-deps');
+        process.exit(1);
+    }
+}
+
+function applyScaffold({ cwd, flags, features }) {
+    const files = generateVeltConfig(features);
+    const filesWritten = [];
+
+    Object.entries(files).forEach(([relPath, content]) => {
+        const outPath = path.join(cwd, relPath);
+        const dir = path.dirname(outPath);
+        if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+        if (fs.existsSync(outPath) && !flags.force) {
+            console.log(`Skipping existing file: ${relPath}`);
+            return;
+        }
+
+        fs.writeFileSync(outPath, content, 'utf8');
+        console.log(`Wrote ${relPath}`);
+        filesWritten.push(relPath);
+    });
+
+    return filesWritten;
+}
+
+// ============================================================================
+// AUTO-WIRING: VeltProvider + VeltCollaboration
+// ============================================================================
+
+function autoWireVeltProvider(cwd, analysis) {
+    // Detect layout file
+    const appLayoutPaths = [
+        path.join(cwd, 'app', 'layout.tsx'),
+        path.join(cwd, 'app', 'layout.jsx'),
+        path.join(cwd, 'src', 'app', 'layout.tsx'),
+        path.join(cwd, 'src', 'app', 'layout.jsx')
+    ];
+
+    const pagesAppPaths = [
+        path.join(cwd, 'pages', '_app.tsx'),
+        path.join(cwd, 'pages', '_app.jsx'),
+        path.join(cwd, 'src', 'pages', '_app.tsx'),
+        path.join(cwd, 'src', 'pages', '_app.jsx')
+    ];
+
+    let layoutPath = null;
+    let isAppRouter = false;
+
+    // Prefer App Router
+    for (const p of appLayoutPaths) {
+        if (fs.existsSync(p)) {
+            layoutPath = p;
+            isAppRouter = true;
+            break;
+        }
+    }
+
+    // Fall back to Pages Router
+    if (!layoutPath) {
+        for (const p of pagesAppPaths) {
+            if (fs.existsSync(p)) {
+                layoutPath = p;
+                isAppRouter = false;
+                break;
+            }
+        }
+    }
+
+    if (!layoutPath) {
+        console.log('\nNo layout file found. Skipping auto-wiring.');
+        console.log('You will need to manually wrap your app with VeltProvider.');
+        return { success: false, reason: 'no-layout' };
+    }
+
+    let content = fs.readFileSync(layoutPath, 'utf8');
+    const relPath = path.relative(cwd, layoutPath);
+
+    // Check if already wired
+    if (content.includes('VeltProvider') && content.includes('VeltCollaboration')) {
+        console.log(`\nVelt already wired in ${relPath}. Skipping.`);
+        return { success: true, already: true, file: relPath };
+    }
+
+    // Determine import path for components
+    const isInSrc = layoutPath.includes(path.join('src', 'app')) || layoutPath.includes(path.join('src', 'pages'));
+    const componentImportBase = isInSrc ? '@/components' : '@/components';
+
+    // Build the required imports
+    const veltImports = [];
+
+    if (!content.includes("from '@veltdev/react'") && !content.includes('from "@veltdev/react"')) {
+        veltImports.push(`import { VeltProvider } from '@veltdev/react';`);
+    } else if (!content.includes('VeltProvider')) {
+        // VeltProvider needs to be added to existing import
+        content = content.replace(
+            /(import\s*\{[^}]*)(}\s*from\s*['"]@veltdev\/react['"])/,
+            '$1, VeltProvider$2'
+        );
+    }
+
+    if (!content.includes('useVeltAuthProvider')) {
+        veltImports.push(`import { useVeltAuthProvider } from '${componentImportBase}/velt/VeltInitializeUser';`);
+    }
+
+    if (!content.includes('VeltCollaboration')) {
+        veltImports.push(`import { VeltCollaboration } from '${componentImportBase}/velt/VeltCollaboration';`);
+    }
+
+    // Insert imports at the top (after existing imports)
+    if (veltImports.length > 0) {
+        // Find the last import statement
+        const importMatches = [...content.matchAll(/^import\s+.*?['"][^'"]+['"];?\s*$/gm)];
+        if (importMatches.length > 0) {
+            const lastImport = importMatches[importMatches.length - 1];
+            const insertPos = lastImport.index + lastImport[0].length;
+            content = content.slice(0, insertPos) + '\n' + veltImports.join('\n') + content.slice(insertPos);
+        } else {
+            // No imports found, add at the very top
+            content = veltImports.join('\n') + '\n\n' + content;
+        }
+    }
+
+    // Add VeltClientWrapper component if not present
+    if (!content.includes('VeltClientWrapper')) {
+        const wrapperComponent = `
+// Velt wrapper component for client-side provider
+"use client";
+function VeltClientWrapper({ children }: { children: React.ReactNode }) {
+  const { authProvider } = useVeltAuthProvider();
+  return (
+    <VeltProvider apiKey={process.env.NEXT_PUBLIC_VELT_API_KEY || 'YOUR_API_KEY'} authProvider={authProvider}>
+      <VeltCollaboration />
+      {children}
+    </VeltProvider>
+  );
+}
+`;
+        // Insert before the default export
+        const exportMatch = content.match(/export\s+default\s+function\s+\w+/);
+        if (exportMatch) {
+            content = content.slice(0, exportMatch.index) + wrapperComponent + '\n' + content.slice(exportMatch.index);
+        }
+    }
+
+    // Wrap the body children with VeltClientWrapper
+    if (isAppRouter) {
+        // For App Router, wrap body children
+        // Pattern: <body ...>{children}</body> -> <body ...><VeltClientWrapper>{children}</VeltClientWrapper></body>
+        if (!content.includes('<VeltClientWrapper>') && !content.includes('<VeltProvider')) {
+            // Try to wrap {children} inside body
+            content = content.replace(
+                /(<body[^>]*>)([\s\S]*?)(\{children\})([\s\S]*?)(<\/body>)/,
+                '$1$2<VeltClientWrapper>$3</VeltClientWrapper>$4$5'
+            );
+        }
+    } else {
+        // For Pages Router, wrap Component
+        if (!content.includes('<VeltClientWrapper>') && !content.includes('<VeltProvider')) {
+            content = content.replace(
+                /(<Component\s+\{\.\.\.pageProps\}\s*\/>)/,
+                '<VeltClientWrapper><Component {...pageProps} /></VeltClientWrapper>'
+            );
+        }
+    }
+
+    // Write the modified content
+    fs.writeFileSync(layoutPath, content, 'utf8');
+    console.log(`\nAuto-wired VeltProvider + VeltCollaboration in ${relPath}`);
+
+    return { success: true, file: relPath };
+}
+
+// Copy icon assets from CLI to user's public/icons
+function copyIconAssets(cwd) {
+    try {
+        const publicIconsDir = path.join(cwd, 'public', 'icons');
+        if (!fs.existsSync(publicIconsDir)) {
+            fs.mkdirSync(publicIconsDir, { recursive: true });
+        }
+
+        // Get the CLI's assets directory
+        const cliAssetsDir = path.join(__dirname, '..', 'assets', 'icons');
+
+        const iconFiles = ['bell-icon.svg', 'inbox-icon.svg'];
+        iconFiles.forEach(iconFile => {
+            const srcPath = path.join(cliAssetsDir, iconFile);
+            const destPath = path.join(publicIconsDir, iconFile);
+
+            if (fs.existsSync(srcPath) && !fs.existsSync(destPath)) {
+                fs.copyFileSync(srcPath, destPath);
+                console.log(`Copied public/icons/${iconFile}`);
+            }
+        });
+    } catch (error) {
+        console.warn(`Warning: Failed to copy icon files: ${error.message}`);
+    }
+}
+
+function generateSetupInstructions(analysis, features, filesWritten, deps) {
+    console.log('\n----------------------------------------');
+    console.log('FILES CREATED:');
+    console.log('----------------------------------------');
+
+    const coreFiles = filesWritten.filter(f => !f.includes('ui-customization'));
+    const uiFiles = filesWritten.filter(f => f.includes('ui-customization'));
+
+    console.log('\nCore components:');
+    coreFiles.forEach(f => console.log(`  - ${f}`));
+
+    if (uiFiles.length > 0) {
+        console.log('\nUI customization:');
+        uiFiles.forEach(f => console.log(`  - ${f}`));
+    }
+
+    console.log('\n----------------------------------------');
+    console.log('DEPENDENCIES INSTALLED:');
+    console.log('----------------------------------------');
+    if (deps.production.length) {
+        console.log('\nProduction:');
+        deps.production.forEach(d => console.log(`  - ${d}`));
+    }
+    if (deps.development.length) {
+        console.log('\nDevelopment:');
+        deps.development.forEach(d => console.log(`  - ${d}`));
+    }
+
+    console.log('\n----------------------------------------');
+    console.log('NEXT STEPS:');
+    console.log('----------------------------------------');
+
+    let stepNum = 1;
+
+    console.log(`\n${stepNum++}. Get your API key from https://console.velt.dev`);
+    console.log(`\n${stepNum++}. Wrap your app with VeltProvider in your layout file`);
+    console.log(`   Set NEXT_PUBLIC_VELT_API_KEY in your .env.local file`);
+
+    console.log(`\n${stepNum++}. Update VeltInitializeDocument.tsx with your document ID source`);
+    console.log(`\n${stepNum++}. Update VeltInitializeUser.tsx with your user authentication logic`);
+
+    if (hasAnyFeature(features)) {
+        console.log(`\n${stepNum++}. Add <VeltTools /> to your toolbar area for Presence, Sidebar, and Notifications`);
+    }
+
+    if (features.crdt !== 'none') {
+        console.log(`\n${stepNum++}. For ${features.crdt.toUpperCase()} CRDT integration, see:`);
+        if (features.crdt === 'reactflow') {
+            console.log('   https://docs.velt.dev/async-collaboration/comments/setup/react-flow');
+        } else if (features.crdt === 'tiptap') {
+            console.log('   https://docs.velt.dev/realtime-collaboration/single-editor-mode/tiptap');
+        } else {
+            console.log('   https://docs.velt.dev/realtime-collaboration/single-editor-mode/codemirror');
+        }
+    }
+
+    // Features summary
+    console.log('\n----------------------------------------');
+    console.log('FEATURES ENABLED:');
+    console.log('----------------------------------------');
+    if (features.presence) {
+        console.log('\n  - Presence: VeltPresence (shows online users)');
+    }
+    if (features.cursors) {
+        console.log('  - Cursors: VeltCursor (shows live cursor positions)');
+    }
+    if (features.comments) {
+        console.log('  - Comments: VeltComments + VeltCommentsSidebar');
+    }
+    if (features.notifications) {
+        console.log('  - Notifications: VeltNotificationsTool');
+    }
+    if (features.crdt !== 'none') {
+        console.log(`  - CRDT: ${features.crdt} real-time sync`);
+    }
+    if (!hasAnyFeature(features)) {
+        console.log('\n  - Core only (VeltProvider + VeltInitialize)');
+    }
+}
+
+function parseArgs(argv) {
+    const args = argv.slice(2);
+    const result = { _: [] };
+    for (let i = 0; i < args.length; i++) {
+        const token = args[i];
+        if (token.startsWith('--')) {
+            if (token.includes('=')) {
+                const [fullKey, ...valueParts] = token.split('=');
+                const key = fullKey.replace(/^--/, '');
+                let value = valueParts.join('=');
+                if ((value.startsWith('"') && value.endsWith('"')) ||
+                    (value.startsWith("'") && value.endsWith("'"))) {
+                    value = value.slice(1, -1);
+                }
+                result[key] = value;
+            } else {
+                const key = token.replace(/^--/, '');
+                const next = args[i + 1];
+                if (next && !next.startsWith('-')) {
+                    let value = next;
+                    if ((value.startsWith('"') && value.endsWith('"')) ||
+                        (value.startsWith("'") && value.endsWith("'"))) {
+                        value = value.slice(1, -1);
+                    }
+                    result[key] = value;
+                    i++;
+                } else {
+                    result[key] = true;
+                }
+            }
+        } else if (token.startsWith('-')) {
+            const key = token.replace(/^-+/, '');
+            result[key] = true;
+        } else {
+            result._.push(token);
+        }
+    }
+    return result;
+}
+
+function readPkg(cwd) {
+    const pkgPath = path.join(cwd, 'package.json');
+    if (!fs.existsSync(pkgPath)) return null;
+    return JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+}
+
+function printUsage() {
+    console.log(`
+add-velt - Add Velt collaboration to Next.js apps
+
+Usage:
+  npx add-velt [options]
+
+Feature Flags:
+  --presence            Add presence (VeltPresence - shows online users)
+  --cursors             Add cursors (VeltCursor - shows live cursor positions)
+  --comments            Add comments (VeltComments, VeltCommentsSidebar)
+  --notifications       Add notifications (VeltNotificationsTool)
+
+CRDT Type Flags (choose one):
+  --reactflow-crdt      Add ReactFlow CRDT (canvas collaboration)
+  --tiptap-crdt         Add Tiptap CRDT (rich text editor)
+  --codemirror-crdt     Add CodeMirror CRDT (code editor)
+
+Combined:
+  --all                 Enable presence + cursors + comments + notifications + CRDT
+                        (requires a CRDT type flag)
+
+Installation Flags:
+  --force, -f           Force overwrite existing files
+  --legacy-peer-deps    Use legacy peer deps (npm only)
+  --help, -h            Show this help message
+
+Examples:
+  npx add-velt                              # Core only
+  npx add-velt --presence                   # Presence only
+  npx add-velt --cursors                    # Cursors only
+  npx add-velt --comments                   # Comments only
+  npx add-velt --notifications              # Notifications only
+  npx add-velt --presence --cursors         # Presence + Cursors
+  npx add-velt --comments --notifications   # Comments + Notifications
+  npx add-velt --reactflow-crdt             # ReactFlow CRDT only
+  npx add-velt --tiptap-crdt                # Tiptap CRDT only
+  npx add-velt --codemirror-crdt            # CodeMirror CRDT only
+  npx add-velt --all --reactflow-crdt       # All features with ReactFlow
+  npx add-velt --all --tiptap-crdt          # All features with Tiptap
+  npx add-velt --all --codemirror-crdt      # All features with CodeMirror
+
+Note:
+  - Only ONE CRDT type can be selected at a time
+  - --all requires a CRDT type flag
+  - Get your API key from https://console.velt.dev
+    `);
+}
+
+if (require.main === module) {
+    main();
+}
+
+module.exports = {
+    analyzeProject,
+    resolveDependencies,
+    detectPackageManager,
+    smartInstall,
+    parseFeatures,
+    generateVeltConfig
+};