radtools 0.1.0

package/templates/components/Rad_os/WindowTitleBar.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Icon } from '@/components/icons';
+import { Divider, Button, HelpPanel, Tooltip } from '@/components/ui';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface ActionButtonConfig {
+  /** Button text */
+  text: string;
+  /** Optional icon name (filename without .svg extension) */
+  iconName?: string;
+  /** Click handler (takes precedence over href) */
+  onClick?: () => void;
+  /** URL to navigate to */
+  href?: string;
+  /** Target for href navigation (e.g., '_blank') */
+  target?: string;
+}
+
+interface WindowTitleBarProps {
+  /** Window title text */
+  title: string;
+  /** Window ID for generating shareable links */
+  windowId: string;
+  /** Callback when close button is clicked */
+  onClose: () => void;
+  /** Additional className for styling */
+  className?: string;
+  /** Icon name (filename without .svg extension) to display before the title */
+  iconName?: string;
+  
+  // Visibility controls
+  /** Show the window title (default: true) */
+  showTitle?: boolean;
+  /** Show the copy link button (default: true) */
+  showCopyButton?: boolean;
+  /** Show the close button (default: true) */
+  showCloseButton?: boolean;
+  /** Show the help button (default: false) */
+  showHelpButton?: boolean;
+  /** Show the action button (default: false) */
+  showActionButton?: boolean;
+  /** Show the fullscreen button (default: false) */
+  showFullscreenButton?: boolean;
+  
+  // Help panel configuration
+  /** Help content to display in the help panel */
+  helpContent?: React.ReactNode;
+  /** Title for the help panel */
+  helpTitle?: string;
+  
+  // Action button configuration
+  /** Configuration for the action button */
+  actionButton?: ActionButtonConfig;
+  
+  // Fullscreen configuration
+  /** Callback when fullscreen button is clicked */
+  onFullscreen?: () => void;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Window title bar with configurable elements:
+ * - Title (window name)
+ * - Decorative divider line
+ * - Help button (opens contextual help panel)
+ * - Action button (customizable CTA - wallet connect, external link, etc.)
+ * - Fullscreen button
+ * - Copy link button
+ * - Close button
+ * 
+ * All elements have visibility controls and sensible defaults.
+ * 
+ * @example
+ * // Basic usage (title + copy + close)
+ * <WindowTitleBar 
+ *   title="My App" 
+ *   windowId="my-app" 
+ *   onClose={handleClose} 
+ * />
+ * 
+ * @example
+ * // With help panel
+ * <WindowTitleBar 
+ *   title="My App" 
+ *   windowId="my-app" 
+ *   onClose={handleClose}
+ *   showHelpButton
+ *   helpContent={<p>This is how to use the app...</p>}
+ * />
+ * 
+ * @example
+ * // With action button (external link)
+ * <WindowTitleBar 
+ *   title="My App" 
+ *   windowId="my-app" 
+ *   onClose={handleClose}
+ *   showActionButton
+ *   actionButton={{
+ *     text: "Visit Site",
+ *     href: "https://example.com",
+ *     target: "_blank"
+ *   }}
+ * />
+ * 
+ * @example
+ * // With wallet connect
+ * <WindowTitleBar 
+ *   title="My App" 
+ *   windowId="my-app" 
+ *   onClose={handleClose}
+ *   showActionButton
+ *   actionButton={{
+ *     text: "Connect Wallet",
+ *     onClick: connectWallet,
+ *     icon: <WalletIcon />
+ *   }}
+ * />
+ */
+export function WindowTitleBar({
+  title,
+  windowId,
+  onClose,
+  className = '',
+  iconName,
+  // Visibility controls with defaults
+  showTitle = true,
+  showCopyButton = true,
+  showCloseButton = true,
+  showHelpButton = false,
+  showActionButton = false,
+  showFullscreenButton = false,
+  // Help panel config
+  helpContent,
+  helpTitle = 'Help',
+  // Action button config
+  actionButton,
+  // Fullscreen config
+  onFullscreen,
+}: WindowTitleBarProps) {
+  const [copied, setCopied] = useState(false);
+  const [helpOpen, setHelpOpen] = useState(false);
+
+  // Copy link to clipboard
+  const handleCopyLink = async () => {
+    if (typeof window === 'undefined') return;
+    
+    const url = `${window.location.origin}${window.location.pathname}#${windowId}`;
+    
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Failed to copy link
+    }
+  };
+
+  // Handle action button click
+  const handleActionClick = () => {
+    if (!actionButton) return;
+    
+    if (actionButton.onClick) {
+      actionButton.onClick();
+    } else if (actionButton.href) {
+      window.open(actionButton.href, actionButton.target || '_self');
+    }
+  };
+
+  return (
+    <>
+      <div 
+        className={`
+          flex items-center gap-3 pl-4 pr-1 pt-[4px] pb-1 h-fit
+          cursor-move select-none
+          ${className}
+        `}
+        data-drag-handle
+      >
+        {/* Title */}
+        {showTitle && (
+          <div className="flex items-center gap-2">
+            {iconName && <Icon name={iconName} size={16} />}
+            <span className="font-joystix text-sm uppercase tracking-wide text-primary whitespace-nowrap">
+              {title}
+            </span>
+          </div>
+        )}
+
+        {/* Decorative Line */}
+        <div className="flex-1">
+          <Divider />
+        </div>
+
+        {/* All Buttons */}
+        <div className="flex items-center gap-1">
+          {/* Action Button */}
+          {showActionButton && actionButton && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleActionClick}
+              iconName={actionButton.iconName}
+              className="shrink-0"
+            >
+              {actionButton.text}
+            </Button>
+          )}
+
+          {/* Help Button */}
+          {showHelpButton && (
+            <Tooltip content="Help">
+              <Button
+                variant="ghost"
+                size="md"
+                iconOnly={true}
+                iconName="question"
+                onClick={() => setHelpOpen(true)}
+              />
+            </Tooltip>
+          )}
+
+          {/* Fullscreen Button */}
+          {showFullscreenButton && onFullscreen && (
+            <Tooltip content="Enter fullscreen">
+              <Button
+                variant="ghost"
+                size="md"
+                iconOnly={true}
+                iconName="expand"
+                onClick={onFullscreen}
+              />
+            </Tooltip>
+          )}
+
+          {/* Copy Link Button */}
+          {showCopyButton && (
+            <Tooltip content="Copy link">
+              <Button
+                variant="ghost"
+                size="md"
+                iconOnly={true}
+                iconName={copied ? "checkmark-filled" : "copy"}
+                onClick={handleCopyLink}
+                className={copied ? "text-green" : ""}
+              />
+            </Tooltip>
+          )}
+
+          {/* Close Button */}
+          {showCloseButton && (
+            <Tooltip content="Close">
+              <Button
+                variant="ghost"
+                size="md"
+                iconOnly={true}
+                iconName="close"
+                onClick={onClose}
+              />
+            </Tooltip>
+          )}
+        </div>
+      </div>
+
+      {/* Help Panel (renders as overlay within window) */}
+      {showHelpButton && (
+        <HelpPanel
+          isOpen={helpOpen}
+          onClose={() => setHelpOpen(false)}
+          title={helpTitle}
+        >
+          {helpContent || (
+            <p className="text-black/60 italic">
+              No help content available for this window.
+            </p>
+          )}
+        </HelpPanel>
+      )}
+    </>
+  );
+}
+
+export default WindowTitleBar;

package/templates/components/icons/Icon.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { useState, useEffect, memo } from 'react';
+
+interface IconProps {
+  /** Icon filename without .svg extension (e.g., "arrow-left") */
+  name: string;
+  /** Icon size in pixels (applies to both width and height) */
+  size?: number;
+  /** Additional CSS classes for styling (use text-* for color) */
+  className?: string;
+  /** Accessible label for screen readers */
+  'aria-label'?: string;
+}
+
+/**
+ * Runtime SVG icon loader with automatic currentColor support.
+ * 
+ * Icons are loaded from /assets/icons/{name}.svg and automatically
+ * processed to use currentColor for fills, inheriting the parent's
+ * text color.
+ * 
+ * @example
+ * ```tsx
+ * // Inherits parent text color
+ * <div className="text-blue-500">
+ *   <Icon name="arrow-left" size={24} />
+ * </div>
+ * 
+ * // Override color with className
+ * <Icon name="check" size={20} className="text-green-500" />
+ * ```
+ */
+function IconComponent({ 
+  name, 
+  size = 24, 
+  className = '',
+  'aria-label': ariaLabel,
+}: IconProps) {
+  const [svgContent, setSvgContent] = useState<string | null>(null);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const loadIcon = async () => {
+      try {
+        const response = await fetch(`/assets/icons/${name}.svg`);
+        
+        if (!response.ok) {
+          throw new Error(`Icon not found: ${name}`);
+        }
+
+        const svgText = await response.text();
+        
+        if (!mounted) return;
+
+        // Process SVG to use currentColor for theming
+        let processed = svgText;
+        
+        // Check if SVG uses CSS classes (like .st0 with fill: currentColor)
+        const usesCssClasses = processed.includes('<style>') && processed.includes('currentColor');
+        
+        if (!usesCssClasses) {
+          // Only process fill/stroke attributes if not using CSS classes
+          // Remove existing fill attributes (except none)
+          processed = processed.replace(/fill="(?!none)[^"]*"/g, 'fill="currentColor"');
+          // Remove existing stroke attributes (except none)  
+          processed = processed.replace(/stroke="(?!none)[^"]*"/g, 'stroke="currentColor"');
+          
+          // Add fill="currentColor" to root svg if no fill exists
+          if (!processed.includes('fill=')) {
+            processed = processed.replace(/<svg([^>]*)>/, `<svg$1 fill="currentColor">`);
+          }
+        }
+        
+        // Set dimensions (always do this, preserving viewBox)
+        // Parse the SVG tag more carefully to avoid breaking structure
+        const svgTagMatch = processed.match(/<svg([^>]*)>/);
+        if (svgTagMatch) {
+          let svgAttrs = svgTagMatch[1];
+          
+          // Extract and preserve viewBox (critical for CSS-based fills to work correctly)
+          const viewBoxMatch = svgAttrs.match(/viewBox="[^"]*"/);
+          const viewBox = viewBoxMatch ? viewBoxMatch[0] : null;
+          
+          // Remove existing width/height attributes
+          svgAttrs = svgAttrs.replace(/\s*width="[^"]*"/g, '');
+          svgAttrs = svgAttrs.replace(/\s*height="[^"]*"/g, '');
+          
+          // Clean up extra spaces
+          svgAttrs = svgAttrs.trim().replace(/\s+/g, ' ');
+          
+          // Build new attributes: preserve viewBox first, then add width/height
+          const newAttrs = [];
+          if (viewBox) {
+            newAttrs.push(viewBox);
+          }
+          newAttrs.push(`width="${size}"`, `height="${size}"`);
+          
+          // Add any remaining attributes
+          const remainingAttrs = svgAttrs
+            .replace(/viewBox="[^"]*"/g, '')
+            .trim();
+          if (remainingAttrs) {
+            newAttrs.push(remainingAttrs);
+          }
+          
+          // Reconstruct the SVG tag with proper spacing
+          processed = processed.replace(/<svg[^>]*>/, `<svg ${newAttrs.join(' ')}>`);
+        }
+
+        setSvgContent(processed);
+        setError(false);
+      } catch (e) {
+        if (mounted) {
+          setError(true);
+        }
+      }
+    };
+
+    loadIcon();
+
+    return () => {
+      mounted = false;
+    };
+  }, [name, size]);
+
+  // Mapping of icon names to PixelCode fallback characters
+  const ICON_FALLBACKS: Record<string, string> = {
+    'close': '×',           // Multiplication sign
+    'check': '✓',           // Check mark
+    'checkmark': '✓',
+    'checkmark-filled': '✓',
+    'arrow-left': '←',      // Left arrow
+    'arrow-right': '→',     // Right arrow
+    'chevron-down': '▼',    // Down triangle
+    'plus': '+',
+    'minus': '−',
+    'search': '○',          // Circle
+    'settings': '⚙',        // Gear symbol
+    'home': '⌂',            // Home symbol
+    'home-outline': '⌂',
+    'folder-closed': '▷',   // Right-pointing triangle
+    'folder-open': '▼',     // Down triangle
+    'file-blank': '□',      // Empty square
+    'file-image': '▣',      // Square with pattern
+    'file-written': '▤',    // Square with lines
+    'trash': '×',
+    'trash-open': '×',
+    'trash-full': '×',
+    'power': '⚡',          // Lightning
+    'power-thin': '⚡',
+    'locked': '🔒',         // Lock
+    'unlocked': '🔓',       // Unlock
+    'save': '💾',           // Floppy disk
+    'download': '↓',        // Down arrow
+    'copy': '⧉',           // Copy symbol
+    'refresh': '↻',         // Refresh arrow
+    'refresh-block': '↻',
+    'information': 'ℹ',     // Information
+    'information-circle': 'ℹ',
+    'warning': '⚠',         // Warning
+    'warning-triangle-filled': '⚠',
+    'warning-triangle-filled-2': '⚠',
+    'warning-triangle-lines': '⚠',
+    'waring-triangle-filled': '⚠',
+    'question': '?',
+    'question-block': '?',
+    'expand': '▶',
+    'hamburger': '☰',      // Hamburger menu
+    'avatar': '○',
+    'lightning': '⚡',
+    'not-allowed': '⊘',
+    'hourglass': '⏳',
+    'wrench': '🔧',
+  };
+
+  if (error || !svgContent) {
+    // Get fallback character, or use a default
+    const fallbackChar = ICON_FALLBACKS[name] || '?';
+    
+    return (
+      <span
+        className={`font-['PixelCode'] ${className}`}
+        style={{ 
+          display: 'inline-flex', 
+          width: size, 
+          height: size,
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontSize: size * 0.8, // Slightly smaller than container for padding
+          lineHeight: 1,
+        }}
+        role="img"
+        aria-label={ariaLabel}
+        aria-hidden={!ariaLabel}
+      >
+        {fallbackChar}
+      </span>
+    );
+  }
+
+  return (
+    <span
+      className={className}
+      style={{ 
+        display: 'inline-flex', 
+        width: size, 
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+      role="img"
+      aria-label={ariaLabel}
+      aria-hidden={!ariaLabel}
+      dangerouslySetInnerHTML={{ __html: svgContent }}
+    />
+  );
+}
+
+// Memoize to prevent unnecessary re-renders and re-fetches
+export const Icon = memo(IconComponent);
+

package/templates/components/icons/README.md

@@ -0,0 +1,85 @@
+# Icon System
+
+Runtime SVG loader with automatic `currentColor` support for easy theming.
+
+## How It Works
+
+Icons are loaded at runtime from `public/assets/icons/` and automatically processed to inherit the parent's text color.
+
+## Usage
+
+### 1. Add Icons
+
+Upload SVG files via the Assets panel to the `icons` folder, or manually add them to `public/assets/icons/`.
+
+### 2. Use Icons
+
+```tsx
+import { Icon } from '@/components/icons';
+
+function MyComponent() {
+  return (
+    <div className="text-blue-500">
+      {/* Inherits parent text color (blue) */}
+      <Icon name="arrow-left" size={24} />
+      
+      {/* Override color with className */}
+      <Icon name="check" size={20} className="text-green-500" />
+      
+      {/* With accessibility label */}
+      <Icon name="close" size={16} aria-label="Close dialog" />
+    </div>
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | required | Icon filename without `.svg` extension |
+| `size` | `number` | `24` | Icon size in pixels (width & height) |
+| `className` | `string` | `''` | CSS classes for styling (use `text-*` for color) |
+| `aria-label` | `string` | - | Accessible label for screen readers |
+
+## Icon Naming
+
+Use the filename without the `.svg` extension:
+- `arrow-left.svg` → `<Icon name="arrow-left" />`
+- `user-profile.svg` → `<Icon name="user-profile" />`
+- `check.svg` → `<Icon name="check" />`
+
+## Color Inheritance
+
+Icons automatically use `currentColor`, inheriting the parent's text color:
+
+```tsx
+// Icon will be blue
+<div className="text-blue-500">
+  <Icon name="star" />
+</div>
+
+// Icon will be red
+<span className="text-red-500">
+  <Icon name="heart" />
+</span>
+```
+
+## SVG Optimization Tips
+
+For best results, optimize SVGs before uploading:
+
+1. ✅ Use `fill="currentColor"` or no fill attribute
+2. ✅ Remove hardcoded colors like `fill="#000000"`
+3. ✅ Keep the `viewBox` attribute
+4. ✅ Remove `width` and `height` attributes (the component handles sizing)
+
+The loader automatically converts fills to `currentColor`, but pre-optimized SVGs load faster.
+
+## Benefits
+
+- **Zero build config** — Works with Turbopack out of the box
+- **Instant updates** — Add icons and use them immediately
+- **Automatic theming** — Icons inherit text color
+- **Memoized** — Prevents unnecessary re-renders
+- **Accessible** — Supports aria-label for screen readers

package/templates/components/icons/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Icon System - Runtime SVG loader
+ * 
+ * Icons are loaded at runtime from public/assets/icons/ and automatically
+ * processed to use currentColor for easy theming.
+ * 
+ * Usage:
+ *   import { Icon } from '@/components/icons';
+ *   
+ *   <Icon name="arrow-left" size={24} className="text-blue-500" />
+ * 
+ * To add new icons:
+ *   1. Upload SVG files via the Assets panel to the icons folder
+ *   2. Use them immediately with <Icon name="filename-without-extension" />
+ */
+
+export { Icon } from './Icon';
+
+// Re-export for convenience
+export type { } from './Icon';