radtools 0.1.0

package/templates/devtools/tabs/VariablesTab/ColorModeSelector.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useDevToolsStore } from '../../store';
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/Button';
+import { useToast } from '@/components/ui/Toast';
+
+// Available semantic tokens that can be overridden in color modes
+const OVERRIDABLE_TOKENS = [
+  { id: 'primary', label: 'Primary' },
+  { id: 'secondary', label: 'Secondary' },
+  { id: 'tertiary', label: 'Tertiary' },
+  { id: 'alternate', label: 'Alternate' },
+  { id: 'heading', label: 'Heading' },
+  { id: 'body', label: 'Body' },
+  { id: 'caption', label: 'Caption' },
+  { id: 'border', label: 'Border' },
+  { id: 'muted', label: 'Muted' },
+];
+
+export function ColorModeSelector() {
+  const { colorModes, activeColorMode, setActiveColorMode, addColorMode, deleteColorMode, baseColors } = useDevToolsStore();
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newModeName, setNewModeName] = useState('');
+  const [overrides, setOverrides] = useState<Record<string, string>>({});
+  const { addToast } = useToast();
+
+  // Apply color mode to document
+  useEffect(() => {
+    const html = document.documentElement;
+    
+    // Remove all color mode classes
+    colorModes.forEach((mode) => {
+      html.classList.remove(mode.name);
+    });
+    
+    // Add active color mode class
+    if (activeColorMode) {
+      const activeMode = colorModes.find((m) => m.id === activeColorMode);
+      if (activeMode) {
+        html.classList.add(activeMode.name);
+      }
+    }
+  }, [activeColorMode, colorModes]);
+
+  const handleAddOverride = (token: string, colorId: string) => {
+    if (colorId) {
+      setOverrides({ ...overrides, [token]: colorId });
+    } else {
+      const { [token]: _, ...rest } = overrides;
+      setOverrides(rest);
+    }
+  };
+
+  const handleCreateColorMode = () => {
+    if (!newModeName.trim()) {
+      addToast({
+        title: 'Missing name',
+        description: 'Please enter a mode name',
+        variant: 'warning',
+      });
+      return;
+    }
+    if (Object.keys(overrides).length === 0) {
+      addToast({
+        title: 'No overrides',
+        description: 'Please add at least one override',
+        variant: 'warning',
+      });
+      return;
+    }
+
+    // Convert color IDs to CSS variable references
+    const cssOverrides: Record<string, string> = {};
+    for (const [token, colorId] of Object.entries(overrides)) {
+      const color = baseColors.find(c => c.id === colorId);
+      if (color) {
+        // Store as reference format: "neutral-darkest" or "sun-yellow"
+        const varName = color.category === 'neutral' ? `neutral-${color.name}` : color.name;
+        cssOverrides[token] = varName;
+      }
+    }
+
+    addColorMode({
+      name: newModeName.toLowerCase().replace(/\s+/g, '-'),
+      className: `.${newModeName.toLowerCase().replace(/\s+/g, '-')}`,
+      overrides: cssOverrides,
+    });
+
+    // Reset form
+    setNewModeName('');
+    setOverrides({});
+    setShowAddForm(false);
+  };
+
+  const handleDeleteColorMode = (id: string) => {
+    if (activeColorMode === id) {
+      setActiveColorMode(null);
+    }
+    deleteColorMode(id);
+  };
+
+  // Get all base colors for the dropdown
+  const allColors = [...baseColors.filter(c => c.category === 'brand'), ...baseColors.filter(c => c.category === 'neutral')];
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3>Color Mode</h3>
+      </div>
+      
+      <div className="flex flex-wrap gap-2">
+        <Button
+          variant={activeColorMode === null ? 'primary' : 'ghost'}
+          size="md"
+          onClick={() => setActiveColorMode(null)}
+          className={activeColorMode === null ? 'border-2' : ''}
+        >
+          Default
+        </Button>
+        <Button
+          variant="outline"
+          size="md"
+          iconName={showAddForm ? "close" : undefined}
+          onClick={() => setShowAddForm(!showAddForm)}
+        >
+          {showAddForm ? 'Cancel' : '+ Add Mode'}
+        </Button>
+        
+        {colorModes.map((mode) => (
+          <div key={mode.id} className="flex items-center gap-1">
+            <Button
+              variant={activeColorMode === mode.id ? 'primary' : 'ghost'}
+              size="md"
+              onClick={() => setActiveColorMode(mode.id)}
+              className={activeColorMode === mode.id ? 'border-2' : ''}
+            >
+              {mode.name}
+            </Button>
+            <Button
+              variant="ghost"
+              size="md"
+              iconOnly={true}
+              iconName="close"
+              onClick={() => handleDeleteColorMode(mode.id)}
+              className="text-error-red hover:bg-error-red/10 active:bg-error-red/20"
+              title="Delete color mode"
+            />
+          </div>
+        ))}
+      </div>
+
+      {/* Add Color Mode Form */}
+      {showAddForm && (
+        <div className="p-3 bg-black/10 rounded-md space-y-3">
+          <h4>Create Color Mode</h4>
+          
+          <div>
+            <label className="block font-mondwest text-sm text-black/60 mb-1">Mode Name</label>
+            <input
+              type="text"
+              value={newModeName}
+              onChange={(e) => setNewModeName(e.target.value)}
+              placeholder="e.g., dark"
+              className="w-full px-2 py-1.5 font-mondwest text-base bg-warm-cloud border border-black rounded-sm text-black"
+            />
+          </div>
+
+          <div>
+            <label className="block font-mondwest text-sm text-black/60 mb-2">Token Overrides</label>
+            <div className="space-y-2">
+              {OVERRIDABLE_TOKENS.map((token) => (
+                <div key={token.id} className="flex items-center gap-2">
+                  <span className="w-24 font-mondwest text-sm text-black">{token.label}</span>
+                  <select
+                    value={overrides[token.id] || ''}
+                    onChange={(e) => handleAddOverride(token.id, e.target.value)}
+                    className="flex-1 px-2 py-1 font-mondwest text-sm bg-warm-cloud border border-black rounded-sm text-black"
+                  >
+                    <option value="">— No override —</option>
+                    <optgroup label="Brand Colors">
+                      {allColors.filter(c => c.category === 'brand').map((color) => (
+                        <option key={color.id} value={color.id}>
+                          {color.displayName}
+                        </option>
+                      ))}
+                    </optgroup>
+                    <optgroup label="Neutral Colors">
+                      {allColors.filter(c => c.category === 'neutral').map((color) => (
+                        <option key={color.id} value={color.id}>
+                          {color.displayName}
+                        </option>
+                      ))}
+                    </optgroup>
+                  </select>
+                  {overrides[token.id] && (
+                    <div
+                      className="w-6 h-6 rounded-sm border border-black"
+                      style={{ backgroundColor: baseColors.find(c => c.id === overrides[token.id])?.value }}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Button
+            variant="secondary"
+            size="md"
+            onClick={handleCreateColorMode}
+          >
+            Create Mode
+          </Button>
+        </div>
+      )}
+
+      {/* Active Overrides Display */}
+      {activeColorMode && (
+        <div className="p-3 bg-black/10 rounded-md">
+          <h4 className="mb-2">Active Overrides</h4>
+          <div className="space-y-1">
+            {Object.entries(colorModes.find((m) => m.id === activeColorMode)?.overrides || {}).map(([token, ref]) => (
+              <div key={token} className="flex items-center gap-2 font-mondwest text-base">
+                <span className="text-black font-mono">{token}</span>
+                <span className="text-black/60">→</span>
+                <span className="text-black/60 font-mono">{ref}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { useDevToolsStore } from '../../store';
+import { BaseColorEditor } from './BaseColorEditor';
+import { ColorModeSelector } from './ColorModeSelector';
+import { BorderRadiusEditor } from './BorderRadiusEditor';
+import { Button } from '@/components/ui/Button';
+import { Divider } from '@/components/ui/Divider';
+
+export function VariablesTab() {
+  const { loadFromCSS, syncToCSS, baseColors } = useDevToolsStore();
+  const [isSaving, setIsSaving] = 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);
+    };
+  }, []);
+
+  // Load CSS on mount to sync with actual file
+  useEffect(() => {
+    loadFromCSS();
+  }, [loadFromCSS]);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setMessage(null);
+    try {
+      await syncToCSS();
+      setMessage({ type: 'success', text: 'Saved to globals.css!' });
+    } catch {
+      setMessage({ type: 'error', text: 'Failed to save. Check console.' });
+    } finally {
+      setIsSaving(false);
+      if (messageTimerRef.current) clearTimeout(messageTimerRef.current);
+      messageTimerRef.current = setTimeout(() => setMessage(null), 3000);
+    }
+  };
+
+  const handleReload = async () => {
+    await loadFromCSS();
+    setMessage({ type: 'success', text: 'Reloaded from CSS!' });
+    if (messageTimerRef.current) clearTimeout(messageTimerRef.current);
+    messageTimerRef.current = setTimeout(() => setMessage(null), 3000);
+  };
+
+  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 Actions */}
+      <div className="flex items-center justify-between">
+        <h2>Design Tokens</h2>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="md"
+            iconName="refresh"
+            onClick={handleReload}
+          >
+            Reload
+          </Button>
+          <Button
+            variant="secondary"
+            size="md"
+            iconName="save"
+            onClick={handleSave}
+            disabled={isSaving}
+          >
+            {isSaving ? 'Saving...' : 'Save to CSS'}
+          </Button>
+        </div>
+      </div>
+
+      {/* Status Message */}
+      {message && (
+        <div
+          className={`px-3 py-2 font-mondwest text-base rounded-sm ${
+            message.type === 'success'
+              ? 'bg-green text-black'
+              : 'bg-error-red text-warm-cloud'
+          }`}
+        >
+          {message.text}
+        </div>
+      )}
+
+      {/* Editors */}
+      <div className="space-y-4" data-edit-scope="theme-variables">
+        <ColorModeSelector />
+        <Divider />
+        <BaseColorEditor />
+        <Divider />
+        <BorderRadiusEditor />
+      </div>
+    </div>
+  );
+}

package/templates/devtools/types/index.ts

@@ -0,0 +1,99 @@
+// Design Token Types
+
+// Base Color (brand or neutral primitive)
+export interface BaseColor {
+  id: string;
+  name: string;        // e.g., "sun-yellow", "lightest"
+  displayName: string; // e.g., "Sun Yellow", "Lightest"
+  value: string;       // e.g., "#FCE184"
+  category: 'brand' | 'neutral';
+}
+
+// Legacy alias for backwards compatibility
+export type BrandColor = BaseColor;
+
+export interface ColorMode {
+  id: string;
+  name: string;        // e.g., "dark"
+  className: string;   // e.g., ".dark"
+  overrides: Record<string, string>;  // token name -> brand color reference
+}
+
+// Component Discovery Types
+export interface DiscoveredComponent {
+  name: string;
+  path: string;
+  props: PropDefinition[];
+}
+
+export interface PropDefinition {
+  name: string;
+  type: string;
+  required: boolean;
+  defaultValue?: string;
+}
+
+// Asset Types
+export interface AssetFile {
+  name: string;
+  path: string;
+  type: 'image' | 'video' | 'other';
+  size: number;
+  dimensions?: { width: number; height: number };
+}
+
+export interface AssetFolder {
+  name: string;
+  path: string;
+  children: (AssetFolder | AssetFile)[];
+}
+
+// Mock State Types
+export interface MockState {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  values: Record<string, unknown>;
+  active: boolean;
+}
+
+// Tab Types
+export type Tab = 'variables' | 'typography' | 'components' | 'assets' | 'mockStates';
+
+// Typography Types
+
+// Font file within a font definition
+export interface FontFile {
+  id: string;
+  weight: number;            // 400, 700, etc.
+  style: string;             // "normal", "italic"
+  format: 'woff2' | 'woff' | 'ttf' | 'otf';
+  path: string;              // "/fonts/Mondwest-Regular.woff2"
+}
+
+// Font Definition
+export interface FontDefinition {
+  id: string;
+  name: string;              // "Mondwest", "Joystix Monospace"
+  family: string;            // CSS font-family value
+  files: FontFile[];         // Array of font files (Regular, Bold, etc.)
+  weights: number[];         // [400, 700]
+  styles: string[];          // ["normal", "italic"]
+}
+
+// Typography Style Definition (for @layer base HTML elements)
+// Matches Webflow style guide sizing/font choices but uses Tailwind @apply
+export interface TypographyStyle {
+  id: string;
+  element: string;           // "h1", "h2", "h3", "h4", "h5", "h6", "p", "a", "ul", "ol", "li"
+  fontFamilyId: string;      // References FontDefinition.id
+  fontSize: string;          // Tailwind class: "text-4xl", "text-3xl", etc.
+  lineHeight?: string;       // Tailwind class: "leading-relaxed", "leading-tight", etc.
+  letterSpacing?: string;    // Tailwind class: "tracking-wide", "tracking-normal", etc.
+  fontWeight: string;        // Tailwind class: "font-bold", "font-semibold", "font-normal", etc.
+  baseColorId: string;       // References BaseColor.id for text color
+  displayName: string;       // "Heading 1", "Heading 2", "Paragraph", etc.
+  utilities?: string[];      // Additional Tailwind utilities: ["underline"], ["hover:text-link-hover"]
+}
+