@newtonedev/editor 0.1.1

package/src/components/sections/ColorsSection.tsx

@@ -0,0 +1,485 @@
+import { useState, useMemo, useCallback, useEffect } from "react";
+import {
+  HueSlider,
+  Slider,
+  Select,
+  Toggle,
+  ColorScaleSlider,
+  TextInput,
+  useTokens,
+} from "@newtonedev/components";
+import type { ColorMode } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { ColorResult, DynamicRange } from "newtone";
+import type { DesaturationStrength, HueGradingStrength } from "newtone";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorAction } from "@newtonedev/configurator";
+import {
+  SEMANTIC_HUE_RANGES,
+  useWcagValidation,
+  hexToPaletteParams,
+  traditionalHueToOklch,
+} from "@newtonedev/configurator";
+
+const STRENGTH_OPTIONS = [
+  { label: "None", value: "none" },
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "Hard", value: "hard" },
+];
+
+interface ColorsSectionProps {
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+  readonly previewColors: readonly (readonly ColorResult[])[];
+  readonly colorMode: ColorMode;
+  readonly onColorModeChange: (mode: ColorMode) => void;
+}
+
+/** Get the hex color at a normalizedValue from the preview colors array */
+function getHexAtNv(
+  previewColors: readonly ColorResult[],
+  nv: number,
+): string {
+  const idx = Math.round((1 - nv) * (previewColors.length - 1));
+  const clamped = Math.max(0, Math.min(previewColors.length - 1, idx));
+  return srgbToHex(previewColors[clamped].srgb);
+}
+
+export function ColorsSection({
+  state,
+  dispatch,
+  previewColors,
+  colorMode,
+  onColorModeChange,
+}: ColorsSectionProps) {
+  const tokens = useTokens();
+  const [activePaletteIndex, setActivePaletteIndex] = useState(0);
+  const [modeToggleHovered, setModeToggleHovered] = useState(false);
+
+  const palette = state.palettes[activePaletteIndex];
+  const hueRange = SEMANTIC_HUE_RANGES[activePaletteIndex];
+  const isNeutral = activePaletteIndex === 0;
+
+  const activeColor = srgbToHex(tokens.interactive.srgb);
+  const borderColor = srgbToHex(tokens.border.srgb);
+
+  // Resolve effective key color for current mode
+  const effectiveKeyColor =
+    colorMode === "dark" ? palette.keyColorDark : palette.keyColor;
+
+  // Mode-aware action types
+  const setKeyColorAction =
+    colorMode === "dark"
+      ? ("SET_PALETTE_KEY_COLOR_DARK" as const)
+      : ("SET_PALETTE_KEY_COLOR" as const);
+  const clearKeyColorAction =
+    colorMode === "dark"
+      ? ("CLEAR_PALETTE_KEY_COLOR_DARK" as const)
+      : ("CLEAR_PALETTE_KEY_COLOR" as const);
+  const hexAction =
+    colorMode === "dark"
+      ? ("SET_PALETTE_FROM_HEX_DARK" as const)
+      : ("SET_PALETTE_FROM_HEX" as const);
+
+  // WCAG validation for key color (already mode-aware)
+  const wcag = useWcagValidation(state, activePaletteIndex);
+
+  // Hex input state
+  const [hexText, setHexText] = useState("");
+  const [hexError, setHexError] = useState("");
+  const [isEditingHex, setIsEditingHex] = useState(false);
+  const [isHexUserSet, setIsHexUserSet] = useState(false);
+
+  // Reset hex input state when mode changes
+  useEffect(() => {
+    setHexText("");
+    setHexError("");
+    setIsEditingHex(false);
+    setIsHexUserSet(false);
+  }, [colorMode]);
+
+  // Compute displayed hex from current key color position
+  const currentPreview = previewColors[activePaletteIndex];
+  const displayedHex = useMemo(() => {
+    if (!currentPreview || currentPreview.length === 0) return "";
+    const nv = effectiveKeyColor ?? wcag.autoNormalizedValue;
+    return getHexAtNv(currentPreview, nv);
+  }, [currentPreview, effectiveKeyColor, wcag.autoNormalizedValue]);
+
+  // Sync hex text when not actively editing and not user-submitted
+  useEffect(() => {
+    if (!isEditingHex && !isHexUserSet) {
+      setHexText(displayedHex);
+    }
+  }, [displayedHex, isEditingHex, isHexUserSet]);
+
+  // Build dynamic range for hex conversion
+  const dynamicRange = useMemo((): DynamicRange => {
+    const light =
+      state.globalHueGrading.light.strength !== "none"
+        ? {
+            hue: traditionalHueToOklch(state.globalHueGrading.light.hue),
+            strength: state.globalHueGrading.light.strength,
+          }
+        : undefined;
+    const dark =
+      state.globalHueGrading.dark.strength !== "none"
+        ? {
+            hue: traditionalHueToOklch(state.globalHueGrading.dark.hue),
+            strength: state.globalHueGrading.dark.strength,
+          }
+        : undefined;
+    const hueGrading = light || dark ? { light, dark } : undefined;
+    return {
+      lightest: state.dynamicRange.lightest,
+      darkest: state.dynamicRange.darkest,
+      ...(hueGrading ? { hueGrading } : {}),
+    };
+  }, [state.dynamicRange, state.globalHueGrading]);
+
+  const handleHexSubmit = useCallback(() => {
+    setIsEditingHex(false);
+    const trimmed = hexText.trim();
+    if (!trimmed) {
+      setHexError("");
+      return;
+    }
+
+    const hex = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+    const params = hexToPaletteParams(hex, dynamicRange);
+
+    if (!params) {
+      setHexError("Invalid hex color");
+      return;
+    }
+
+    setHexError("");
+    setIsHexUserSet(true);
+    dispatch({
+      type: hexAction,
+      index: activePaletteIndex,
+      hue: params.hue,
+      saturation: params.saturation,
+      keyColor: params.normalizedValue,
+    });
+  }, [hexText, dynamicRange, dispatch, activePaletteIndex, hexAction]);
+
+  const handleClearKeyColor = useCallback(() => {
+    dispatch({ type: clearKeyColorAction, index: activePaletteIndex });
+    setHexError("");
+    setIsHexUserSet(false);
+  }, [dispatch, activePaletteIndex, clearKeyColorAction]);
+
+  // Build WCAG warning message
+  const wcagWarning = useMemo(() => {
+    if (effectiveKeyColor === undefined || wcag.keyColorContrast === null)
+      return undefined;
+    if (wcag.passesAA) return undefined;
+    const ratio = wcag.keyColorContrast.toFixed(1);
+    if (wcag.passesAALargeText) {
+      return `Contrast ${ratio}:1 — passes large text (AA) but fails normal text (requires 4.5:1)`;
+    }
+    return `Contrast ${ratio}:1 — fails WCAG AA (requires 4.5:1 for normal text, 3:1 for large text)`;
+  }, [effectiveKeyColor, wcag]);
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {/* ─── Palette Circles + Mode Toggle ─── */}
+      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+        {state.palettes.map((_p, index) => {
+          const isActive = index === activePaletteIndex;
+          const colors = previewColors[index];
+          const isNeutralCircle = index === 0;
+
+          // Per-mode key color for this palette's circle
+          const paletteKeyColor =
+            colorMode === "dark" ? _p.keyColorDark : _p.keyColor;
+          const circleColor =
+            !isNeutralCircle && colors
+              ? getHexAtNv(
+                  colors,
+                  paletteKeyColor ?? wcag.autoNormalizedValue,
+                )
+              : undefined;
+
+          const ringStyle = isActive
+            ? `0 0 0 2px ${srgbToHex(tokens.background.srgb)}, 0 0 0 4px ${activeColor}`
+            : "none";
+
+          return (
+            <button
+              key={index}
+              onClick={() => setActivePaletteIndex(index)}
+              aria-label={_p.name}
+              aria-pressed={isActive}
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                border: "none",
+                cursor: "pointer",
+                flexShrink: 0,
+                boxShadow: ringStyle,
+                transition: "box-shadow 150ms ease",
+                padding: 0,
+                overflow: "hidden",
+                ...(isNeutralCircle
+                  ? {
+                      background: colors
+                        ? `linear-gradient(to right, ${srgbToHex(colors[0].srgb)} 50%, ${srgbToHex(colors[colors.length - 1].srgb)} 50%)`
+                        : `linear-gradient(to right, #ffffff 50%, #000000 50%)`,
+                    }
+                  : { backgroundColor: circleColor ?? borderColor }),
+              }}
+            />
+          );
+        })}
+
+        {/* Spacer */}
+        <div style={{ flex: 1 }} />
+
+        {/* Light/Dark Mode Toggle */}
+        <button
+          onClick={() =>
+            onColorModeChange(colorMode === "light" ? "dark" : "light")
+          }
+          onMouseEnter={() => setModeToggleHovered(true)}
+          onMouseLeave={() => setModeToggleHovered(false)}
+          aria-label={
+            colorMode === "light"
+              ? "Switch to dark mode"
+              : "Switch to light mode"
+          }
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "4px 10px",
+            borderRadius: 6,
+            border: `1px solid ${borderColor}`,
+            background: modeToggleHovered ? `${borderColor}20` : "none",
+            cursor: "pointer",
+            fontSize: 12,
+            color: srgbToHex(tokens.textPrimary.srgb),
+            transition: "background-color 150ms ease",
+          }}
+        >
+          {colorMode === "light" ? "\u2600" : "\u263E"}
+          <span>{colorMode === "light" ? "Light" : "Dark"}</span>
+        </button>
+      </div>
+
+      {/* ─── Key Color (mode-specific) ─── */}
+      {currentPreview &&
+        (isNeutral ? (
+          <div style={{ display: "flex", gap: 1 }}>
+            {currentPreview.map((color, i) => (
+              <div
+                key={i}
+                style={{
+                  flex: 1,
+                  height: 64,
+                  borderRadius: 2,
+                  backgroundColor: srgbToHex(color.srgb),
+                }}
+              />
+            ))}
+          </div>
+        ) : (
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: 8 }}
+          >
+            <ColorScaleSlider
+              colors={currentPreview}
+              value={effectiveKeyColor ?? wcag.autoNormalizedValue}
+              onValueChange={(nv) => {
+                setIsHexUserSet(false);
+                dispatch({
+                  type: setKeyColorAction,
+                  index: activePaletteIndex,
+                  normalizedValue: nv,
+                });
+              }}
+              trimEnds
+              snap
+              label="Key Color"
+              warning={wcagWarning}
+              animateValue
+            />
+            <div
+              style={{
+                display: "flex",
+                gap: 8,
+                alignItems: "flex-end",
+              }}
+            >
+              <div style={{ flex: 1 }}>
+                <TextInput
+                  label="Hex"
+                  value={hexText}
+                  onChangeText={(text) => {
+                    setIsEditingHex(true);
+                    setHexText(text);
+                    setHexError("");
+                  }}
+                  onBlur={handleHexSubmit}
+                  onSubmitEditing={handleHexSubmit}
+                  placeholder="#000000"
+                />
+              </div>
+              {effectiveKeyColor !== undefined && (
+                <button
+                  onClick={handleClearKeyColor}
+                  style={{
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "0 0 6px",
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: activeColor,
+                  }}
+                >
+                  Auto
+                </button>
+              )}
+            </div>
+            {hexError && (
+              <div
+                style={{
+                  fontSize: 12,
+                  fontWeight: 500,
+                  color: srgbToHex(tokens.error.srgb),
+                }}
+              >
+                {hexError}
+              </div>
+            )}
+          </div>
+        ))}
+
+      {/* ─── Divider ─── */}
+      <div
+        style={{
+          height: 1,
+          backgroundColor: borderColor,
+          margin: "4px 0",
+        }}
+      />
+
+      {/* ─── Shared Per-Palette Controls ─── */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <HueSlider
+          value={palette.hue}
+          onValueChange={(hue) =>
+            dispatch({
+              type: "SET_PALETTE_HUE",
+              index: activePaletteIndex,
+              hue,
+            })
+          }
+          label="Hue"
+          editableValue
+          {...(hueRange ? { min: hueRange.min, max: hueRange.max } : {})}
+        />
+
+        <Slider
+          value={palette.saturation}
+          onValueChange={(saturation) =>
+            dispatch({
+              type: "SET_PALETTE_SATURATION",
+              index: activePaletteIndex,
+              saturation,
+            })
+          }
+          min={0}
+          max={100}
+          label="Saturation"
+          editableValue
+        />
+
+        {/* Desaturation */}
+        <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>
+          <div style={{ flex: 1 }}>
+            <Select
+              options={STRENGTH_OPTIONS}
+              value={palette.desaturationStrength}
+              onValueChange={(strength) =>
+                dispatch({
+                  type: "SET_PALETTE_DESAT_STRENGTH",
+                  index: activePaletteIndex,
+                  strength: strength as DesaturationStrength,
+                })
+              }
+              label="Desaturation"
+            />
+          </div>
+          {palette.desaturationStrength !== "none" && (
+            <div style={{ paddingBottom: 2 }}>
+              <Toggle
+                value={palette.desaturationDirection === "dark"}
+                onValueChange={(v) =>
+                  dispatch({
+                    type: "SET_PALETTE_DESAT_DIRECTION",
+                    index: activePaletteIndex,
+                    direction: v ? "dark" : "light",
+                  })
+                }
+                label="Invert"
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Hue Grading */}
+        <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>
+          <div style={{ flex: 1 }}>
+            <Select
+              options={STRENGTH_OPTIONS}
+              value={palette.hueGradeStrength}
+              onValueChange={(strength) =>
+                dispatch({
+                  type: "SET_PALETTE_HUE_GRADE_STRENGTH",
+                  index: activePaletteIndex,
+                  strength: strength as HueGradingStrength,
+                })
+              }
+              label="Hue Grading"
+            />
+          </div>
+          {palette.hueGradeStrength !== "none" && (
+            <div style={{ paddingBottom: 2 }}>
+              <Toggle
+                value={palette.hueGradeDirection === "dark"}
+                onValueChange={(v) =>
+                  dispatch({
+                    type: "SET_PALETTE_HUE_GRADE_DIRECTION",
+                    index: activePaletteIndex,
+                    direction: v ? "dark" : "light",
+                  })
+                }
+                label="Invert"
+              />
+            </div>
+          )}
+        </div>
+
+        {palette.hueGradeStrength !== "none" && (
+          <HueSlider
+            value={palette.hueGradeHue}
+            onValueChange={(hue) =>
+              dispatch({
+                type: "SET_PALETTE_HUE_GRADE_HUE",
+                index: activePaletteIndex,
+                hue,
+              })
+            }
+            label="Grade Target"
+            editableValue
+          />
+        )}
+      </div>
+    </div>
+  );
+}