radtools 0.1.0

package/templates/devtools/tabs/AssetsTab/AssetGrid.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { Icon } from '@/components/icons';
+import type { AssetFile } from '../../types';
+
+interface AssetGridProps {
+  files: AssetFile[];
+  selectedFiles: string[];
+  onSelect: (path: string, multi: boolean) => void;
+  onDelete: (path: string) => void;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function AssetGrid({ files, selectedFiles, onSelect, onDelete }: AssetGridProps) {
+  if (files.length === 0) {
+    return (
+      <div className="text-center py-8 text-black/60 text-xs">
+        No files in this folder
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-2">
+      {files.map((file) => (
+        <div
+          key={file.path}
+          onClick={(e) => onSelect(file.path, e.shiftKey || e.metaKey)}
+          className={`relative group rounded-lg border overflow-hidden cursor-pointer transition-colors ${
+            selectedFiles.includes(file.path)
+              ? 'border-focus ring-2 ring-focus/20'
+              : 'border-border hover:border-focus'
+          }`}
+        >
+          {/* Preview */}
+          <div className="aspect-square bg-sun-yellow/20 flex items-center justify-center">
+            {file.type === 'image' ? (
+              <img
+                src={file.path}
+                alt={file.name}
+                className="max-w-full max-h-full object-contain"
+              />
+            ) : (
+              <span className="text-2xl">
+                {file.type === 'video' ? '🎬' : '📄'}
+              </span>
+            )}
+          </div>
+
+          {/* Info */}
+          <div className="p-2 bg-warm-cloud">
+            <p className="text-xs font-medium text-black truncate">{file.name}</p>
+            <p className="text-xs text-black/60">{formatSize(file.size)}</p>
+          </div>
+
+          {/* Delete button */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete(file.path);
+            }}
+            className="absolute top-1 right-1 w-6 h-6 bg-error-red text-cream rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
+          >
+            <Icon name="close" size={12} className="text-cream" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+

package/templates/devtools/tabs/AssetsTab/FolderTree.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState } from 'react';
+import type { AssetFolder, AssetFile } from '../../types';
+
+interface FolderTreeProps {
+  folder: AssetFolder;
+  selectedFolder: string | null;
+  onSelectFolder: (path: string) => void;
+  depth?: number;
+}
+
+export function FolderTree({ folder, selectedFolder, onSelectFolder, depth = 0 }: FolderTreeProps) {
+  const [expanded, setExpanded] = useState(depth < 2);
+
+  const subfolders = folder.children.filter((c): c is AssetFolder => 'children' in c);
+  const files = folder.children.filter((c): c is AssetFile => !('children' in c));
+
+  return (
+    <div style={{ paddingLeft: depth > 0 ? '12px' : '0' }}>
+      <button
+        onClick={() => {
+          setExpanded(!expanded);
+          onSelectFolder(folder.path);
+        }}
+        className={`w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-xs text-left transition-colors ${
+          selectedFolder === folder.path
+            ? 'bg-sun-yellow text-black'
+            : 'hover:bg-sun-yellow/20 text-black'
+        }`}
+      >
+        <span>{expanded ? '📂' : '📁'}</span>
+        <span className="flex-1">{folder.name}</span>
+        <span className="text-black/60">{files.length}</span>
+      </button>
+
+      {expanded && subfolders.length > 0 && (
+        <div className="mt-1">
+          {subfolders.map((subfolder) => (
+            <FolderTree
+              key={subfolder.path}
+              folder={subfolder}
+              selectedFolder={selectedFolder}
+              onSelectFolder={onSelectFolder}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+

package/templates/devtools/tabs/AssetsTab/UploadDropzone.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+
+interface UploadDropzoneProps {
+  onUpload: (files: File[]) => void;
+  isUploading: boolean;
+}
+
+export function UploadDropzone({ onUpload, isUploading }: UploadDropzoneProps) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      onUpload(files);
+    }
+  }, [onUpload]);
+
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length > 0) {
+      onUpload(files);
+    }
+    e.target.value = '';
+  }, [onUpload]);
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      className={`border-2 border-dashed rounded-lg p-4 text-center transition-colors ${
+        isDragging
+          ? 'border-focus bg-focus/10'
+          : 'border-border hover:border-focus'
+      }`}
+    >
+      <input
+        type="file"
+        id="file-upload"
+        multiple
+        onChange={handleFileSelect}
+        className="hidden"
+        accept="image/*,video/*"
+      />
+      
+      <label
+        htmlFor="file-upload"
+        className="cursor-pointer block"
+      >
+        <div className="text-2xl mb-2">📤</div>
+        <p className="text-xs text-black mb-1">
+          {isUploading ? 'Uploading...' : 'Drop files here or click to upload'}
+        </p>
+        <p className="text-xs text-black/60">
+          Images & videos only
+        </p>
+      </label>
+    </div>
+  );
+}
+

package/templates/devtools/tabs/AssetsTab/index.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useDevToolsStore } from '../../store';
+import { FolderTree } from './FolderTree';
+import { AssetGrid } from './AssetGrid';
+import { UploadDropzone } from './UploadDropzone';
+import type { AssetFile, AssetFolder } from '../../types';
+import { Button } from '@/components/ui/Button';
+
+export function AssetsTab() {
+  const {
+    assets,
+    selectedFolder,
+    setSelectedFolder,
+    refreshAssets,
+    uploadAsset,
+    deleteAsset,
+    optimizeAssets,
+    isLoading
+  } = useDevToolsStore();
+
+  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isOptimizing, setIsOptimizing] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  const messageTimerRef = useRef<NodeJS.Timeout>(undefined);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (messageTimerRef.current) clearTimeout(messageTimerRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    refreshAssets();
+  }, []);
+
+  // Get files in selected folder
+  const getFilesInFolder = (folder: AssetFolder | null, targetPath: string | null): AssetFile[] => {
+    if (!folder || !targetPath) return [];
+    
+    if (folder.path === targetPath) {
+      return folder.children.filter((c): c is AssetFile => !('children' in c));
+    }
+
+    for (const child of folder.children) {
+      if ('children' in child) {
+        const result = getFilesInFolder(child, targetPath);
+        if (result.length > 0 || child.path === targetPath) {
+          return result.length > 0 ? result : child.children.filter((c): c is AssetFile => !('children' in c));
+        }
+      }
+    }
+
+    return [];
+  };
+
+  const currentFiles = assets ? getFilesInFolder(assets, selectedFolder || assets.path) : [];
+
+  const handleUpload = async (files: File[]) => {
+    setIsUploading(true);
+    try {
+      for (const file of files) {
+        const folder = selectedFolder?.replace('/assets/', '') || '';
+        await uploadAsset(file, folder);
+      }
+      setMessage({ type: 'success', text: `Uploaded ${files.length} file(s)` });
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Upload failed' });
+    } finally {
+      setIsUploading(false);
+      if (messageTimerRef.current) clearTimeout(messageTimerRef.current);
+      messageTimerRef.current = setTimeout(() => setMessage(null), 3000);
+    }
+  };
+
+  const handleDelete = async (path: string) => {
+    if (!confirm('Delete this file?')) return;
+    await deleteAsset(path);
+    setSelectedFiles((prev) => prev.filter((p) => p !== path));
+  };
+
+  const handleOptimize = async () => {
+    if (selectedFiles.length === 0) return;
+    setIsOptimizing(true);
+    try {
+      await optimizeAssets(selectedFiles);
+      setMessage({ type: 'success', text: 'Optimization complete!' });
+    } catch {
+      setMessage({ type: 'error', text: 'Optimization failed' });
+    } finally {
+      setIsOptimizing(false);
+      if (messageTimerRef.current) clearTimeout(messageTimerRef.current);
+      messageTimerRef.current = setTimeout(() => setMessage(null), 3000);
+    }
+  };
+
+  const handleSelect = (path: string, multi: boolean) => {
+    setSelectedFiles((prev) => {
+      if (multi) {
+        return prev.includes(path) 
+          ? prev.filter((p) => p !== path)
+          : [...prev, path];
+      }
+      return prev.includes(path) && prev.length === 1 ? [] : [path];
+    });
+  };
+
+  return (
+    <div className="flex flex-col h-full overflow-auto pt-4 pb-4 pl-4 pr-2 bg-[var(--color-white)] border border-black rounded space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="font-joystix text-sm uppercase text-black">Assets</h2>
+        <div className="flex gap-2">
+          {selectedFiles.length > 0 && (
+            <Button
+              variant="primary"
+              size="md"
+              iconName="lightning"
+              onClick={handleOptimize}
+              disabled={isOptimizing}
+            >
+              {isOptimizing ? 'Optimizing...' : `Optimize (${selectedFiles.length})`}
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            size="md"
+            iconName="refresh"
+            onClick={() => refreshAssets()}
+            disabled={isLoading}
+          >
+            {isLoading ? 'Loading...' : 'Refresh'}
+          </Button>
+        </div>
+      </div>
+
+      {/* Message */}
+      {message && (
+        <div
+          className={`px-3 py-2 font-mondwest text-base rounded-sm ${
+            message.type === 'success'
+              ? 'bg-success-green text-black'
+              : 'bg-error-red text-cream'
+          }`}
+        >
+          {message.text}
+        </div>
+      )}
+
+      {/* Upload Dropzone */}
+      <UploadDropzone onUpload={handleUpload} isUploading={isUploading} />
+
+      {/* Content */}
+      <div className="flex gap-4">
+        {/* Folder Tree */}
+        {assets && (
+          <div className="w-1/3 border border-black rounded-md p-2 max-h-[300px] overflow-y-auto">
+            <FolderTree
+              folder={assets}
+              selectedFolder={selectedFolder || assets.path}
+              onSelectFolder={setSelectedFolder}
+            />
+          </div>
+        )}
+
+        {/* Asset Grid */}
+        <div className="flex-1 border border-black rounded-md p-2 max-h-[300px] overflow-y-auto">
+          <AssetGrid
+            files={currentFiles}
+            selectedFiles={selectedFiles}
+            onSelect={handleSelect}
+            onDelete={handleDelete}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/templates/devtools/tabs/ComponentsTab/AddTabButton.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Button } from '@/components/ui';
+
+interface AddTabButtonProps {
+  onAdd: (folderName: string) => void;
+}
+
+export function AddTabButton({ onAdd }: AddTabButtonProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [folderName, setFolderName] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditing]);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && folderName.trim()) {
+      onAdd(folderName.trim());
+      setFolderName('');
+      setIsEditing(false);
+    } else if (e.key === 'Escape') {
+      setFolderName('');
+      setIsEditing(false);
+    }
+  };
+
+  if (isEditing) {
+    return (
+      <input
+        ref={inputRef}
+        type="text"
+        value={folderName}
+        onChange={(e) => setFolderName(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={() => {
+          // Only close if empty, otherwise keep editing
+          if (!folderName.trim()) {
+            setIsEditing(false);
+          }
+        }}
+        placeholder="Folder name..."
+        className="flex items-center justify-center px-4 py-2 font-joystix text-xs uppercase cursor-text select-none text-black transition-all duration-200 ease-out relative border border-black rounded-sm bg-warm-cloud focus:outline-none focus:ring-2 focus:ring-sun-yellow"
+        style={{ minWidth: '120px' }}
+      />
+    );
+  }
+
+  return (
+    <Button
+      variant="primary"
+      size="md"
+      iconOnly={true}
+      iconName="plus"
+      onClick={() => setIsEditing(true)}
+    />
+  );
+}
+

package/templates/devtools/tabs/ComponentsTab/ComponentList.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Input, Button } from '@/components/ui';
+import type { DiscoveredComponent } from '../../types';
+
+interface ComponentListProps {
+  components: DiscoveredComponent[];
+  folderName: string;
+}
+
+// Section component matching DesignSystemTab style
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-6">
+      <h3 className="font-joystix text-xs uppercase text-black mb-3 border-b border-black/20 pb-2">
+        {title}
+      </h3>
+      <div className="space-y-3">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// Props display component matching DesignSystemTab style
+function PropsDisplay({ props }: { props: string }) {
+  return (
+    <code className="font-mono text-xs text-black/60 bg-black/5 px-2 py-1 rounded-sm block mt-2">
+      {props}
+    </code>
+  );
+}
+
+// Component row display
+function ComponentRow({ component, folderName }: { component: DiscoveredComponent; folderName: string }) {
+  const [copied, setCopied] = useState(false);
+  const copiedTimerRef = useRef<NodeJS.Timeout>(undefined);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+    };
+  }, []);
+
+  const handleCopyCursorCommand = () => {
+    const propsList = component.props.length > 0
+      ? component.props
+          .map((prop) => {
+            const required = prop.required ? 'required' : 'optional';
+            const defaultValue = prop.defaultValue ? `, default: ${prop.defaultValue}` : '';
+            return `- ${prop.name}: ${prop.type} (${required}${defaultValue})`;
+          })
+          .join('\n')
+      : 'No props defined';
+
+    const command = `Create a preview section for the ${component.name} component located at ${component.path}.
+
+Props:
+${propsList}
+
+Add it to devtools/tabs/ComponentsTab/previews/${folderName}.tsx following the Section/Row/PropsDisplay pattern from DesignSystemTab.tsx.
+Include example usage for each variant/prop combination.
+If the preview file doesn't exist, create it with the necessary imports.`;
+
+    navigator.clipboard.writeText(command).then(() => {
+      setCopied(true);
+      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);
+      copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  const propsString = component.props.length > 0
+    ? component.props
+        .map((prop) => {
+          const optional = prop.required ? '' : '?';
+          const defaultValue = prop.defaultValue ? ` = ${prop.defaultValue}` : '';
+          return `${prop.name}${optional}: ${prop.type}${defaultValue}`;
+        })
+        .join(', ')
+    : 'No props';
+
+  return (
+    <div className="border border-black bg-warm-cloud -mt-px first:mt-0">
+      <div className="overflow-hidden transition-[height] duration-200 ease-out">
+        <div className="px-4 pb-4">
+          <div className="space-y-6">
+            <div className="mb-6">
+              <div className="flex items-center justify-between mb-3">
+                <h4 className="font-joystix text-xs uppercase text-black">{component.name}</h4>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  iconName={copied ? "checkmark-filled" : undefined}
+                  onClick={handleCopyCursorCommand}
+                >
+                  {copied ? 'Copied' : 'Copy Cursor Command'}
+                </Button>
+              </div>
+              <div className="space-y-2">
+                <div className="font-mondwest text-sm text-black/60 font-mono">
+                  {component.path}
+                </div>
+                {component.props.length > 0 && (
+                  <PropsDisplay props={propsString} />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ComponentList({ components, folderName }: ComponentListProps) {
+  const [search, setSearch] = useState('');
+
+  const filtered = components.filter((c) =>
+    c.name.toLowerCase().includes(search.toLowerCase()) ||
+    c.path.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Search */}
+      <Input
+        type="text"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        placeholder="Search components..."
+        fullWidth={true}
+        size="md"
+        iconName="search"
+      />
+
+      {/* Component List */}
+      <div className="space-y-0">
+        {filtered.length > 0 ? (
+          filtered.map((component) => (
+            <ComponentRow key={component.path} component={component} folderName={folderName} />
+          ))
+        ) : (
+          <div className="text-center py-8 text-black/60 font-mondwest text-base">
+            {search ? `No components match "${search}"` : 'No components found'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+