radtools 0.1.0 → 0.1.1

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "radtools",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Visual dev tools for Next.js + Tailwind v4 projects",
-  "keywords": ["nextjs", "tailwind", "devtools", "design-system", "visual-editor"],
+  "keywords": [
+    "nextjs",
+    "tailwind",
+    "devtools",
+    "design-system",
+    "visual-editor"
+  ],
   "author": "kemos4be",
   "license": "MIT",
   "repository": {

package/templates/components/icons/Icon.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { useState, useEffect, memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 interface IconProps {
-  /** Icon filename without .svg extension (e.g., "arrow-left") */
+  /** Icon name (filename without .svg extension) */
   name: string;
   /** Icon size in pixels (applies to both width and height) */
   size?: number;
@@ -14,23 +14,22 @@ interface IconProps {
 }
 
 /**
- * Runtime SVG icon loader with automatic currentColor support.
+ * Icon component using SVG files from /assets/icons.
  * 
- * Icons are loaded from /assets/icons/{name}.svg and automatically
- * processed to use currentColor for fills, inheriting the parent's
- * text color.
+ * Icons automatically use currentColor, inheriting the parent's text color.
  * 
  * @example
  * ```tsx
  * // Inherits parent text color
  * <div className="text-blue-500">
- *   <Icon name="arrow-left" size={24} />
+ *   <Icon name="copy" size={24} />
  * </div>
  * 
  * // Override color with className
- * <Icon name="check" size={20} className="text-green-500" />
+ * <Icon name="checkmark" size={20} className="text-green-500" />
  * ```
  */
+
 function IconComponent({ 
   name, 
   size = 24, 
@@ -38,187 +37,56 @@ function IconComponent({
   'aria-label': ariaLabel,
 }: IconProps) {
   const [svgContent, setSvgContent] = useState<string | null>(null);
-  const [error, setError] = useState(false);
+  const iconPath = `/assets/icons/${name}.svg`;
 
   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': '🔧',
-  };
+    fetch(iconPath)
+      .then((res) => res.text())
+      .then((text) => {
+        // Inject width and height into SVG for proper scaling
+        const svgWithSize = text.replace(
+          /<svg([^>]*)>/,
+          `<svg$1 width="${size}" height="${size}">`
+        );
+        setSvgContent(svgWithSize);
+      })
+      .catch((err) => {
+        console.error(`Failed to load icon: ${name}`, err);
+      });
+  }, [name, iconPath, size]);
 
-  if (error || !svgContent) {
-    // Get fallback character, or use a default
-    const fallbackChar = ICON_FALLBACKS[name] || '?';
-    
+  if (!svgContent) {
     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"
+        className={className}
         aria-label={ariaLabel}
         aria-hidden={!ariaLabel}
-      >
-        {fallbackChar}
-      </span>
+        style={{
+          width: size,
+          height: size,
+          display: 'inline-block',
+        }}
+      />
     );
   }
 
   return (
     <span
       className={className}
-      style={{ 
-        display: 'inline-flex', 
-        width: size, 
-        height: size,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-      role="img"
       aria-label={ariaLabel}
       aria-hidden={!ariaLabel}
+      style={{
+        width: size,
+        height: size,
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        lineHeight: 0,
+      }}
       dangerouslySetInnerHTML={{ __html: svgContent }}
     />
   );
 }
 
-// Memoize to prevent unnecessary re-renders and re-fetches
+// Memoize to prevent unnecessary re-renders
 export const Icon = memo(IconComponent);
 

package/templates/components/icons.tsx

@@ -29,125 +29,27 @@ interface IconProps {
 // ============================================================================
 
 export function CloseIcon({ className = '', size = 10 }: IconProps) {
-  return (
-    <svg 
-      width={size} 
-      height={size} 
-      viewBox="0 0 10 11" 
-      fill="none" 
-      className={className}
-    >
-      <path 
-        fillRule="evenodd" 
-        clipRule="evenodd" 
-        d="M1.11111 0.5H0V1.61111H1.11111V2.72222H2.22222V3.83333H3.33333V4.94444H4.44444V6.05556H3.33333V7.16667H2.22222V8.27778H1.11111V9.38889H0V10.5H1.11111H2.22222V9.38889H3.33333V8.27778H4.44444V7.16667H5.55556V8.27778H6.66667V9.38889H7.77778V10.5H8.88889H10V9.38889H8.88889V8.27778H7.77778V7.16667H6.66667V6.05556H5.55556V4.94444H6.66667V3.83333H7.77778V2.72222H8.88889V1.61111H10V0.5H8.88889H7.77778V1.61111H6.66667V2.72222H5.55556V3.83333H4.44444V2.72222H3.33333V1.61111H2.22222V0.5H1.11111Z" 
-        fill="currentColor"
-      />
-    </svg>
-  );
+  return <Icon name="close" size={typeof size === 'number' ? size : parseInt(String(size))} className={className} />;
 }
 
 export function CopyIcon({ className = '', size = 18 }: IconProps) {
-  return (
-    <svg 
-      width={size} 
-      height={size} 
-      viewBox="0 0 28 28" 
-      fill="none" 
-      className={className}
-    >
-      <path 
-        fillRule="evenodd" 
-        clipRule="evenodd" 
-        d="M8.71111 0H28V19.2889H19.2889V28H0V8.71111H8.71111V0ZM11 8.71111H19.2889V17H26V2.5H11V8.71111ZM17 11.5H2.5V25.5H17V11.5Z" 
-        fill="currentColor"
-      />
-    </svg>
-  );
+  return <Icon name="copy" size={typeof size === 'number' ? size : parseInt(String(size))} className={className} />;
 }
 
 export function CopiedIcon({ className = '', size = 18 }: IconProps) {
-  return (
-    <svg 
-      width={size} 
-      height={typeof size === 'number' ? size * (20 / 26) : size} 
-      viewBox="0 0 26 20" 
-      fill="none" 
-      className={className}
-    >
-      <path 
-        d="M11.4187 11.4375H8.56875V8.5875H5.7V5.71875H2.85V8.5875H0V11.4375H2.85V14.2875H5.7V17.1563H8.56875V20.0062H11.4187V17.1563H14.2875V14.2875H17.1375V11.4375H19.9875V8.5875H22.8562V5.71875H25.7062V2.86875H22.8562V0H19.9875V2.86875H17.1375V5.71875H14.2875V8.5875H11.4187V11.4375Z" 
-        fill="currentColor"
-      />
-    </svg>
-  );
+  return <Icon name="checkmark-filled" size={typeof size === 'number' ? size : parseInt(String(size))} className={className} />;
 }
 
 export function HelpIcon({ className = '', size = 16 }: IconProps) {
-  return (
-    <svg 
-      width={size} 
-      height={size} 
-      viewBox="0 0 16 16" 
-      fill="none" 
-      className={className}
-    >
-      {/* Outer circle */}
-      <path d="M5 0H11V2H5V0Z" fill="currentColor" />
-      <path d="M3 2H5V4H3V2Z" fill="currentColor" />
-      <path d="M11 2H13V4H11V2Z" fill="currentColor" />
-      <path d="M2 4H4V6H2V4Z" fill="currentColor" />
-      <path d="M12 4H14V6H12V4Z" fill="currentColor" />
-      <path d="M0 5H2V11H0V5Z" fill="currentColor" />
-      <path d="M14 5H16V11H14V5Z" fill="currentColor" />
-      <path d="M2 10H4V12H2V10Z" fill="currentColor" />
-      <path d="M12 10H14V12H12V10Z" fill="currentColor" />
-      <path d="M3 12H5V14H3V12Z" fill="currentColor" />
-      <path d="M11 12H13V14H11V12Z" fill="currentColor" />
-      <path d="M5 14H11V16H5V14Z" fill="currentColor" />
-      {/* Question mark */}
-      <path d="M6 4H10V5H6V4Z" fill="currentColor" />
-      <path d="M10 5H11V7H10V5Z" fill="currentColor" />
-      <path d="M8 7H10V8H8V7Z" fill="currentColor" />
-      <path d="M7 8H9V10H7V8Z" fill="currentColor" />
-      <path d="M7 11H9V13H7V11Z" fill="currentColor" />
-    </svg>
-  );
+  return <Icon name="question" size={typeof size === 'number' ? size : parseInt(String(size))} className={className} />;
 }
 
 export function ComponentsIcon({ className = '', size = 16 }: IconProps) {
-  return (
-    <svg 
-      width={size} 
-      height={size} 
-      viewBox="0 0 24 24" 
-      fill="currentColor" 
-      className={className}
-    >
-      {/* 2x2 grid of squares representing components */}
-      <rect x="2" y="2" width="9" height="9" />
-      <rect x="13" y="2" width="9" height="9" />
-      <rect x="2" y="13" width="9" height="9" />
-      <rect x="13" y="13" width="9" height="9" />
-    </svg>
-  );
+  return <Icon name="wrench" size={typeof size === 'number' ? size : parseInt(String(size))} className={className} />;
 }
 
 export function ChevronIcon({ className = '', size = 8 }: IconProps) {
-  return (
-    <svg 
-      width={size} 
-      height={size} 
-      viewBox="0 0 8 10" 
-      fill="none" 
-      className={className}
-    >
-      <path 
-        d="M7.21826 5.64286L5.91799 5.64286L5.91799 6.92857L4.64346 6.92857L4.64346 8.21429L3.35605 8.21429L3.35605 9.5L0.781248 9.5L0.781249 8.21429L2.06865 8.21429L2.06865 6.92857L3.35605 6.92857L3.35605 5.64286L4.64346 5.64286L4.64346 4.35714L3.35605 4.35714L3.35605 3.07143L2.06865 3.07143L2.06865 1.78572L0.78125 1.78571L0.78125 0.5L3.35606 0.5L3.35606 1.78572L4.64346 1.78572L4.64346 3.07143L5.91799 3.07143L5.91799 4.35714L7.21826 4.35714L7.21826 5.64286Z" 
-        fill="currentColor"
-      />
-    </svg>
-  );
+  return <Icon name="chevron-down" size={typeof size === 'number' ? size : parseInt(String(size))} className={className} />;
 }
 
 export default {

package/templates/devtools/store/index.ts

@@ -1,26 +1,13 @@
 import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
+import { PanelSlice, createPanelSlice } from './slices/panelSlice';
 import { VariablesSlice, createVariablesSlice } from './slices/variablesSlice';
 import { TypographySlice, createTypographySlice } from './slices/typographySlice';
 import { ComponentsSlice, createComponentsSlice } from './slices/componentsSlice';
 import { AssetsSlice, createAssetsSlice } from './slices/assetsSlice';
 import { MockStatesSlice, createMockStatesSlice } from './slices/mockStatesSlice';
-import { PanelSlice, createPanelSlice } from './slices/panelSlice';
-import type { Tab } from '../types';
-
-interface PanelState {
-  isOpen: boolean;
-  activeTab: Tab;
-  panelPosition: { x: number; y: number };
-  panelSize: { width: number; height: number };
-  togglePanel: () => void;
-  setActiveTab: (tab: Tab) => void;
-  setPanelPosition: (position: { x: number; y: number }) => void;
-  setPanelSize: (size: { width: number; height: number }) => void;
-}
 
-type DevToolsState = PanelState & 
-  PanelSlice &
+type DevToolsState = PanelSlice &
   VariablesSlice & 
   TypographySlice &
   ComponentsSlice & 
@@ -31,17 +18,6 @@ export const useDevToolsStore = create<DevToolsState>()(
   devtools(
     persist(
       (set, get, api) => ({
-        // Panel state
-        isOpen: false,
-        activeTab: 'variables' as Tab,
-        panelPosition: { x: 20, y: 20 },
-        panelSize: { width: 420, height: 600 },
-        togglePanel: () => set((state) => ({ isOpen: !state.isOpen })),
-        setActiveTab: (tab) => set({ activeTab: tab }),
-        setPanelPosition: (position) => set({ panelPosition: position }),
-        setPanelSize: (size) => set({ panelSize: size }),
-
-        // Slices
         ...createPanelSlice(set, get, api),
         ...createVariablesSlice(set, get, api),
         ...createTypographySlice(set, get, api),
@@ -52,7 +28,6 @@ export const useDevToolsStore = create<DevToolsState>()(
       {
         name: 'devtools-storage',
         partialize: (state) => ({
-          // Only persist these fields
           panelPosition: state.panelPosition,
           panelSize: state.panelSize,
           activeTab: state.activeTab,
@@ -63,4 +38,3 @@ export const useDevToolsStore = create<DevToolsState>()(
     { name: 'RadTools DevTools' }
   )
 );
-

package/templates/devtools/store/slices/componentsSlice.ts

@@ -14,19 +14,8 @@ export interface ComponentsSlice {
   refreshComponents: () => Promise<void>;
 }
 
-export const createComponentsSlice: StateCreator<ComponentsSlice, [], [], ComponentsSlice> = (set) => ({
-  components: [],
-  isLoading: false,
-  lastScanned: null,
-
-  setComponents: (components) => set({ 
-    components, 
-    lastScanned: new Date().toISOString() 
-  }),
-  
-  setIsLoading: (isLoading) => set({ isLoading }),
-
-  scanComponents: async () => {
+export const createComponentsSlice: StateCreator<ComponentsSlice, [], [], ComponentsSlice> = (set, get) => {
+  const scan = async () => {
     set({ isLoading: true });
     try {
       const res = await fetch('/api/devtools/components');
@@ -36,24 +25,23 @@ export const createComponentsSlice: StateCreator<ComponentsSlice, [], [], Compon
         lastScanned: new Date().toISOString(),
         isLoading: false 
       });
-    } catch (error) {
+    } catch {
       set({ isLoading: false });
     }
-  },
+  };
 
-  refreshComponents: async () => {
-    set({ isLoading: true });
-    try {
-      const res = await fetch('/api/devtools/components');
-      const data = await res.json();
-      set({ 
-        components: data.components || [], 
-        lastScanned: new Date().toISOString(),
-        isLoading: false 
-      });
-    } catch (error) {
-      set({ isLoading: false });
-    }
-  },
-});
+  return {
+    components: [],
+    isLoading: false,
+    lastScanned: null,
 
+    setComponents: (components) => set({ 
+      components, 
+      lastScanned: new Date().toISOString() 
+    }),
+    
+    setIsLoading: (isLoading) => set({ isLoading }),
+    scanComponents: scan,
+    refreshComponents: scan,
+  };
+};

package/templates/devtools/store/slices/panelSlice.ts

@@ -1,17 +1,34 @@
 import { StateCreator } from 'zustand';
+import type { Tab } from '../../types';
 
 export interface PanelSlice {
-  // Fullscreen state (NOT persisted)
+  // Panel state
+  isOpen: boolean;
+  activeTab: Tab;
+  panelPosition: { x: number; y: number };
+  panelSize: { width: number; height: number };
   isFullscreen: boolean;
+  
+  // Actions
+  togglePanel: () => void;
+  setActiveTab: (tab: Tab) => void;
+  setPanelPosition: (position: { x: number; y: number }) => void;
+  setPanelSize: (size: { width: number; height: number }) => void;
   toggleFullscreen: () => void;
   setFullscreen: (value: boolean) => void;
 }
 
 export const createPanelSlice: StateCreator<PanelSlice, [], [], PanelSlice> = (set) => ({
+  isOpen: false,
+  activeTab: 'variables' as Tab,
+  panelPosition: { x: 20, y: 20 },
+  panelSize: { width: 420, height: 600 },
   isFullscreen: false,
   
+  togglePanel: () => set((state) => ({ isOpen: !state.isOpen })),
+  setActiveTab: (tab) => set({ activeTab: tab }),
+  setPanelPosition: (position) => set({ panelPosition: position }),
+  setPanelSize: (size) => set({ panelSize: size }),
   toggleFullscreen: () => set((state) => ({ isFullscreen: !state.isFullscreen })),
-  
   setFullscreen: (value) => set({ isFullscreen: value }),
 });
-