vzcode 2.11.0 → 2.12.0

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

@@ -5,35 +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';
+import { VisualEditorConfigEntry } from '../../../types';
+import { EmptyState } from '../EmptyState';
 import { color, hcl, HCLColor, rgb } from 'd3-color';
-
-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 { 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 } =
@@ -418,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
@@ -479,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
@@ -521,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
@@ -555,85 +458,23 @@ export const VisualEditor = () => {
             openDropdown === widgetConfig.property;
 
           return (
-            <div
+            <DropdownWidget
               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}
+              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
@@ -663,130 +504,16 @@ export const VisualEditor = () => {
             hclColor.l;
 
           return (
-            <div
+            <ColorWidget
               key={widgetConfig.property}
-              className="visual-editor-color"
-            >
-              <div className="color-header">
-                <label className="color-label">
-                  {widgetConfig.label}
-                </label>
-                <span className="color-value">
-                  {currentHex}
-                </span>
-              </div>
-
-              <div
-                className="color-preview"
-                style={{ backgroundColor: currentHex }}
-              />
-
-              <div className="lch-sliders">
-                {/* Lightness Slider */}
-                <div className="lch-slider">
-                  <div className="slider-header">
-                    <label className="slider-label">
-                      Lightness
-                    </label>
-                    <span className="slider-value">
-                      {Math.round(currentL)}
-                    </span>
-                  </div>
-                  <div className="slider-container">
-                    <input
-                      type="range"
-                      className="slider-input"
-                      min={0}
-                      max={100}
-                      step={1}
-                      value={currentL}
-                      onChange={onColorChange(
-                        widgetConfig.property,
-                        'l',
-                      )}
-                    />
-                    <div
-                      className="slider-track-fill"
-                      style={{ width: `${currentL}%` }}
-                    />
-                  </div>
-                  <div className="slider-bounds">
-                    <span className="min-value">0</span>
-                    <span className="max-value">100</span>
-                  </div>
-                </div>
-
-                {/* Chroma Slider */}
-                <div className="lch-slider">
-                  <div className="slider-header">
-                    <label className="slider-label">
-                      Chroma
-                    </label>
-                    <span className="slider-value">
-                      {Math.round(currentC)}
-                    </span>
-                  </div>
-                  <div className="slider-container">
-                    <input
-                      type="range"
-                      className="slider-input"
-                      min={0}
-                      max={100}
-                      step={1}
-                      value={currentC}
-                      onChange={onColorChange(
-                        widgetConfig.property,
-                        'c',
-                      )}
-                    />
-                    <div
-                      className="slider-track-fill"
-                      style={{ width: `${currentC}%` }}
-                    />
-                  </div>
-                  <div className="slider-bounds">
-                    <span className="min-value">0</span>
-                    <span className="max-value">100</span>
-                  </div>
-                </div>
-
-                {/* Hue Slider */}
-                <div className="lch-slider">
-                  <div className="slider-header">
-                    <label className="slider-label">
-                      Hue
-                    </label>
-                    <span className="slider-value">
-                      {Math.round(currentH)}°
-                    </span>
-                  </div>
-                  <div className="slider-container">
-                    <input
-                      type="range"
-                      className="slider-input"
-                      min={0}
-                      max={360}
-                      step={1}
-                      value={currentH}
-                      onChange={onColorChange(
-                        widgetConfig.property,
-                        'h',
-                      )}
-                    />
-                    <div
-                      className="slider-track-fill"
-                      style={{
-                        width: `${(currentH / 360) * 100}%`,
-                      }}
-                    />
-                  </div>
-                  <div className="slider-bounds">
-                    <span className="min-value">0°</span>
-                    <span className="max-value">360°</span>
-                  </div>
-                </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/styles.scss

@@ -1064,9 +1064,20 @@
       align-items: center;
     }
 
+    .slider-bg-canvas {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 100%;
+      height: 12px;
+      border-radius: 6px;
+      pointer-events: none;
+    }
+
     .slider-input {
       width: 100%;
-      height: 4px;
+      height: 8px;
       background: transparent;
       outline: none;
       border: none;
@@ -1081,17 +1092,17 @@
       // Custom track
       &::-webkit-slider-track {
         width: 100%;
-        height: 4px;
+        height: 8px;
         background: var(--vh-color-neutral-02);
-        border-radius: 2px;
+        border-radius: 4px;
         border: none;
       }
 
       &::-moz-range-track {
         width: 100%;
-        height: 4px;
+        height: 8px;
         background: var(--vh-color-neutral-02);
-        border-radius: 2px;
+        border-radius: 4px;
         border: none;
       }
 
@@ -1099,8 +1110,8 @@
       &::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
-        width: 14px;
-        height: 14px;
+        width: 18px;
+        height: 18px;
         background: linear-gradient(
           135deg,
           #66ecff,
@@ -1108,26 +1119,26 @@
         );
         border-radius: 50%;
         cursor: pointer;
-        border: 1px solid var(--vh-color-neutral-01);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        border: 2px solid var(--vh-color-neutral-01);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
         transition: all 0.2s ease;
         position: relative;
         z-index: 3;
 
         &:hover {
           transform: scale(1.1);
-          box-shadow: 0 2px 4px rgba(102, 236, 255, 0.4);
+          box-shadow: 0 3px 8px rgba(102, 236, 255, 0.4);
         }
 
         &:active {
           transform: scale(1.05);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
         }
       }
 
       &::-moz-range-thumb {
-        width: 14px;
-        height: 14px;
+        width: 18px;
+        height: 18px;
         background: linear-gradient(
           135deg,
           #66ecff,
@@ -1135,18 +1146,18 @@
         );
         border-radius: 50%;
         cursor: pointer;
-        border: 1px solid var(--vh-color-neutral-01);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        border: 2px solid var(--vh-color-neutral-01);
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
         transition: all 0.2s ease;
 
         &:hover {
           transform: scale(1.1);
-          box-shadow: 0 2px 4px rgba(102, 236, 255, 0.4);
+          box-shadow: 0 3px 8px rgba(102, 236, 255, 0.4);
         }
 
         &:active {
           transform: scale(1.05);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
         }
       }
 
@@ -1155,11 +1166,11 @@
         outline: none;
 
         &::-webkit-slider-thumb {
-          box-shadow: 0 0 0 2px rgba(102, 236, 255, 0.3);
+          box-shadow: 0 0 0 3px rgba(102, 236, 255, 0.3);
         }
 
         &::-moz-range-thumb {
-          box-shadow: 0 0 0 2px rgba(102, 236, 255, 0.3);
+          box-shadow: 0 0 0 3px rgba(102, 236, 255, 0.3);
         }
       }
     }
@@ -1168,9 +1179,9 @@
       position: absolute;
       top: 50%;
       left: 0;
-      height: 4px;
+      height: 8px;
       background: linear-gradient(90deg, #77fd8c, #66ecff);
-      border-radius: 2px;
+      border-radius: 4px;
       transform: translateY(-50%);
       transition: width 0.1s ease;
       pointer-events: none;