@fibery/ui-kit 2.1.0 → 2.1.1

package/src/thematic-state.ts

@@ -1,14 +1,12 @@
 import {useCallback, useEffect, useMemo, useState} from "react";
 import {useThematic, useThemeMode} from "./theme-provider";
 import {
-  type ColorScale,
   DEFAULT_DARK_CURVES,
   DEFAULT_LIGHT_CURVES,
   generateColorScale,
   makeThematicPalette,
   type ScaleCurves,
   type ThematicPrefs,
-  type ThemePalette,
 } from "./palette-generator";
 import {getThemePreference, setThemePreference, type ThemePreference} from "./theme-settings";
 import {type ColorFilterSpec} from "./color-filter";
@@ -16,8 +14,12 @@ import {oklchFrom} from "./color-utils";
 import {StaticPalettes} from "./static-palettes";
 import {defaultPrefs, nextThemePref} from "./thematic-constants";
 import {useToast} from "./toast/toast-provider";
+import type {HighlightDefs, ModeDef, ThemePalette} from "./design-system/types";
+import {common} from "./palettes/common";
 
-type PaletteScaleKey = Exclude<keyof ThemePalette, "key" | "deneutralize">;
+export type PaletteScaleKey = Exclude<keyof ThemePalette, "key" | "deneutralize" | "highlight">;
+
+const highlight = common.highlight;
 
 interface StoredState {
   prefs: ThematicPrefs | null;
@@ -177,9 +179,11 @@ export function useThematicState() {
     }
     if (customPalette) {
       const customKey = Object.entries(customPalette)
-        .map(([k, v]) => `${k}:${Array.isArray(v) ? v.join(",") : JSON.stringify(v)}`)
+        .map(([k, v]) => `${k}:${JSON.stringify(v)}`)
         .join("|");
-      result = {...result, key: `${result.key}-custom-${customKey}`};
+      const idx = result.key.indexOf("-custom-");
+      const stableKey = idx >= 0 ? result.key.slice(0, idx) : result.key;
+      result = {...result, key: `${stableKey}-custom-${customKey}`};
     }
     return result;
   }, [
@@ -219,14 +223,30 @@ export function useThematicState() {
   };
 
   const updateFilter = (partial: Partial<ColorFilterSpec>) => {
+    const sideIdx = editingDark ? 1 : 0;
     if (prefs) {
-      const current = prefsPresent.filter ?? {};
+      const current = prefsPresent.filter ?? [{}, {}];
+      const updated: ModeDef<Partial<ColorFilterSpec>> = [...current];
+      updated[sideIdx] = {...updated[sideIdx], ...partial};
       setPrefs({
         ...prefsPresent,
-        filter: {...current, ...partial},
+        filter: updated,
+      });
+    } else {
+      setCustomPalette((prev) => {
+        const current = palette.deneutralize ?? [{}, {}];
+        const updated: ModeDef<ColorFilterSpec> = [...current];
+        updated[sideIdx] = {...updated[sideIdx], ...partial};
+        return {...prev, deneutralize: updated};
       });
+    }
+  };
+
+  const updateHighlight = (highlight: HighlightDefs) => {
+    if (prefs) {
+      setPrefs({...prefsPresent, highlight});
     } else {
-      setCustomPalette((prev) => ({...prev, deneutralize: {...palette.deneutralize, ...partial}}));
+      setCustomPalette((prev) => ({...prev, highlight}));
     }
   };
 
@@ -237,6 +257,7 @@ export function useThematicState() {
       baseChroma: Math.random() * 0.1,
       accentHue: Math.random() * 360,
       accentChroma: 0.08 + Math.random() * 0.12,
+      highlight,
     });
   };
 
@@ -268,15 +289,10 @@ export function useThematicState() {
   };
 
   const updateScaleColor = useCallback(
-    (scaleName: PaletteScaleKey, index: number, color: string) => {
+    (key: PaletteScaleKey, index: number, color: string) => {
       setCustomPalette((prev) => {
-        const currentValue = prev?.[scaleName] ?? palette[scaleName];
-        if (typeof currentValue === "string") {
-          return {...prev, [scaleName]: color};
-        }
-        const mutableScale = [...currentValue] as unknown as string[];
-        mutableScale[index] = color;
-        return {...prev, [scaleName]: mutableScale as unknown as ColorScale};
+        const colorOrScale = prev?.[key] ?? palette[key];
+        return {...prev, [key]: typeof colorOrScale === "string" ? color : colorOrScale.with(index, color)};
       });
     },
     [palette]
@@ -297,6 +313,8 @@ export function useThematicState() {
   }, [prefs, staticPaletteIndex, customPalette]);
 
   const editingDark = !isLightMode;
+  const dnSide = editingDark ? 1 : 0;
+  const deneutralizeSpec = palette.deneutralize?.[dnSide];
   const baseCurves = editingDark ? baseCurvesDark : baseCurvesLight;
   const setBaseCurves = editingDark ? setBaseCurvesDark : setBaseCurvesLight;
   const accentCurves = editingDark ? accentCurvesDark : accentCurvesLight;
@@ -352,6 +370,8 @@ export function useThematicState() {
 
   return {
     palette,
+    deneutralizeSpec,
+    dnSide,
     hoveredInfo,
     isAltPressed,
     pinned,
@@ -374,6 +394,7 @@ export function useThematicState() {
     update,
     updateHueShift,
     updateFilter,
+    updateHighlight,
     randomize,
     cycleStaticPalettes,
     cycleTheme,