radtools 0.1.0

package/README.md

@@ -0,0 +1,108 @@
+# RadTools
+
+A Webflow-like visual editing dev tools system for Next.js + Tailwind v4 projects.
+
+## Features
+
+- **Variables Tab** - Manage design tokens (brand colors, semantic tokens, color modes, border radius)
+- **Typography Tab** - Manage fonts and typography styles
+- **Components Tab** - Auto-discover components from `/components/` directory with prop information
+- **Assets Tab** - Upload, organize, and optimize images in `public/assets/`
+- **Mock States Tab** - Simulate auth, wallet, subscription states during development
+
+## Quick Start
+
+1. Press `⇧⌘K` (Mac) or `⇧Ctrl+K` (Windows/Linux) to toggle the dev tools panel
+2. The panel is draggable - move it wherever you like
+3. Switch between tabs to access different features
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `⇧⌘K` / `⇧Ctrl+K` | Toggle dev tools panel |
+| `Esc` | Close modals |
+
+## Tab Guide
+
+### Variables Tab
+Edit your design tokens visually:
+- Add/edit/delete brand colors and neutrals
+- Create semantic tokens that reference brand colors
+- Toggle color modes (dark mode preview)
+- Adjust border radius values
+- Click "Save to CSS" to write changes to `app/globals.css`
+
+### Typography Tab
+Manage fonts and typography styles:
+- Upload and manage font files from `public/fonts/`
+- Configure typography styles for HTML elements (h1-h6, p, code, etc.)
+- Visual editor for typography properties
+- Changes automatically persist to `app/globals.css`
+
+### Components Tab
+Discover all components in your `/components/` directory:
+- Auto-scans for default exports
+- Displays prop types, required status, and default values
+- Click "Refresh" to rescan after adding new components
+
+### Assets Tab
+Manage files in `public/assets/`:
+- Drag and drop to upload images
+- Organize into folders (icons, images, logos, backgrounds)
+- Select images and click "Optimize" for Sharp-based compression
+- Delete assets directly from the UI
+
+### Mock States Tab
+Simulate different app states:
+- Pre-configured presets for auth, wallet, and subscription states
+- Create custom mock states with JSON values
+- Use `useMockState('category')` hook in components to consume mock data
+- Only one state per category can be active at a time
+
+## Using Mock States in Components
+
+```tsx
+import { useMockState } from '@/devtools';
+
+function UserProfile() {
+  const mockAuth = useMockState('auth');
+  const realAuth = useRealAuthHook();
+  
+  // In development with mock active: use mock
+  // In development without mock: use real
+  // In production: mock is undefined, use real
+  const auth = mockAuth ?? realAuth;
+  
+  if (!auth?.isAuthenticated) return <LoginPrompt />;
+  return <Profile user={auth.user} />;
+}
+```
+
+## Production Safety
+
+- Dev tools are automatically excluded from production builds
+- `NODE_ENV === 'production'` check prevents rendering
+- API routes return 403 in production
+- `useMockState()` returns `undefined` in production
+
+## File Structure
+
+```
+/devtools/
+├── index.ts              # Public exports
+├── DevToolsProvider.tsx  # Main provider
+├── DevToolsPanel.tsx     # Panel with tabs
+├── store/                # Zustand store
+├── tabs/                 # Tab components
+├── components/           # Shared UI components
+├── hooks/                # Custom hooks
+├── lib/                  # Utilities
+└── types/                # TypeScript types
+```
+
+## Dependencies
+
+- `zustand` - State management
+- `react-draggable` - Draggable panel
+- `sharp` - Image optimization (API routes)

package/bin/radtools.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+import('../dist/cli/index.js').catch((error) => {
+  console.error('Failed to load RadTools CLI:', error.message);
+  process.exit(1);
+});

package/dist/cli/index.js

@@ -0,0 +1,427 @@
+// src/cli/init.ts
+import * as fs4 from "fs";
+import * as path4 from "path";
+import * as readline from "readline";
+import { fileURLToPath } from "url";
+
+// src/cli/utils/detect-package-manager.ts
+import * as fs from "fs";
+import * as path from "path";
+function detectPackageManager(cwd) {
+  if (fs.existsSync(path.join(cwd, "bun.lockb"))) {
+    return "bun";
+  }
+  if (fs.existsSync(path.join(cwd, "pnpm-lock.yaml"))) {
+    return "pnpm";
+  }
+  if (fs.existsSync(path.join(cwd, "yarn.lock"))) {
+    return "yarn";
+  }
+  return "npm";
+}
+
+// src/cli/utils/install-dependencies.ts
+import { spawn } from "child_process";
+var DEPENDENCIES = ["zustand", "react-draggable", "sharp"];
+function installDependencies(packageManager, cwd) {
+  return new Promise((resolve2, reject) => {
+    let command;
+    let args;
+    switch (packageManager) {
+      case "npm":
+        command = "npm";
+        args = ["install", ...DEPENDENCIES];
+        break;
+      case "yarn":
+        command = "yarn";
+        args = ["add", ...DEPENDENCIES];
+        break;
+      case "pnpm":
+        command = "pnpm";
+        args = ["add", ...DEPENDENCIES];
+        break;
+      case "bun":
+        command = "bun";
+        args = ["add", ...DEPENDENCIES];
+        break;
+    }
+    const child = spawn(command, args, {
+      cwd,
+      stdio: "inherit",
+      shell: true
+    });
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve2();
+      } else {
+        reject(new Error(`${command} exited with code ${code}`));
+      }
+    });
+    child.on("error", (err) => {
+      reject(err);
+    });
+  });
+}
+
+// src/cli/utils/copy-templates.ts
+import * as fs2 from "fs";
+import * as path2 from "path";
+function copyDir(src, dest) {
+  fs2.mkdirSync(dest, { recursive: true });
+  const entries = fs2.readdirSync(src, { withFileTypes: true });
+  for (const entry of entries) {
+    const srcPath = path2.join(src, entry.name);
+    const destPath = path2.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      fs2.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+async function copyTemplates(templatesDir, targetDir) {
+  if (!fs2.existsSync(templatesDir)) {
+    throw new Error(`Templates directory not found: ${templatesDir}`);
+  }
+  const devtoolsSrc = path2.join(templatesDir, "devtools");
+  const devtoolsDest = path2.join(targetDir, "devtools");
+  if (fs2.existsSync(devtoolsSrc)) {
+    copyDir(devtoolsSrc, devtoolsDest);
+  }
+  const componentsSrc = path2.join(templatesDir, "components");
+  const componentsDest = path2.join(targetDir, "components");
+  if (fs2.existsSync(componentsSrc)) {
+    fs2.mkdirSync(componentsDest, { recursive: true });
+    const uiSrc = path2.join(componentsSrc, "ui");
+    const uiDest = path2.join(componentsDest, "ui");
+    if (fs2.existsSync(uiSrc)) {
+      copyDir(uiSrc, uiDest);
+    }
+    const radOsSrc = path2.join(componentsSrc, "Rad_os");
+    const radOsDest = path2.join(componentsDest, "Rad_os");
+    if (fs2.existsSync(radOsSrc)) {
+      copyDir(radOsSrc, radOsDest);
+    }
+    const iconsSrc2 = path2.join(componentsSrc, "icons");
+    const iconsDest2 = path2.join(componentsDest, "icons");
+    if (fs2.existsSync(iconsSrc2)) {
+      copyDir(iconsSrc2, iconsDest2);
+    }
+    const iconsFileSrc = path2.join(componentsSrc, "icons.tsx");
+    const iconsFileDest = path2.join(componentsDest, "icons.tsx");
+    if (fs2.existsSync(iconsFileSrc)) {
+      fs2.copyFileSync(iconsFileSrc, iconsFileDest);
+    }
+  }
+  const hooksSrc = path2.join(templatesDir, "hooks");
+  const hooksDest = path2.join(targetDir, "hooks");
+  if (fs2.existsSync(hooksSrc)) {
+    copyDir(hooksSrc, hooksDest);
+  }
+  const apiRoutesSrc = path2.join(templatesDir, "api-routes");
+  const apiRoutesDest = path2.join(targetDir, "app", "api", "devtools");
+  if (fs2.existsSync(apiRoutesSrc)) {
+    fs2.mkdirSync(path2.join(targetDir, "app", "api"), { recursive: true });
+    copyDir(apiRoutesSrc, apiRoutesDest);
+  }
+  const iconsSrc = path2.join(templatesDir, "public", "assets", "icons");
+  const iconsDest = path2.join(targetDir, "public", "assets", "icons");
+  if (fs2.existsSync(iconsSrc)) {
+    copyDir(iconsSrc, iconsDest);
+  }
+  const globalsCssSrc = path2.join(templatesDir, "globals.css");
+  const globalsCssDest = path2.join(targetDir, "app", "globals.css");
+  if (fs2.existsSync(globalsCssSrc)) {
+    fs2.copyFileSync(globalsCssSrc, globalsCssDest);
+  }
+}
+
+// src/cli/utils/update-layout.ts
+import * as fs3 from "fs";
+import * as path3 from "path";
+async function updateLayout(cwd) {
+  const possiblePaths = [
+    path3.join(cwd, "app", "layout.tsx"),
+    path3.join(cwd, "app", "layout.js"),
+    path3.join(cwd, "app", "layout.jsx")
+  ];
+  let layoutPath = null;
+  for (const p of possiblePaths) {
+    if (fs3.existsSync(p)) {
+      layoutPath = p;
+      break;
+    }
+  }
+  if (!layoutPath) {
+    throw new Error("Could not find app/layout.tsx or app/layout.js");
+  }
+  let content = fs3.readFileSync(layoutPath, "utf-8");
+  if (content.includes("DevToolsProvider")) {
+    return true;
+  }
+  const devtoolsImport = "import { DevToolsProvider } from '@/devtools';";
+  const importRegex = /^import\s+.*?(?:from\s+['"][^'"]+['"])?;?\s*$/gm;
+  let lastImportEnd = 0;
+  let match;
+  while ((match = importRegex.exec(content)) !== null) {
+    lastImportEnd = match.index + match[0].length;
+  }
+  if (lastImportEnd > 0) {
+    content = content.slice(0, lastImportEnd) + "\n" + devtoolsImport + content.slice(lastImportEnd);
+  } else {
+    content = devtoolsImport + "\n" + content;
+  }
+  const childrenPatterns = [
+    /(\{children\})/g,
+    /(\{\s*children\s*\})/g
+  ];
+  let wrapped = false;
+  for (const pattern of childrenPatterns) {
+    if (pattern.test(content)) {
+      content = content.replace(pattern, "<DevToolsProvider>$1</DevToolsProvider>");
+      wrapped = true;
+      break;
+    }
+  }
+  if (!wrapped) {
+    const bodyPattern = /(<body[^>]*>)([\s\S]*?)(\{children\})([\s\S]*?)(<\/body>)/;
+    if (bodyPattern.test(content)) {
+      content = content.replace(
+        bodyPattern,
+        "$1$2<DevToolsProvider>$3</DevToolsProvider>$4$5"
+      );
+      wrapped = true;
+    }
+  }
+  if (!wrapped) {
+    throw new Error(
+      "Could not find {children} to wrap with DevToolsProvider. Please add manually."
+    );
+  }
+  fs3.writeFileSync(layoutPath, content, "utf-8");
+  return true;
+}
+
+// src/cli/init.ts
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path4.dirname(__filename);
+var colors = {
+  reset: "\x1B[0m",
+  bold: "\x1B[1m",
+  dim: "\x1B[2m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  blue: "\x1B[34m",
+  cyan: "\x1B[36m",
+  red: "\x1B[31m"
+};
+function log(message) {
+  console.log(message);
+}
+function success(message) {
+  console.log(`${colors.green}\u2713${colors.reset} ${message}`);
+}
+function warn(message) {
+  console.log(`${colors.yellow}!${colors.reset} ${message}`);
+}
+function error(message) {
+  console.log(`${colors.red}\u2717${colors.reset} ${message}`);
+}
+function box(lines) {
+  const maxLength = Math.max(...lines.map((l) => l.length));
+  const top = `\u256D${"\u2500".repeat(maxLength + 4)}\u256E`;
+  const bottom = `\u2570${"\u2500".repeat(maxLength + 4)}\u256F`;
+  const middle = lines.map((l) => `\u2502  ${l.padEnd(maxLength)}  \u2502`).join("\n");
+  return `${top}
+${middle}
+${bottom}`;
+}
+async function prompt(question) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+  return new Promise((resolve2) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve2(answer.trim());
+    });
+  });
+}
+async function confirm(question) {
+  const answer = await prompt(`${question} (Y/n) `);
+  return answer.toLowerCase() !== "n";
+}
+function checkPrerequisites(cwd) {
+  const errors = [];
+  const packageJsonPath = path4.join(cwd, "package.json");
+  if (!fs4.existsSync(packageJsonPath)) {
+    errors.push("No package.json found. Run this command in a Next.js project root.");
+    return { valid: false, errors };
+  }
+  const packageJson = JSON.parse(fs4.readFileSync(packageJsonPath, "utf-8"));
+  const hasNext = packageJson.dependencies?.next || packageJson.devDependencies?.next;
+  if (!hasNext) {
+    errors.push("Next.js not found in dependencies. This tool requires Next.js.");
+  }
+  const tailwindVersion = packageJson.dependencies?.tailwindcss || packageJson.devDependencies?.tailwindcss || packageJson.dependencies?.["@tailwindcss/postcss"] || packageJson.devDependencies?.["@tailwindcss/postcss"];
+  if (!tailwindVersion) {
+    errors.push("Tailwind CSS not found in dependencies.");
+  } else if (!tailwindVersion.includes("4") && !tailwindVersion.includes("^4")) {
+    warn(`Tailwind CSS version ${tailwindVersion} detected. RadTools is optimized for Tailwind v4.`);
+  }
+  const appDir = path4.join(cwd, "app");
+  if (!fs4.existsSync(appDir)) {
+    errors.push("No /app directory found. RadTools requires Next.js App Router.");
+  }
+  return { valid: errors.length === 0, errors };
+}
+function checkExistingInstallation(cwd) {
+  const conflicts = [];
+  if (fs4.existsSync(path4.join(cwd, "devtools"))) {
+    conflicts.push("devtools/ directory already exists");
+  }
+  if (fs4.existsSync(path4.join(cwd, "app", "api", "devtools"))) {
+    conflicts.push("app/api/devtools/ directory already exists");
+  }
+  return conflicts;
+}
+async function init() {
+  const cwd = process.cwd();
+  log("");
+  log(
+    box([
+      "",
+      `${colors.bold}RadTools${colors.reset} - Visual Dev Tools`,
+      "for Next.js + Tailwind v4",
+      ""
+    ])
+  );
+  log("");
+  log(`${colors.dim}Checking prerequisites...${colors.reset}`);
+  const { valid, errors: prereqErrors } = checkPrerequisites(cwd);
+  if (!valid) {
+    for (const err of prereqErrors) {
+      error(err);
+    }
+    process.exit(1);
+  }
+  success("Next.js project detected");
+  success("Tailwind CSS detected");
+  success("App Router detected");
+  log("");
+  const conflicts = checkExistingInstallation(cwd);
+  if (conflicts.length > 0) {
+    warn("Existing installation detected:");
+    for (const conflict of conflicts) {
+      log(`  - ${conflict}`);
+    }
+    log("");
+    const proceed = await confirm("Do you want to overwrite existing files?");
+    if (!proceed) {
+      log("Installation cancelled.");
+      process.exit(0);
+    }
+    log("");
+  }
+  const packageManager = detectPackageManager(cwd);
+  success(`Using ${packageManager}`);
+  log("");
+  log(`${colors.bold}Installing RadTools...${colors.reset}`);
+  log("");
+  const templatesDir = path4.resolve(__dirname, "..", "..", "templates");
+  try {
+    await copyTemplates(templatesDir, cwd);
+    success("Created devtools/");
+    success("Created components/ui/");
+    success("Created app/api/devtools/");
+    success("Created public/assets/icons/");
+    success("Replaced app/globals.css with RadTools theme");
+  } catch (err) {
+    error(`Failed to copy templates: ${err.message}`);
+    process.exit(1);
+  }
+  try {
+    const updated = await updateLayout(cwd);
+    if (updated) {
+      success("Updated app/layout.tsx with DevToolsProvider");
+    } else {
+      warn("Could not auto-update layout.tsx. Please add DevToolsProvider manually.");
+    }
+  } catch (err) {
+    warn(`Could not update layout.tsx: ${err.message}`);
+    warn("Please add DevToolsProvider manually.");
+  }
+  log("");
+  log(`${colors.dim}Installing dependencies...${colors.reset}`);
+  try {
+    await installDependencies(packageManager, cwd);
+    success("Installed zustand, react-draggable");
+  } catch (err) {
+    warn(`Could not auto-install dependencies: ${err.message}`);
+    log("");
+    log("Please install manually:");
+    log(`  ${packageManager} ${packageManager === "npm" ? "install" : "add"} zustand react-draggable`);
+  }
+  log("");
+  log(
+    box([
+      "",
+      `${colors.green}RadTools installed successfully!${colors.reset}`,
+      "",
+      `Press ${colors.cyan}Shift+Cmd+K${colors.reset} to open devtools`,
+      `(${colors.dim}Shift+Ctrl+K on Windows/Linux${colors.reset})`,
+      ""
+    ])
+  );
+  log("");
+  log(`${colors.bold}Next steps:${colors.reset}`);
+  log("");
+  log(`  1. Start your dev server: ${colors.cyan}${packageManager} run dev${colors.reset}`);
+  log(`  2. Press ${colors.cyan}Shift+Cmd+K${colors.reset} to open RadTools`);
+  log("");
+}
+
+// src/cli/index.ts
+var VERSION = "0.1.0";
+var HELP = `
+  RadTools - Visual Dev Tools for Next.js + Tailwind v4
+
+  Usage:
+    radtools <command> [options]
+
+  Commands:
+    init          Install RadTools in your Next.js project
+
+  Options:
+    --help, -h    Show this help message
+    --version, -v Show version number
+
+  Examples:
+    npx radtools init
+`;
+async function main() {
+  const args = process.argv.slice(2);
+  const command = args[0];
+  if (args.includes("--help") || args.includes("-h") || !command) {
+    console.log(HELP);
+    process.exit(0);
+  }
+  if (args.includes("--version") || args.includes("-v")) {
+    console.log(`radtools v${VERSION}`);
+    process.exit(0);
+  }
+  switch (command) {
+    case "init":
+      await init();
+      break;
+    default:
+      console.error(`Unknown command: ${command}`);
+      console.log(HELP);
+      process.exit(1);
+  }
+}
+main().catch((error2) => {
+  console.error("Error:", error2.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "radtools",
+  "version": "0.1.0",
+  "description": "Visual dev tools for Next.js + Tailwind v4 projects",
+  "keywords": ["nextjs", "tailwind", "devtools", "design-system", "visual-editor"],
+  "author": "kemos4be",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Radiants-DAO/radtools.git"
+  },
+  "homepage": "https://github.com/Radiants-DAO/radtools#readme",
+  "bugs": {
+    "url": "https://github.com/Radiants-DAO/radtools/issues"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "type": "module",
+  "bin": {
+    "radtools": "./bin/radtools.js"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "build:cli": "tsup src/cli/index.ts --format esm --outDir dist/cli --clean --target node18",
+    "prepublishOnly": "npm run build:cli",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.0.10",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "react-draggable": "^4.5.0",
+    "sharp": "^0.34.5",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.10",
+    "tailwindcss": "^4",
+    "tsup": "^8.3.0",
+    "typescript": "^5"
+  }
+}

package/templates/api-routes/assets/optimize/route.ts

@@ -0,0 +1,94 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { readFile, writeFile } from 'fs/promises';
+import { join, extname } from 'path';
+import sharp from 'sharp';
+
+const ASSETS_DIR = join(process.cwd(), 'public', 'assets');
+
+export async function POST(req: NextRequest) {
+  if (process.env.NODE_ENV !== 'development') {
+    return NextResponse.json(
+      { error: 'Dev tools API not available in production' },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const { files } = await req.json();
+
+    if (!Array.isArray(files) || files.length === 0) {
+      return NextResponse.json({ error: 'No files provided' }, { status: 400 });
+    }
+
+    const results: { path: string; originalSize: number; optimizedSize: number }[] = [];
+
+    for (const filePath of files) {
+      // Validate path to prevent directory traversal
+      const safePath = filePath.replace(/\.\./g, '').replace(/^\/+/, '');
+      const fullPath = join(process.cwd(), 'public', safePath);
+
+      // Ensure the path is within the assets directory
+      if (!fullPath.startsWith(ASSETS_DIR)) {
+        continue;
+      }
+
+      const ext = extname(fullPath).toLowerCase();
+      
+      // Only optimize images
+      if (!['.jpg', '.jpeg', '.png', '.webp'].includes(ext)) {
+        continue;
+      }
+
+      try {
+        const originalBuffer = await readFile(fullPath);
+        const originalSize = originalBuffer.length;
+
+        let optimizedBuffer: Buffer;
+
+        if (ext === '.png') {
+          optimizedBuffer = await sharp(originalBuffer)
+            .png({ quality: 80, compressionLevel: 9 })
+            .toBuffer();
+        } else if (ext === '.webp') {
+          optimizedBuffer = await sharp(originalBuffer)
+            .webp({ quality: 80 })
+            .toBuffer();
+        } else {
+          optimizedBuffer = await sharp(originalBuffer)
+            .jpeg({ quality: 80, progressive: true })
+            .toBuffer();
+        }
+
+        // Only save if we actually reduced the size
+        if (optimizedBuffer.length < originalSize) {
+          await writeFile(fullPath, optimizedBuffer);
+          results.push({
+            path: safePath,
+            originalSize,
+            optimizedSize: optimizedBuffer.length,
+          });
+        } else {
+          results.push({
+            path: safePath,
+            originalSize,
+            optimizedSize: originalSize,
+          });
+        }
+      } catch (err) {
+        // Failed to optimize file - skip
+      }
+    }
+
+    return NextResponse.json({ 
+      success: true, 
+      results,
+      totalSaved: results.reduce((sum, r) => sum + (r.originalSize - r.optimizedSize), 0),
+    });
+  } catch (error) {
+    return NextResponse.json(
+      { error: 'Failed to optimize files', details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+