vzcode 2.10.0 → 2.12.0

package/src/client/VZSidebar/{VisualEditor.tsx → VisualEditor/VisualEditor.tsx}

@@ -5,34 +5,17 @@ import {
   useEffect,
   useMemo,
 } from 'react';
-import { VZCodeContext } from '../VZCodeContext';
+import { VZCodeContext } from '../../VZCodeContext';
 import { VizContent, VizFileId } from '@vizhub/viz-types';
-import { VisualEditorConfigEntry } from '../../types';
-import { EmptyState } from './EmptyState';
-
-const CONFIG_FILE_NAME = 'config.json';
-
-// Helper function to calculate percentage for progress fill
-const calculatePercentage = (
-  value: number,
-  min: number,
-  max: number,
-) => {
-  return ((value - min) / (max - min)) * 100;
-};
-
-// Helper function to format values nicely
-const formatValue = (
-  value: number,
-  min: number,
-  max: number,
-) => {
-  // Determine decimal places based on the range
-  const range = max - min;
-  const decimalPlaces =
-    range < 10 ? 2 : range < 100 ? 1 : 0;
-  return Number(value).toFixed(decimalPlaces);
-};
+import { VisualEditorConfigEntry } from '../../../types';
+import { EmptyState } from '../EmptyState';
+import { color, hcl, HCLColor, rgb } from 'd3-color';
+import { CONFIG_FILE_NAME } from './constants';
+import { SliderWidget } from './SliderWidget';
+import { CheckboxWidget } from './CheckboxWidget';
+import { TextInputWidget } from './TextInputWidget';
+import { DropdownWidget } from './DropdownWidget';
+import { ColorWidget } from './ColorWidget';
 
 export const VisualEditor = () => {
   const { files, submitOperation } =
@@ -229,6 +212,90 @@ export const VisualEditor = () => {
     };
   }, [openDropdown]);
 
+  const onColorChange = useCallback(
+    (property: string, lchComponent: 'l' | 'c' | 'h') =>
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const newValue = parseFloat(
+          event.currentTarget.value,
+        );
+
+        // Get current hex color from config
+        const currentHex =
+          configData[property] || '#000000';
+
+        // Convert current hex to LCH
+        let hclFromRGB: HCLColor;
+        try {
+          const rgbColor = rgb(currentHex);
+          hclFromRGB = hcl(rgbColor);
+        } catch (error) {
+          // Fallback to black if conversion fails
+          hclFromRGB = hcl('black');
+        }
+
+        let hclArray: number[] = [
+          (localValues[`${property}_h`] as number) ??
+            hclFromRGB.h,
+          (localValues[`${property}_c`] as number) ??
+            hclFromRGB.c,
+          (localValues[`${property}_l`] as number) ??
+            hclFromRGB.l,
+        ];
+
+        // Update the specific LCH component
+        const newhcl = [...hclArray];
+        if (lchComponent === 'h') newhcl[0] = newValue;
+        else if (lchComponent === 'c') newhcl[1] = newValue;
+        else if (lchComponent === 'l') newhcl[2] = newValue;
+
+        // Convert back to hex
+        let newHex;
+        try {
+          const newColor = hcl(
+            newhcl[0],
+            newhcl[1],
+            newhcl[2],
+          );
+
+          if (newColor.displayable()) {
+            newHex = newColor.formatHex();
+          } else {
+            newHex = currentHex;
+          }
+        } catch (error) {
+          // Fallback to current color if conversion fails
+          newHex = currentHex;
+        }
+
+        // Update local state for responsive UI
+        setLocalValues((prev) => ({
+          ...prev,
+          [property]: newHex,
+          [`${property}_h`]: newhcl[0],
+          [`${property}_c`]: newhcl[1],
+          [`${property}_l`]: newhcl[2],
+        }));
+
+        // Update config.json with hex value
+        const newConfigData = {
+          ...configData,
+          [property]: newHex,
+        };
+
+        submitOperation((document: VizContent) => ({
+          ...document,
+          files: {
+            ...files,
+            [configFileId]: {
+              name: 'config.json',
+              text: JSON.stringify(newConfigData, null, 2),
+            },
+          },
+        }));
+      },
+    [configData, files, configFileId, setLocalValues],
+  );
+
   const visualEditorWidgets: VisualEditorConfigEntry[] =
     configData?.visualEditorWidgets ?? [];
 
@@ -250,6 +317,32 @@ export const VisualEditor = () => {
       } else if (widget.type === 'dropdown') {
         newLocalValues[widget.property] =
           configData[widget.property];
+      } else if (widget.type === 'color') {
+        newLocalValues[widget.property] =
+          configData[widget.property];
+
+        // Convert hex to LCH for internal state
+        const hexColor = configData[widget.property];
+
+        if (localValues[widget.property] !== hexColor) {
+          if (hexColor) {
+            try {
+              const rgbColor = color(hexColor);
+              const lch = hcl(rgbColor);
+              newLocalValues[`${widget.property}_h`] =
+                lch.h;
+              newLocalValues[`${widget.property}_c`] =
+                lch.c;
+              newLocalValues[`${widget.property}_l`] =
+                lch.l;
+            } catch (error) {
+              // Fallback values if conversion fails
+              newLocalValues[`${widget.property}_l`] = 0;
+              newLocalValues[`${widget.property}_c`] = 0;
+              newLocalValues[`${widget.property}_h`] = 0;
+            }
+          }
+        }
       }
     });
     setLocalValues(newLocalValues);
@@ -307,59 +400,20 @@ export const VisualEditor = () => {
           const currentValue =
             localValues[widgetConfig.property] ??
             configData[widgetConfig.property];
-          const percentage = calculatePercentage(
-            currentValue,
-            widgetConfig.min,
-            widgetConfig.max,
-          );
 
           return (
-            <div
+            <SliderWidget
               key={widgetConfig.property}
-              className="visual-editor-slider"
-            >
-              <div className="slider-header">
-                <label
-                  htmlFor={widgetConfig.property}
-                  className="slider-label"
-                >
-                  {widgetConfig.label}
-                </label>
-                <span className="slider-value">
-                  {formatValue(
-                    currentValue,
-                    widgetConfig.min,
-                    widgetConfig.max,
-                  )}
-                </span>
-              </div>
-              <div className="slider-container">
-                <input
-                  type="range"
-                  id={widgetConfig.property}
-                  className="slider-input"
-                  min={widgetConfig.min}
-                  max={widgetConfig.max}
-                  step={widgetConfig.step}
-                  value={currentValue}
-                  onChange={onSliderChange(
-                    widgetConfig.property,
-                  )}
-                />
-                <div
-                  className="slider-track-fill"
-                  style={{ width: `${percentage}%` }}
-                />
-              </div>
-              <div className="slider-bounds">
-                <span className="min-value">
-                  {widgetConfig.min}
-                </span>
-                <span className="max-value">
-                  {widgetConfig.max}
-                </span>
-              </div>
-            </div>
+              property={widgetConfig.property}
+              label={widgetConfig.label}
+              min={widgetConfig.min}
+              max={widgetConfig.max}
+              step={widgetConfig.step}
+              currentValue={currentValue}
+              onChange={onSliderChange(
+                widgetConfig.property,
+              )}
+            />
           );
         } else if (widgetConfig.type === 'checkbox') {
           // Use local value if available, otherwise fall back to config value
@@ -368,40 +422,15 @@ export const VisualEditor = () => {
             configData[widgetConfig.property];
 
           return (
-            <div
+            <CheckboxWidget
               key={widgetConfig.property}
-              className="visual-editor-checkbox"
-            >
-              <div className="checkbox-header">
-                <label
-                  htmlFor={widgetConfig.property}
-                  className="checkbox-label"
-                >
-                  {widgetConfig.label}
-                </label>
-                <span className="checkbox-value">
-                  {currentValue ? 'On' : 'Off'}
-                </span>
-              </div>
-              <div className="checkbox-container">
-                <input
-                  type="checkbox"
-                  id={widgetConfig.property}
-                  className="checkbox-input"
-                  checked={currentValue}
-                  onChange={onCheckboxChange(
-                    widgetConfig.property,
-                  )}
-                />
-                <div className="checkbox-visual">
-                  <div
-                    className={`checkbox-indicator ${
-                      currentValue ? 'checked' : ''
-                    }`}
-                  />
-                </div>
-              </div>
-            </div>
+              property={widgetConfig.property}
+              label={widgetConfig.label}
+              currentValue={currentValue}
+              onChange={onCheckboxChange(
+                widgetConfig.property,
+              )}
+            />
           );
         } else if (widgetConfig.type === 'textInput') {
           // Use local value if available, otherwise fall back to config value
@@ -410,30 +439,15 @@ export const VisualEditor = () => {
             configData[widgetConfig.property];
 
           return (
-            <div
+            <TextInputWidget
               key={widgetConfig.property}
-              className="visual-editor-text-input"
-            >
-              <div className="text-input-header">
-                <label
-                  htmlFor={widgetConfig.property}
-                  className="text-input-label"
-                >
-                  {widgetConfig.label}
-                </label>
-              </div>
-              <div className="text-input-container">
-                <input
-                  type="text"
-                  id={widgetConfig.property}
-                  className="text-input-field"
-                  value={currentValue || ''}
-                  onChange={onTextInputChange(
-                    widgetConfig.property,
-                  )}
-                />
-              </div>
-            </div>
+              property={widgetConfig.property}
+              label={widgetConfig.label}
+              currentValue={currentValue}
+              onChange={onTextInputChange(
+                widgetConfig.property,
+              )}
+            />
           );
         } else if (widgetConfig.type === 'dropdown') {
           // Use local value if available, otherwise fall back to config value
@@ -444,85 +458,62 @@ export const VisualEditor = () => {
             openDropdown === widgetConfig.property;
 
           return (
-            <div
+            <DropdownWidget
+              key={widgetConfig.property}
+              property={widgetConfig.property}
+              label={widgetConfig.label}
+              options={widgetConfig.options}
+              currentValue={currentValue}
+              isOpen={isOpen}
+              onToggle={() =>
+                handleDropdownToggle(widgetConfig.property)
+              }
+              onOptionClick={(value) =>
+                handleDropdownOptionClick(
+                  widgetConfig.property,
+                  value,
+                )
+              }
+            />
+          );
+        } else if (widgetConfig.type === 'color') {
+          // Use local value if available, otherwise fall back to config value
+          const currentHex =
+            localValues[widgetConfig.property] ??
+            configData[widgetConfig.property] ??
+            '#000000';
+
+          // Convert hex to LCH for slider values
+          let hclColor;
+          try {
+            const rgbColor = color(currentHex);
+            hclColor = hcl(rgbColor);
+          } catch (error) {
+            hclColor = hcl('black');
+          }
+
+          // Use local LCH values if available, otherwise convert from hex
+          const currentH =
+            localValues[`${widgetConfig.property}_h`] ??
+            hclColor.h;
+          const currentC =
+            localValues[`${widgetConfig.property}_c`] ??
+            hclColor.c;
+          const currentL =
+            localValues[`${widgetConfig.property}_l`] ??
+            hclColor.l;
+
+          return (
+            <ColorWidget
               key={widgetConfig.property}
-              className="visual-editor-dropdown"
-            >
-              <div className="dropdown-header">
-                <label
-                  htmlFor={widgetConfig.property}
-                  className="dropdown-label"
-                >
-                  {widgetConfig.label}
-                </label>
-                {/* <span className="dropdown-value">
-                  {currentValue}
-                </span> */}
-              </div>
-              <div className="dropdown-container">
-                <button
-                  type="button"
-                  className={`dropdown-button ${
-                    isOpen ? 'open' : ''
-                  }`}
-                  onClick={() =>
-                    handleDropdownToggle(
-                      widgetConfig.property,
-                    )
-                  }
-                  aria-expanded={isOpen}
-                  aria-haspopup="listbox"
-                >
-                  <span className="dropdown-button-text">
-                    {currentValue}
-                  </span>
-                  <div
-                    className={`dropdown-arrow ${
-                      isOpen ? 'open' : ''
-                    }`}
-                  >
-                    <svg
-                      width="12"
-                      height="8"
-                      viewBox="0 0 12 8"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M1 1.5L6 6.5L11 1.5"
-                        stroke="currentColor"
-                        strokeWidth="2"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                  </div>
-                </button>
-                {isOpen && (
-                  <div className="dropdown-options">
-                    {widgetConfig.options.map((option) => (
-                      <button
-                        key={option}
-                        type="button"
-                        className={`dropdown-option ${
-                          option === currentValue
-                            ? 'selected'
-                            : ''
-                        }`}
-                        onClick={() =>
-                          handleDropdownOptionClick(
-                            widgetConfig.property,
-                            option,
-                          )
-                        }
-                      >
-                        {option}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
+              property={widgetConfig.property}
+              label={widgetConfig.label}
+              currentHex={currentHex}
+              currentH={currentH}
+              currentC={currentC}
+              currentL={currentL}
+              onColorChange={onColorChange}
+            />
           );
         }
       })}

package/src/client/VZSidebar/VisualEditor/constants.ts

@@ -0,0 +1 @@
+export const CONFIG_FILE_NAME = 'config.json';

package/src/client/VZSidebar/VisualEditor/index.tsx

@@ -0,0 +1 @@
+export { VisualEditor } from './VisualEditor';

package/src/client/VZSidebar/VisualEditor/utils.ts

@@ -0,0 +1,102 @@
+import { hcl } from 'd3-color';
+
+// Helper function to calculate percentage for progress fill
+export const calculatePercentage = (
+  value: number,
+  min: number,
+  max: number,
+) => {
+  return ((value - min) / (max - min)) * 100;
+};
+
+// Helper function to format values nicely
+export const formatValue = (
+  value: number,
+  min: number,
+  max: number,
+) => {
+  // Determine decimal places based on the range
+  const range = max - min;
+  const decimalPlaces =
+    range < 10 ? 2 : range < 100 ? 1 : 0;
+  return Number(value).toFixed(decimalPlaces);
+};
+
+// Helper function to check if HCL color is displayable
+export const hclOk = (
+  h: number,
+  c: number,
+  l: number,
+): boolean => {
+  try {
+    const color = hcl(h, c, l);
+    return color.displayable();
+  } catch (e) {
+    return false;
+  }
+};
+
+// Helper function to render slider background gradients
+export const renderSliderBackground = (
+  canvas: HTMLCanvasElement | null,
+  channel: 'h' | 'c' | 'l',
+  values: { h: number; c: number; l: number },
+): void => {
+  if (!canvas) return;
+
+  const width = canvas.width;
+  const height = canvas.height;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+
+  const imageData = ctx.createImageData(width, height);
+
+  for (let x = 0; x < width; x++) {
+    let h, c, l;
+
+    // Map x pixel to value in slider domain
+    if (channel === 'h') {
+      const val = (x * 360) / (width - 1);
+      h = val;
+      c = Math.max(0, Math.min(values.c, 100));
+      l = Math.max(0, Math.min(values.l, 100));
+    } else if (channel === 'c') {
+      const val = (x * 100) / (width - 1);
+      h = Math.max(0, Math.min(values.h, 360));
+      c = val;
+      l = Math.max(0, Math.min(values.l, 100));
+    } else {
+      // channel === 'l'
+      const val = (x * 100) / (width - 1);
+      h = Math.max(0, Math.min(values.h, 360));
+      c = Math.max(0, Math.min(values.c, 100));
+      l = val;
+    }
+
+    // Determine display color
+    let displayColor;
+    if (hclOk(h, c, l)) {
+      const hclColor = hcl(h, c, l);
+      const rgbColor = hclColor.rgb();
+      displayColor = {
+        r: rgbColor.r,
+        g: rgbColor.g,
+        b: rgbColor.b,
+      };
+    } else {
+      // Out-of-gamut: show gray
+      displayColor = { r: 128, g: 128, b: 128 };
+    }
+
+    // Fill the column
+    for (let y = 0; y < height; y++) {
+      const i = 4 * (y * width + x);
+      imageData.data[i] = displayColor.r;
+      imageData.data[i + 1] = displayColor.g;
+      imageData.data[i + 2] = displayColor.b;
+      imageData.data[i + 3] = 255; // Alpha
+    }
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+};

package/src/client/VZSidebar/index.tsx

@@ -396,29 +396,6 @@ export const VZSidebar = ({
             </i>
           </OverlayTrigger>
 
-          {enableAIChat && (
-            <OverlayTrigger
-              placement="right"
-              overlay={
-                <Tooltip id="ai-chat-tooltip">
-                  {aiChatToolTipText}
-                </Tooltip>
-              }
-            >
-              <i
-                id="ai-chat-icon"
-                className="icon-button icon-button-dark"
-                onClick={() => {
-                  setIsAIChatOpen(true);
-                  setIsSearchOpen(false);
-                  setIsVisualEditorOpen(false);
-                }}
-              >
-                <SparklesSVG />
-              </i>
-            </OverlayTrigger>
-          )}
-
           <OverlayTrigger
             placement="right"
             overlay={