feat: new onboarding skeleton

Author: grantiguess

src/ColorPicker.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Palette } from 'lucide-react';
+import { cssColorToHex } from './utils/colorUtils';
 
 const ColorPicker = ({
   isVisible,
@@ -64,12 +65,17 @@ const ColorPicker = ({
 
   // Initialize with current color
   useEffect(() => {
-    if (currentColor && currentColor.startsWith('#')) {
-      const hsv = hexToHsv(currentColor);
-      setSelectedHue(hsv.h);
-      setSelectedSaturation(Math.round(hsv.s * 100));
-      setSelectedBrightness(Math.round(hsv.v * 100));
-      setHexInput(currentColor);
+    if (currentColor) {
+      // Normalize color (handle CSS names, 3-digit hex, etc.)
+      const normalizedColor = cssColorToHex(currentColor);
+
+      if (normalizedColor && normalizedColor.startsWith('#')) {
+        const hsv = hexToHsv(normalizedColor);
+        setSelectedHue(hsv.h);
+        setSelectedSaturation(Math.round(hsv.s * 100));
+        setSelectedBrightness(Math.round(hsv.v * 100));
+        setHexInput(normalizedColor);
+      }
     }
   }, [currentColor, hexToHsv]);
 

src/NodeCanvas.jsx

@@ -263,7 +263,30 @@ const RedstringMenu = ({
                         onMouseEnter={handleTopLevelSubmenuEnter}
                         onMouseLeave={handleTopLevelMenuLeave}
                       >
-                        {/* Universe operations removed - UniverseManager eliminated */}
+                        {/* Workspace operations */}
+                        <div
+                          className="submenu-item"
+                          onMouseEnter={handleRegularSubmenuItemHover}
+                          onClick={async () => {
+                            try {
+                              const { pickFolder } = await import('./utils/fileAccessAdapter.js');
+                              const { storeFolderHandle } = await import('./services/folderPersistence.js');
+
+                              const folderHandle = await pickFolder();
+                              if (folderHandle) {
+                                await storeFolderHandle(folderHandle);
+                                console.log('[RedstringMenu] Workspace folder changed');
+                                window.location.reload();
+                              }
+                            } catch (error) {
+                              console.error('[RedstringMenu] Failed to change workspace folder:', error);
+                            }
+                          }}
+                          style={{ cursor: 'pointer' }}
+                        >
+                          <FolderOpen size={16} style={{ marginRight: '8px', minWidth: '16px', flexShrink: 0 }} />
+                          Change Workspace Folder...
+                        </div>
                         <div
                           className="submenu-item"
                           onMouseEnter={handleRegularSubmenuItemHover}