radtools 0.1.0

package/templates/components/ui/index.ts

@@ -0,0 +1,84 @@
+/**
+ * UI Component Library
+ *
+ * Centralized exports for all design system components.
+ * Import from '@/components/ui' for convenience.
+ */
+
+// ============================================================================
+// Core Components
+// ============================================================================
+
+export { Button } from './Button';
+export { Card, CardHeader, CardBody, CardFooter } from './Card';
+export { Tabs, TabList, TabTrigger, TabContent } from './Tabs';
+export { Input, TextArea, Label } from './Input';
+export { Badge } from './Badge';
+export { Divider } from './Divider';
+
+// ============================================================================
+// Form Components
+// ============================================================================
+
+export { Select } from './Select';
+export { Checkbox, Radio } from './Checkbox';
+export { Switch } from './Switch';
+export { Slider } from './Slider';
+
+// ============================================================================
+// Feedback Components
+// ============================================================================
+
+export { Progress, Spinner } from './Progress';
+export { Tooltip } from './Tooltip';
+export { Alert } from './Alert';
+export { ToastProvider, useToast } from './Toast';
+
+// ============================================================================
+// Navigation Components
+// ============================================================================
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
+export { Breadcrumbs } from './Breadcrumbs';
+
+// ============================================================================
+// Overlay Components
+// ============================================================================
+
+export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from './ContextMenu';
+export { HelpPanel } from './HelpPanel';
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogClose,
+} from './Dialog';
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from './Popover';
+export {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetBody,
+  SheetFooter,
+  SheetClose,
+} from './Sheet';
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from './DropdownMenu';

package/templates/devtools/DevToolsPanel.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import Draggable from 'react-draggable';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { useDevToolsStore } from './store';
+import type { Tab } from './types';
+
+// Import UI components
+import { Button } from '@/components/ui/Button';
+import { WindowTitleBar } from '@/components/Rad_os/WindowTitleBar';
+
+// Import actual tab components
+import { VariablesTab } from './tabs/VariablesTab';
+import { TypographyTab } from './tabs/TypographyTab';
+import { ComponentsTab } from './tabs/ComponentsTab';
+import { AssetsTab } from './tabs/AssetsTab';
+import { MockStatesTab } from './tabs/MockStatesTab';
+import { ContextualFooter } from './components/ContextualFooter';
+
+export function DevToolsPanel() {
+  // Store hooks must be first - all functions below depend on these values
+  const { 
+    activeTab, 
+    setActiveTab, 
+    panelPosition, 
+    setPanelPosition,
+    panelSize,
+    setPanelSize,
+    togglePanel,
+    isFullscreen,
+    toggleFullscreen,
+  } = useDevToolsStore();
+
+  const nodeRef = useRef<HTMLDivElement>(null);
+  const resizeHandleRef = useRef<HTMLDivElement>(null);
+
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  
+  // Footer state
+  const [componentSubTab, setComponentSubTab] = useState<string>('design-system');
+  const [componentSearchQuery, setComponentSearchQuery] = useState<string>('');
+  const [typographySearchQuery, setTypographySearchQuery] = useState<string>('');
+  const [componentTabs, setComponentTabs] = useState<Array<{ id: string; label: string }>>([]);
+
+  const handleDragStop = (_: unknown, data: { x: number; y: number }) => {
+    setPanelPosition({ x: data.x, y: data.y });
+  };
+
+  // Resize functionality
+  const handleResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!nodeRef.current) return;
+    
+    const rect = nodeRef.current.getBoundingClientRect();
+    setIsResizing(true);
+    setResizeStart({
+      x: e.clientX,
+      y: e.clientY,
+      width: rect.width,
+      height: rect.height,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!isResizing) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!nodeRef.current) return;
+
+      const deltaX = e.clientX - resizeStart.x;
+      const deltaY = e.clientY - resizeStart.y;
+
+      const minWidth = 300;
+      const minHeight = 200;
+      const maxWidth = window.innerWidth * 0.9;
+      const maxHeight = window.innerHeight * 0.9;
+
+      const newWidth = Math.min(Math.max(resizeStart.width + deltaX, minWidth), maxWidth);
+      const newHeight = Math.min(Math.max(resizeStart.height + deltaY, minHeight), maxHeight);
+
+      setPanelSize({ width: newWidth, height: newHeight });
+    };
+
+    const handleMouseUp = () => {
+      setIsResizing(false);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizing, resizeStart, setPanelSize]);
+
+  // Handle tab change from Tabs component
+  const handleTabChange = (value: string) => {
+    setActiveTab(value as Tab);
+  };
+
+  // Fullscreen styles
+  const panelStyles = isFullscreen
+    ? {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+      }
+    : {
+        top: 0,
+        left: 0,
+        width: `${panelSize.width}px`,
+        height: `${panelSize.height}px`,
+        minWidth: '300px',
+        minHeight: '200px',
+        maxWidth: '90vw',
+        maxHeight: '90vh',
+      };
+
+  return (
+    <Draggable
+      nodeRef={nodeRef}
+      handle="[data-drag-handle]"
+      position={isFullscreen ? { x: 0, y: 0 } : panelPosition}
+      onStop={handleDragStop}
+      bounds="parent"
+      disabled={isResizing || isFullscreen}
+    >
+      <div
+        ref={nodeRef}
+        className={`fixed z-[9999] overflow-hidden flex flex-col border ${
+          isFullscreen ? 'inset-0' : 'rounded-[8px] shadow-[4px_4px_0_0_var(--color-black)]'
+        }`}
+        style={{
+          ...panelStyles,
+          background: 'linear-gradient(0deg, rgba(252, 225, 132, 1) 0%, rgba(254, 248, 226, 1) 100%)',
+          borderStyle: 'solid',
+          borderWidth: '1px',
+          borderColor: 'var(--color-black)',
+        }}
+      >
+        {/* Header */}
+        <WindowTitleBar
+          title="RADTOOLS"
+          windowId="radtools"
+          onClose={togglePanel}
+          iconName="lightning"
+          showTitle={true}
+          showCopyButton={false}
+          showCloseButton={true}
+          showHelpButton={true}
+          showActionButton={false}
+          showFullscreenButton={true}
+          onFullscreen={toggleFullscreen}
+          helpTitle="How to Use RadTools"
+          helpContent={
+            <div className="space-y-4">
+              <div>
+                <h3 className="font-joystix text-sm uppercase mb-2">Getting Started</h3>
+                <p className="font-mondwest text-sm text-black/80">
+                  RadTools is a design system development tool that helps you manage components, typography, variables, and assets.
+                </p>
+              </div>
+              <div>
+                <h3 className="font-joystix text-sm uppercase mb-2">Features</h3>
+                <ul className="font-mondwest text-sm text-black/80 space-y-1 list-disc list-inside pl-0">
+                  <li>Components: Browse and inspect your UI components</li>
+                  <li>Typography: Manage font families and typography styles</li>
+                  <li>Variables: Edit design tokens and color variables</li>
+                  <li>Assets: Upload and organize images, icons, and other assets</li>
+                  <li>Mock States: Test components with different state configurations</li>
+                </ul>
+              </div>
+              <div>
+                <h3 className="font-joystix text-sm uppercase mb-2">Tips</h3>
+                <ul className="font-mondwest text-sm text-black/80 space-y-1 list-disc list-inside">
+                  <li>Drag the panel by the title bar to reposition it</li>
+                  <li>Use the fullscreen button for a larger workspace</li>
+                  <li>Click the close button to hide the panel</li>
+                </ul>
+              </div>
+            </div>
+          }
+        />
+
+        {/* Tab Content */}
+        <div className="flex-1 overflow-y-auto">
+          {activeTab === 'variables' && (
+            <div className="h-full pr-2 pl-2 pb-2 rounded">
+              <VariablesTab />
+            </div>
+          )}
+          {activeTab === 'typography' && (
+            <div className="h-full pr-2 pl-2 pb-2 rounded">
+              <TypographyTab searchQuery={typographySearchQuery} />
+            </div>
+          )}
+          {activeTab === 'components' && (
+            <ComponentsTab
+              activeSubTab={componentSubTab}
+              searchQuery={componentSearchQuery}
+              onTabsChange={setComponentTabs}
+            />
+          )}
+          {activeTab === 'assets' && (
+            <div className="h-full pr-2 pl-2 pb-2 rounded">
+              <AssetsTab />
+            </div>
+          )}
+          {activeTab === 'mockStates' && (
+            <div className="h-full pr-2 pl-2 pb-2 rounded">
+              <MockStatesTab />
+            </div>
+          )}
+        </div>
+
+        {/* Contextual Footer */}
+        <ContextualFooter
+          activeTab={activeTab}
+          onTabChange={handleTabChange}
+          componentSubTab={componentSubTab}
+          componentSearchQuery={componentSearchQuery}
+          onComponentSubTabChange={setComponentSubTab}
+          onComponentSearchChange={setComponentSearchQuery}
+          componentTabs={componentTabs}
+          onAddComponentFolder={async (folderName) => {
+            // Trigger folder creation via ComponentsTab's exposed handler
+            if ((window as any).__componentsTabAddFolder) {
+              (window as any).__componentsTabAddFolder(folderName);
+              // Switch to the new tab
+              setComponentSubTab(`folder-${folderName}`);
+            }
+          }}
+          typographySearchQuery={typographySearchQuery}
+          onTypographySearchChange={setTypographySearchQuery}
+        />
+
+        {/* Resize Handle (hidden in fullscreen) */}
+        {!isFullscreen && (
+          <div
+            ref={resizeHandleRef}
+            onMouseDown={handleResizeStart}
+            className="absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize z-10 flex items-center justify-center text-black"
+            style={{
+              fontFamily: '"PixelCode", monospace',
+              fontSize: '10px',
+              lineHeight: 1,
+            }}
+          >
+            ┘
+          </div>
+        )}
+      </div>
+    </Draggable>
+  );
+}

package/templates/devtools/DevToolsProvider.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { ReactNode, useEffect } from 'react';
+import { DevToolsPanel } from './DevToolsPanel';
+import { BreakpointIndicator } from './components/BreakpointIndicator';
+import { useDevToolsStore } from './store';
+import { ToastProvider } from '@/components/ui/Toast';
+
+interface DevToolsProviderProps {
+  children: ReactNode;
+}
+
+export function DevToolsProvider({ children }: DevToolsProviderProps) {
+  const { isOpen, togglePanel } = useDevToolsStore();
+
+  // Keyboard shortcut: Shift+Cmd+K (Mac) / Shift+Ctrl+K (Windows)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Toggle panel with Shift+Cmd+K or Shift+Ctrl+K
+      if (e.shiftKey && (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+        e.preventDefault();
+        togglePanel();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [togglePanel]);
+
+  // Production: render only children
+  if (process.env.NODE_ENV === 'production') {
+    return <>{children}</>;
+  }
+
+  return (
+    <ToastProvider>
+      {children}
+      {isOpen && <DevToolsPanel />}
+      <BreakpointIndicator />
+    </ToastProvider>
+  );
+}
+

package/templates/devtools/components/BreakpointIndicator.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+const BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+};
+
+export function BreakpointIndicator() {
+  const [width, setWidth] = useState(0);
+  const [breakpoint, setBreakpoint] = useState('');
+
+  useEffect(() => {
+    const updateWidth = () => {
+      const w = window.innerWidth;
+      setWidth(w);
+
+      if (w >= BREAKPOINTS['2xl']) setBreakpoint('2xl');
+      else if (w >= BREAKPOINTS.xl) setBreakpoint('xl');
+      else if (w >= BREAKPOINTS.lg) setBreakpoint('lg');
+      else if (w >= BREAKPOINTS.md) setBreakpoint('md');
+      else if (w >= BREAKPOINTS.sm) setBreakpoint('sm');
+      else setBreakpoint('xs');
+    };
+
+    updateWidth();
+    window.addEventListener('resize', updateWidth);
+    return () => window.removeEventListener('resize', updateWidth);
+  }, []);
+
+  // Don't render in production
+  if (process.env.NODE_ENV === 'production') return null;
+
+  // Don't render on server
+  if (width === 0) return null;
+
+  return (
+    <div className="fixed bottom-4 left-4 z-[9999] flex items-center gap-2 rounded-full bg-black px-3 py-1.5 font-mono text-xs text-cream shadow-lg">
+      <span className="font-bold uppercase">{breakpoint}</span>
+      <span className="opacity-60">·</span>
+      <span className="opacity-60">{width}px</span>
+    </div>
+  );
+}
+

package/templates/devtools/components/ColorPicker.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+interface ColorPickerProps {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+}
+
+export function ColorPicker({ value, onChange, label }: ColorPickerProps) {
+  return (
+    <div className="flex items-center gap-2">
+      {label && (
+        <label className="font-joystix text-xs uppercase text-black/60 min-w-[60px]">{label}</label>
+      )}
+      <div className="flex items-center gap-2 flex-1">
+        <input
+          type="color"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-8 h-8 rounded-sm border border-black cursor-pointer"
+        />
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="flex-1 px-2 py-1 font-mondwest text-base font-mono bg-warm-cloud border border-black rounded-sm text-black focus:outline-none focus:ring-2 focus:ring-tertiary"
+          placeholder="#000000"
+        />
+      </div>
+    </div>
+  );
+}
+

package/templates/devtools/components/ComponentsSecondaryNav.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { AddTabButton } from '../tabs/ComponentsTab/AddTabButton';
+
+interface ComponentsSecondaryNavProps {
+  activeSubTab: string;
+  onSubTabChange: (tab: string) => void;
+  tabs: Array<{ id: string; label: string }>;
+  onAddFolder: (folderName: string) => void;
+}
+
+export function ComponentsSecondaryNav({
+  activeSubTab,
+  onSubTabChange,
+  tabs,
+  onAddFolder,
+}: ComponentsSecondaryNavProps) {
+  return (
+    <div className="flex items-center gap-1 px-2 py-2 bg-warm-cloud border-t border-black overflow-x-auto">
+      {tabs.map((tab) => (
+        <button
+          key={tab.id}
+          type="button"
+          onClick={() => onSubTabChange(tab.id)}
+          className={`flex items-center justify-center px-4 py-2 font-joystix text-xs uppercase cursor-pointer select-none text-black transition-all duration-200 ease-out relative border border-black rounded-sm ${
+            activeSubTab === tab.id ? 'bg-sun-yellow' : 'bg-transparent hover:bg-black/5'
+          }`}
+        >
+          {tab.label}
+        </button>
+      ))}
+      <AddTabButton
+        onAdd={(folderName) => {
+          onAddFolder(folderName);
+          // Also trigger via ComponentsTab's handler if available
+          if ((window as any).__componentsTabAddFolder) {
+            (window as any).__componentsTabAddFolder(folderName);
+          }
+        }}
+      />
+    </div>
+  );
+}
+

package/templates/devtools/components/ContextualFooter.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import type { Tab } from '../types';
+import { SecondaryNavigation } from './SecondaryNavigation';
+import { PrimaryNavigationFooter } from './PrimaryNavigationFooter';
+
+interface ContextualFooterProps {
+  activeTab: Tab;
+  onTabChange: (tab: Tab) => void;
+  // Components tab props
+  componentSubTab?: string;
+  componentSearchQuery?: string;
+  onComponentSubTabChange?: (tab: string) => void;
+  onComponentSearchChange?: (query: string) => void;
+  componentTabs?: Array<{ id: string; label: string }>;
+  onAddComponentFolder?: (folderName: string) => void;
+  // Typography tab props
+  typographySearchQuery?: string;
+  onTypographySearchChange?: (query: string) => void;
+}
+
+export function ContextualFooter({
+  activeTab,
+  onTabChange,
+  componentSubTab,
+  componentSearchQuery,
+  onComponentSubTabChange,
+  onComponentSearchChange,
+  componentTabs,
+  onAddComponentFolder,
+  typographySearchQuery,
+  onTypographySearchChange,
+}: ContextualFooterProps) {
+  return (
+    <>
+      {/* Secondary Navigation (above footer) */}
+      <SecondaryNavigation
+        activeTab={activeTab}
+        componentSubTab={componentSubTab}
+        onComponentSubTabChange={onComponentSubTabChange}
+        componentTabs={componentTabs}
+        onAddComponentFolder={onAddComponentFolder}
+      />
+      {/* Primary Navigation Footer (always visible) */}
+      <PrimaryNavigationFooter
+        activeTab={activeTab}
+        onTabChange={onTabChange}
+        componentSearchQuery={componentSearchQuery}
+        onComponentSearchChange={onComponentSearchChange}
+        typographySearchQuery={typographySearchQuery}
+        onTypographySearchChange={onTypographySearchChange}
+      />
+    </>
+  );
+}
+

package/templates/devtools/components/DraggablePanel.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import Draggable, { DraggableEvent, DraggableData } from 'react-draggable';
+import { useRef, ReactNode } from 'react';
+
+interface DraggablePanelProps {
+  children: ReactNode;
+  position: { x: number; y: number };
+  onPositionChange: (position: { x: number; y: number }) => void;
+  className?: string;
+}
+
+export function DraggablePanel({
+  children,
+  position,
+  onPositionChange,
+  className = '',
+}: DraggablePanelProps) {
+  const nodeRef = useRef<HTMLDivElement>(null);
+
+  const handleDragStop = (_: DraggableEvent, data: DraggableData) => {
+    onPositionChange({ x: data.x, y: data.y });
+  };
+
+  return (
+    <Draggable
+      nodeRef={nodeRef}
+      handle=".drag-handle"
+      defaultPosition={position}
+      onStop={handleDragStop}
+      bounds="parent"
+    >
+      <div
+        ref={nodeRef}
+        className={`fixed z-[9999] ${className}`}
+        style={{ top: 0, left: 0 }}
+      >
+        {children}
+      </div>
+    </Draggable>
+  );
+}
+