From 23909d9873b53140d5581095fd1b29ff4c126585 Mon Sep 17 00:00:00 2001
From: Yaroslav Lozhkin <yalozhkin@gmail.com>
Date: Thu, 4 Dec 2025 20:49:42 +0400
Subject: [PATCH 1/3] Add BetaMenu and palette step presets features

Introduces a BetaMenu component with palette range step presets, allowing users to quickly switch between different level step configurations. Adds utilities for applying, previewing, and distributing contrast and chroma values across levels, including new store actions and UI controls. Refactors chroma cap copying, enables hex-to-hue paste in hue headers, and updates related schemas, types, and color calculation logic to support these features.
---
 .../components/BetaMenu/BetaMenu.module.css   |  20 +++
 .../core/src/components/BetaMenu/BetaMenu.tsx |  63 +++++++++
 .../src/components/Grid/GridCellHueHeader.tsx |  18 ++-
 .../Grid/GridCellLevelHeader.module.css       |  25 ++++
 .../components/Grid/GridCellLevelHeader.tsx   |  70 ++++++----
 .../src/components/Grid/GridLeftTopCell.tsx   |  43 ++++--
 packages/core/src/components/Icon/MFlask.tsx  |  14 ++
 packages/core/src/createApp.tsx               |  11 +-
 packages/core/src/levelStepsPresets.ts        |  56 ++++++++
 packages/core/src/schemas/brand.ts            |   7 +
 packages/core/src/schemas/settings.ts         |   9 ++
 packages/core/src/stores/colors.ts            |  71 +++++++++-
 packages/core/src/stores/config.ts            |  13 ++
 packages/core/src/stores/settings.ts          | 127 +++++++++++++++++-
 packages/core/src/types.ts                    |   1 +
 .../core/src/utils/colors/calculateApcach.ts  |   2 +-
 .../core/src/utils/colors/calculateColors.ts  |   4 +-
 .../core/src/utils/colors/hexToHueAngle.ts    |  30 +++++
 packages/core/src/utils/colors/types.ts       |   2 +-
 19 files changed, 541 insertions(+), 45 deletions(-)
 create mode 100644 packages/core/src/components/BetaMenu/BetaMenu.module.css
 create mode 100644 packages/core/src/components/BetaMenu/BetaMenu.tsx
 create mode 100644 packages/core/src/components/Icon/MFlask.tsx
 create mode 100644 packages/core/src/levelStepsPresets.ts
 create mode 100644 packages/core/src/utils/colors/hexToHueAngle.ts

diff --git a/packages/core/src/components/BetaMenu/BetaMenu.module.css b/packages/core/src/components/BetaMenu/BetaMenu.module.css
new file mode 100644
index 0000000..466816e
--- /dev/null
+++ b/packages/core/src/components/BetaMenu/BetaMenu.module.css
@@ -0,0 +1,20 @@
+.button {
+  /* No positioning needed - will be positioned by parent FloatingActions */
+}
+
+.iconContainer {
+  display: flex;
+  gap: calc(var(--spacing) * 0.5);
+  align-items: center;
+}
+
+.flaskIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.caretIcon {
+  width: 12px;
+  height: 12px;
+  opacity: 0.7;
+}
diff --git a/packages/core/src/components/BetaMenu/BetaMenu.tsx b/packages/core/src/components/BetaMenu/BetaMenu.tsx
new file mode 100644
index 0000000..367aa92
--- /dev/null
+++ b/packages/core/src/components/BetaMenu/BetaMenu.tsx
@@ -0,0 +1,63 @@
+import { useSubscribe } from "@spred/react";
+
+import { Button } from "@core/components/Button/Button";
+import { MFlask } from "@core/components/Icon/MFlask";
+import { MTriangleDown } from "@core/components/Icon/MTriangleDown";
+import { Menu } from "@core/components/Menu/Menu";
+import { MenuItemButton } from "@core/components/Menu/MenuItemButton";
+import { MenuItemGroup } from "@core/components/Menu/MenuItemGroup";
+import { MenuItemSeparator } from "@core/components/Menu/MenuItemSeparator";
+import { levelStepsPresets } from "@core/levelStepsPresets";
+import { LEVEL_STEPS_PRESETS, type LevelStepsPreset } from "@core/schemas/brand";
+import { resetToInitialState } from "@core/stores/config";
+import {
+  applyLevelStepsPreset,
+  distributeContrastEvenly,
+  levelStepsPresetStore,
+} from "@core/stores/settings";
+
+import styles from "./BetaMenu.module.css";
+
+export function BetaMenu() {
+  const currentPreset = useSubscribe(levelStepsPresetStore.$lastValidValue);
+
+  return (
+    <Menu
+      renderTrigger={(triggerProps) => (
+        <Button
+          size="m"
+          kind="floating"
+          {...triggerProps}
+          aria-label="Beta features"
+          className={styles.button}
+        >
+          <span className={styles.iconContainer}>
+            <MFlask className={styles.flaskIcon} />
+            <MTriangleDown className={styles.caretIcon} />
+          </span>
+        </Button>
+      )}
+    >
+      <MenuItemGroup id="level-steps" label="Palette Range Steps">
+        {LEVEL_STEPS_PRESETS.map((preset) => (
+          <MenuItemButton
+            key={preset}
+            value={preset}
+            data-current={currentPreset === preset ? "" : undefined}
+            onClick={() => applyLevelStepsPreset(preset as LevelStepsPreset)}
+          >
+            {levelStepsPresets[preset].label}
+          </MenuItemButton>
+        ))}
+      </MenuItemGroup>
+      <MenuItemSeparator />
+      <MenuItemButton value="distribute-contrast" onClick={() => distributeContrastEvenly()}>
+        Distribute Contrast Evenly
+      </MenuItemButton>
+      <MenuItemSeparator />
+      <MenuItemButton value="reset-initial" onClick={resetToInitialState}>
+        Reset to Initial State
+      </MenuItemButton>
+    </Menu>
+  );
+}
diff --git a/packages/core/src/components/Grid/GridCellHueHeader.tsx b/packages/core/src/components/Grid/GridCellHueHeader.tsx
index 3c76d34..a790795 100644
--- a/packages/core/src/components/Grid/GridCellHueHeader.tsx
+++ b/packages/core/src/components/Grid/GridCellHueHeader.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useRef } from "react";
+import { type ClipboardEvent, memo, useCallback, useRef } from "react";
 
 import { useSubscribe } from "@spred/react";
 
@@ -19,6 +19,7 @@ import {
 } from "@core/stores/colors";
 import { $bgColorModeLeft } from "@core/stores/settings";
 import type { HueId } from "@core/types";
+import { hexToHueAngle } from "@core/utils/colors/hexToHueAngle";
 import type { AnyProps } from "@core/utils/react/types";
 
 import { DATA_ATTR_CELL_HUE_ID } from "./constants";
@@ -70,6 +71,20 @@ const NameInput = memo(function NameInput({ hueId }: HueComponentProps) {
     }
   });
 
+  const handlePaste = useCallback(
+    (e: ClipboardEvent<HTMLInputElement>) => {
+      const pastedText = e.clipboardData.getData("text");
+      const hueAngle = hexToHueAngle(pastedText);
+
+      if (hueAngle !== null) {
+        e.preventDefault();
+        updateHueAngle(hueId, String(Math.round(hueAngle)));
+        resetHueName(hueId);
+      }
+    },
+    [hueId],
+  );
+
   return (
     <HueNameInput
       ref={inputRef}
@@ -88,6 +103,7 @@ const NameInput = memo(function NameInput({ hueId }: HueComponentProps) {
           resetHueName(hueId);
         }
       }}
+      onPaste={handlePaste}
       slotEnd={
         showResetNameButton && (
           <Button
diff --git a/packages/core/src/components/Grid/GridCellLevelHeader.module.css b/packages/core/src/components/Grid/GridCellLevelHeader.module.css
index 1f3c729..2a5e714 100644
--- a/packages/core/src/components/Grid/GridCellLevelHeader.module.css
+++ b/packages/core/src/components/Grid/GridCellLevelHeader.module.css
@@ -61,3 +61,28 @@
     opacity: 1;
   }
 }
+
+.chromaSection {
+  margin-block-start: calc(var(--spacing) * 1.5);
+
+  &:has(.copyChromaButton:hover) .inputSecondary {
+    --input-color: var(--color-primary);
+  }
+}
+
+.copyChromaButton {
+  inline-size: 100%;
+  margin-block-start: calc(var(--spacing) * 0.5);
+  opacity: 0;
+  transition: opacity 0.2s;
+
+  .cell:hover &,
+  .cell:has(:focus-visible) & {
+    opacity: 0.6;
+  }
+
+  .cell:hover &:hover,
+  .cell:has(:focus-visible) &:hover {
+    opacity: 1;
+  }
+}
diff --git a/packages/core/src/components/Grid/GridCellLevelHeader.tsx b/packages/core/src/components/Grid/GridCellLevelHeader.tsx
index 4e7f9c5..d481ee8 100644
--- a/packages/core/src/components/Grid/GridCellLevelHeader.tsx
+++ b/packages/core/src/components/Grid/GridCellLevelHeader.tsx
@@ -19,8 +19,11 @@ import {
 } from "@core/schemas/color";
 import {
   $levelIds,
+  copyChromaCapToAllLevels,
   getLevel,
   insertLevel,
+  startChromaCopyPreview,
+  stopChromaCopyPreview,
   updateLevelchromaCap,
   updateLevelContrast,
   updateLevelName,
@@ -174,32 +177,47 @@ const ChromaInput = memo(function ChromaInput({ levelId }: LevelComponentProps)
   const chromaPlaceholder = useSubscribe($chromaPlaceholder);
 
   return (
-    <LevelChromaInput
-      id={`level-chroma-${levelId}`}
-      className={styles.inputSecondary}
-      size="m"
-      kind="ghost"
-      inputMode="decimal"
-      style={
-        {
-          "--input-label-color": "var(--color-secondary)",
-          "--input-label-fw": 400,
-        } as CSSProperties
-      }
-      min={CHROMA_MIN}
-      max={CHROMA_MAX}
-      precision={CHROMA_INPUT_PRECISION}
-      baseValue={chroma}
-      step={0.001}
-      label={chromaLabel}
-      aria-label={LABEL_CHROMA}
-      showLabel={chromaCap ? "always" : "hover"}
-      placeholder={chromaPlaceholder}
-      value={chromaCap ?? ""}
-      title={HINT_CHROMA}
-      error={error}
-      onChange={(e) => updateLevelchromaCap(levelId, e.target.value || null)}
-    />
+    <div className={styles.chromaSection}>
+      <LevelChromaInput
+        id={`level-chroma-${levelId}`}
+        className={styles.inputSecondary}
+        size="m"
+        kind="ghost"
+        inputMode="decimal"
+        style={
+          {
+            "--input-label-color": "var(--color-secondary)",
+            "--input-label-fw": 400,
+          } as CSSProperties
+        }
+        min={CHROMA_MIN}
+        max={CHROMA_MAX}
+        precision={CHROMA_INPUT_PRECISION}
+        baseValue={chroma}
+        step={0.001}
+        label={chromaLabel}
+        aria-label={LABEL_CHROMA}
+        showLabel={chromaCap ? "always" : "hover"}
+        placeholder={chromaPlaceholder}
+        value={chromaCap ?? ""}
+        title={HINT_CHROMA}
+        error={error}
+        onChange={(e) => updateLevelchromaCap(levelId, e.target.value || null)}
+      />
+      <Button
+        size="xs"
+        kind="ghost"
+        className={styles.copyChromaButton}
+        onClick={() => copyChromaCapToAllLevels(levelId)}
+        onMouseEnter={() => startChromaCopyPreview(levelId)}
+        onMouseLeave={stopChromaCopyPreview}
+        title={
+          chromaCap ? "Copy this cap to all other levels" : "Copy this chroma to all other levels"
+        }
+      >
+        Apply
+      </Button>
+    </div>
   );
 });
 
diff --git a/packages/core/src/components/Grid/GridLeftTopCell.tsx b/packages/core/src/components/Grid/GridLeftTopCell.tsx
index f86619d..907d9e7 100644
--- a/packages/core/src/components/Grid/GridLeftTopCell.tsx
+++ b/packages/core/src/components/Grid/GridLeftTopCell.tsx
@@ -4,9 +4,12 @@ import { useSubscribe } from "@spred/react";
 import clsx from "clsx";
 
 import { Button } from "@core/components/Button/Button";
-import { Select } from "@core/components/Select/Select";
+import { Menu } from "@core/components/Menu/Menu";
+import { MenuItemButton } from "@core/components/Menu/MenuItemButton";
+import { MenuItemSeparator } from "@core/components/Menu/MenuItemSeparator";
 import { Text } from "@core/components/Text/Text";
-import { parseChromaMode } from "@core/schemas/settings";
+import { ChromaMode } from "@core/schemas/brand";
+import { $isAnyChromaCapSet, resetAllChroma } from "@core/stores/colors";
 import {
   chromaModeStore,
   colorSpaceStore,
@@ -43,6 +46,7 @@ export const GridLeftTopCell = memo(function GridLeftTopCell() {
   const chromaModeValue = useSubscribe(chromaModeStore.$lastValidValue);
   const colorSpace = useSubscribe(colorSpaceStore.$lastValidValue);
   const isColorSpaceLocked = useSubscribe($isColorSpaceLocked);
+  const hasChromaCaps = useSubscribe($isAnyChromaCapSet);
 
   return (
     <GridCell bgColorType="left" bgMode={bgMode} className={styles.cell}>
@@ -79,13 +83,34 @@ export const GridLeftTopCell = memo(function GridLeftTopCell() {
             colors
           </Text>
         </div>
-        <Select
-          size="xs"
-          value={chromaModeValue}
-          options={CHROMA_OPTIONS}
-          onChange={(e) => updateChromaMode(parseChromaMode(e.target.value))}
-          title={LABEL_CHROMA_MODE}
-        />
+        <Menu
+          renderTrigger={(triggerProps) => (
+            <Button size="xs" {...triggerProps} title={LABEL_CHROMA_MODE}>
+              {CHROMA_OPTIONS.find((opt) => opt.value === chromaModeValue)?.label}
+            </Button>
+          )}
+        >
+          <>
+            {CHROMA_OPTIONS.map((option) => (
+              <MenuItemButton
+                key={option.value}
+                value={option.value}
+                data-current={chromaModeValue === option.value ? "" : undefined}
+                onClick={() => updateChromaMode(ChromaMode(option.value as "even" | "max"))}
+              >
+                {option.label}
+              </MenuItemButton>
+            ))}
+            {hasChromaCaps && (
+              <>
+                <MenuItemSeparator />
+                <MenuItemButton value="reset-chroma" onClick={resetAllChroma}>
+                  Reset changes
+                </MenuItemButton>
+              </>
+            )}
+          </>
+        </Menu>
       </div>
     </GridCell>
   );
diff --git a/packages/core/src/components/Icon/MFlask.tsx b/packages/core/src/components/Icon/MFlask.tsx
new file mode 100644
index 0000000..562f257
--- /dev/null
+++ b/packages/core/src/components/Icon/MFlask.tsx
@@ -0,0 +1,14 @@
+import type { SVGProps } from "react";
+
+export type MFlaskProps = SVGProps<SVGSVGElement>;
+
+export function MFlask(props: MFlaskProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" {...props}>
+      <path
+        fill="currentColor"
+        d="M6.5 2h3v3.5l3 4.5c.5.75.5 1.5 0 2s-1.25.5-2 .5h-5c-.75 0-1.5 0-2-.5s-.5-1.25 0-2l3-4.5V2Zm1 0v4l-2.5 3.75c-.25.375-.25.75 0 1s.625.25 1 .25h4c.375 0 .75 0 1-.25s.25-.625 0-1L8.5 6V2h-1Z"
+      />
+    </svg>
+  );
+}
diff --git a/packages/core/src/createApp.tsx b/packages/core/src/createApp.tsx
index fe9d372..91ada30 100644
--- a/packages/core/src/createApp.tsx
+++ b/packages/core/src/createApp.tsx
@@ -3,6 +3,7 @@ import { StrictMode, type ReactNode } from "react";
 import { batch } from "@spred/core";
 import { createRoot } from "react-dom/client";
 
+import { BetaMenu } from "./components/BetaMenu/BetaMenu";
 import { FloatingActions } from "./components/FloatingActions/FloatingActions";
 import { Grid, type GridBanner } from "./components/Grid/Grid";
 import { MainContainer } from "./components/MainContainer/MainContainer";
@@ -20,12 +21,13 @@ type AppOptions = {
     afterGridContent?: ReactNode;
   };
   precalculateColors?: boolean;
+  enableBetaMenu?: boolean;
 };
 
 export function createApp(
   element: HTMLElement | null,
   dependencies: AppDependencies,
-  { customUI, precalculateColors }: AppOptions,
+  { customUI, precalculateColors, enableBetaMenu = true }: AppOptions,
 ) {
   invariant(element, "Mount element not found");
 
@@ -47,7 +49,12 @@ export function createApp(
       <DependenciesContext.Provider value={dependencies}>
         <MainContainer>
           <Grid banner={customUI?.gridBanner} />
-          {customUI?.actions && <FloatingActions>{customUI.actions}</FloatingActions>}
+          {(enableBetaMenu || customUI?.actions) && (
+            <FloatingActions>
+              {enableBetaMenu && <BetaMenu />}
+              {customUI?.actions}
+            </FloatingActions>
+          )}
           {customUI?.afterGridContent}
         </MainContainer>
       </DependenciesContext.Provider>
diff --git a/packages/core/src/levelStepsPresets.ts b/packages/core/src/levelStepsPresets.ts
new file mode 100644
index 0000000..692c382
--- /dev/null
+++ b/packages/core/src/levelStepsPresets.ts
@@ -0,0 +1,56 @@
+export const levelStepsPresets = {
+  default: {
+    label: "Default (9 steps: 100-900)",
+    steps: [
+      { name: "100", contrast: 100, chroma: 0 },
+      { name: "200", contrast: 90, chroma: 0 },
+      { name: "300", contrast: 77, chroma: 0 },
+      { name: "400", contrast: 65, chroma: 0 },
+      { name: "500", contrast: 51, chroma: 0 },
+      { name: "600", contrast: 65, chroma: 0 },
+      { name: "700", contrast: 77, chroma: 0 },
+      { name: "800", contrast: 90, chroma: 0 },
+      { name: "900", contrast: 100, chroma: 0 },
+    ],
+  },
+  extended: {
+    label: "Extended (11 steps: 50-950)",
+    steps: [
+      { name: "50", contrast: 106, chroma: 0 },
+      { name: "100", contrast: 100, chroma: 0 },
+      { name: "200", contrast: 90, chroma: 0 },
+      { name: "300", contrast: 77, chroma: 0 },
+      { name: "400", contrast: 65, chroma: 0 },
+      { name: "500", contrast: 51, chroma: 0 },
+      { name: "600", contrast: 65, chroma: 0 },
+      { name: "700", contrast: 77, chroma: 0 },
+      { name: "800", contrast: 90, chroma: 0 },
+      { name: "900", contrast: 100, chroma: 0 },
+      { name: "950", contrast: 106, chroma: 0 },
+    ],
+  },
+  minimal: {
+    label: "Minimal (5 steps: 100-900)",
+    steps: [
+      { name: "100", contrast: 100, chroma: 0 },
+      { name: "300", contrast: 77, chroma: 0 },
+      { name: "500", contrast: 51, chroma: 0 },
+      { name: "700", contrast: 77, chroma: 0 },
+      { name: "900", contrast: 100, chroma: 0 },
+    ],
+  },
+  compact: {
+    label: "Compact (7 steps: 200-800)",
+    steps: [
+      { name: "200", contrast: 90, chroma: 0 },
+      { name: "300", contrast: 77, chroma: 0 },
+      { name: "400", contrast: 65, chroma: 0 },
+      { name: "500", contrast: 51, chroma: 0 },
+      { name: "600", contrast: 65, chroma: 0 },
+      { name: "700", contrast: 77, chroma: 0 },
+      { name: "800", contrast: 90, chroma: 0 },
+    ],
+  },
+} as const;
+
+export type LevelStepsPreset = keyof typeof levelStepsPresets;
diff --git a/packages/core/src/schemas/brand.ts b/packages/core/src/schemas/brand.ts
index 1e8fe7a..6fbea9b 100644
--- a/packages/core/src/schemas/brand.ts
+++ b/packages/core/src/schemas/brand.ts
@@ -58,3 +58,10 @@ export type BgRightStart = Brand<typeof BgRightStart>;
 export const CONTRAST_MODELS = ["apca", "wcag"] as const;
 export const ContrastModel = createBrand<(typeof CONTRAST_MODELS)[number], "ContrastModel">;
 export type ContrastModel = Brand<typeof ContrastModel>;
+
+export const LEVEL_STEPS_PRESETS = ["minimal", "compact", "default", "extended"] as const;
+export const LevelStepsPreset = createBrand<
+  (typeof LEVEL_STEPS_PRESETS)[number],
+  "LevelStepsPreset"
+>;
+export type LevelStepsPreset = Brand<typeof LevelStepsPreset>;
diff --git a/packages/core/src/schemas/settings.ts b/packages/core/src/schemas/settings.ts
index 38dfdd2..bb08224 100644
--- a/packages/core/src/schemas/settings.ts
+++ b/packages/core/src/schemas/settings.ts
@@ -10,6 +10,8 @@ import {
   ContrastModel,
   DIRECTION_MODES,
   DirectionMode,
+  LEVEL_STEPS_PRESETS,
+  LevelStepsPreset,
 } from "./brand";
 
 export const chromaModeSchema = v.pipe(
@@ -40,3 +42,10 @@ export const directionModeSchema = v.pipe(
   v.transform(DirectionMode),
 );
 export const parseDirectionMode = (value: string) => v.parse(directionModeSchema, value);
+
+export const levelStepsPresetSchema = v.pipe(
+  v.string(),
+  v.picklist(LEVEL_STEPS_PRESETS),
+  v.transform(LevelStepsPreset),
+);
+export const parseLevelStepsPreset = (value: string) => v.parse(levelStepsPresetSchema, value);
diff --git a/packages/core/src/stores/colors.ts b/packages/core/src/stores/colors.ts
index 4a093b3..1c45e13 100644
--- a/packages/core/src/stores/colors.ts
+++ b/packages/core/src/stores/colors.ts
@@ -158,16 +158,27 @@ function upsertColor(levelId: LevelId, hueId: HueId, color: ColorCellData) {
 }
 
 function collectColorCalculationData(recalcOnlyLevels?: LevelId[]): GenerateColorsPayload {
+  const previewSourceLevelId = $chromaPreviewSourceLevel.value;
+
   return {
     directionMode: directionModeStore.$lastValidValue.value,
     contrastModel: contrastModelStore.$lastValidValue.value,
     levels: $levelIds.value.map((id) => {
       const level = getLevel(id);
+      let chromaCap = level.chromaCap.$lastValidValue.value;
+
+      // Use preview chroma for all levels except the source level during preview
+      if (previewSourceLevelId && id !== previewSourceLevelId) {
+        const sourceLevel = getLevel(previewSourceLevelId);
+        const sourceChromaCap = sourceLevel.chromaCap.$lastValidValue.value;
+        const previewChromaValue = sourceChromaCap ?? sourceLevel.chroma.$lastValidValue.value;
+        chromaCap = previewChromaValue;
+      }
 
       return {
         id,
         contrast: level.contrast.$lastValidValue.value,
-        chromaCap: level.chromaCap.$lastValidValue.value,
+        chromaCap,
       };
     }),
     recalcOnlyLevels,
@@ -278,6 +289,64 @@ export function resetAllChroma() {
   requestColorsRecalculation();
 }
 
+export function copyChromaFromHue(hueId: HueId) {
+  const levelIds = $levelIds.value;
+
+  batch(() => {
+    for (const levelId of levelIds) {
+      const color = getColor$(levelId, hueId);
+      const chromaValue = color.value.c;
+      const level = getLevel(levelId);
+      level.chromaCap.$raw.set(chromaValue);
+    }
+  });
+  requestColorsRecalculation();
+}
+
+export function copyChromaCapToAllLevels(sourceLevelId: LevelId) {
+  const sourceLevel = getLevel(sourceLevelId);
+  const sourceChromaCap = sourceLevel.chromaCap.$raw.value;
+
+  // Use chromaCap if set, otherwise use the calculated chroma value
+  const chromaValue = sourceChromaCap ?? sourceLevel.chroma.$lastValidValue.value;
+
+  // Round to 3 decimal places to match the input precision
+  const roundedChromaValue = Number.parseFloat(Number(chromaValue).toFixed(3));
+
+  const levelIds = $levelIds.value;
+
+  batch(() => {
+    for (const levelId of levelIds) {
+      if (levelId === sourceLevelId) continue;
+      const level = getLevel(levelId);
+      level.chromaCap.$raw.set(roundedChromaValue);
+    }
+  });
+  requestColorsRecalculation();
+}
+
+// Preview chroma copy
+export const $chromaPreviewSourceLevel = signal<LevelId | null>(null);
+
+const executePreviewRecalculation = debounce(
+  () => {
+    requestColorsRecalculation.cancel();
+    workerChannel.emit("generate:colors", collectColorCalculationData());
+  },
+  50,
+  { leading: true, trailing: true },
+);
+
+export function startChromaCopyPreview(sourceLevelId: LevelId) {
+  $chromaPreviewSourceLevel.set(sourceLevelId);
+  executePreviewRecalculation();
+}
+
+export function stopChromaCopyPreview() {
+  $chromaPreviewSourceLevel.set(null);
+  executePreviewRecalculation();
+}
+
 // Hue methods
 export const insertHue = getInsertMethod({
   main: huesStore,
diff --git a/packages/core/src/stores/config.ts b/packages/core/src/stores/config.ts
index 79ae5a9..9e99f76 100644
--- a/packages/core/src/stores/config.ts
+++ b/packages/core/src/stores/config.ts
@@ -205,3 +205,16 @@ export function downloadConfigTarget(type: ExportTarget) {
     data: targetConfig.getFileData(),
   });
 }
+
+export function resetToInitialState() {
+  updateConfig(parseExportConfig(defaultConfig));
+}
+
+export function resetToEmptyState() {
+  const emptyConfigRaw = {
+    levels: [...defaultConfig.levels],
+    hues: [],
+    settings: { ...defaultConfig.settings },
+  };
+  updateConfig(parseExportConfig(emptyConfigRaw));
+}
diff --git a/packages/core/src/stores/settings.ts b/packages/core/src/stores/settings.ts
index c8081c9..7d77f0e 100644
--- a/packages/core/src/stores/settings.ts
+++ b/packages/core/src/stores/settings.ts
@@ -1,12 +1,14 @@
 import { batch, signal } from "@spred/core";
 
 import { defaultConfig } from "@core/defaultConfig";
+import { levelStepsPresets } from "@core/levelStepsPresets";
 import { colorStringSchema } from "@core/schemas/color";
 import {
   chromaModeSchema,
   colorSpaceSchema,
   contrastModelSchema,
   directionModeSchema,
+  levelStepsPresetSchema,
 } from "@core/schemas/settings";
 import {
   BgRightStart,
@@ -15,7 +17,10 @@ import {
   ColorString,
   ContrastModel,
   DirectionMode,
+  LevelChroma,
   LevelContrast,
+  LevelName,
+  LevelStepsPreset,
 } from "@core/types";
 import { apcaToWcag } from "@core/utils/colors/apcaToWcag";
 import { getBgMode } from "@core/utils/colors/getBgMode";
@@ -23,12 +28,19 @@ import { wcagToApca } from "@core/utils/colors/wcagToApca";
 import { validationStore } from "@core/utils/stores/validationStore";
 
 import {
+  $hueIds,
   $levelIds,
   $levelsCount,
+  copyChromaFromHue,
+  getHue,
   levels,
+  overwriteLevels,
+  pregenerateFallbackColorsMap,
   requestColorsRecalculation,
   requestColorsRecalculationWithLevelsAccumulation,
+  resetAllChroma,
 } from "./colors";
+import { getLevelStore } from "./utils";
 import { getBgValueLeft, getBgValueRight, isSingleBgLeft, isSingleBgRight } from "./utils/bg";
 
 export const contrastModelStore = validationStore(
@@ -144,7 +156,7 @@ export function toggleColorSpace() {
 
 export function updateChromaMode(mode: ChromaMode) {
   chromaModeStore.$raw.set(mode);
-  requestColorsRecalculation();
+  resetAllChroma();
 }
 
 export function updateBgColorLeft(color: ColorString) {
@@ -195,3 +207,116 @@ export function enableDualBg() {
 
   updateBgRightStart(BgRightStart(Math.floor(levelsCount / 2)));
 }
+
+export const levelStepsPresetStore = validationStore(
+  LevelStepsPreset("default"),
+  levelStepsPresetSchema,
+);
+
+export function applyLevelStepsPreset(preset: LevelStepsPreset) {
+  const presetData = levelStepsPresets[preset as keyof typeof levelStepsPresets];
+  const oldLevelIds = $levelIds.value;
+  const oldLevelsCount = oldLevelIds.length;
+
+  // Capture existing contrast values by position
+  const existingContrasts = oldLevelIds.map((id) => {
+    const level = levels.get(id);
+    return level ? level.contrast.$lastValidValue.value : null;
+  });
+
+  const newLevels = presetData.steps.map(
+    (step: { name: string; contrast: number; chroma: number }, index: number) => {
+      // Try to preserve contrast value from the same relative position
+      // Map old positions to new positions proportionally
+      let preservedContrast: number | null = null;
+      if (oldLevelsCount > 0) {
+        const oldIndex =
+          oldLevelsCount === 1
+            ? 0
+            : Math.round((index / (presetData.steps.length - 1)) * (oldLevelsCount - 1));
+        preservedContrast = existingContrasts[oldIndex] ?? null;
+      }
+
+      return getLevelStore({
+        name: LevelName(step.name),
+        contrast: LevelContrast(preservedContrast ?? step.contrast),
+        chroma: LevelChroma(step.chroma),
+      });
+    },
+  );
+
+  const newLevelsCount = newLevels.length;
+  const oldBgRightStart = $bgRightStart.value;
+
+  // Calculate proportional bgRightStart for new levels count
+  const proportionalBgRightStart =
+    oldLevelsCount > 0
+      ? Math.round((oldBgRightStart / oldLevelsCount) * newLevelsCount)
+      : Math.floor(newLevelsCount / 2);
+  const newBgRightStart = BgRightStart(
+    Math.max(0, Math.min(newLevelsCount, proportionalBgRightStart)),
+  );
+
+  batch(() => {
+    levelStepsPresetStore.$raw.set(preset);
+    overwriteLevels(newLevels);
+    $bgRightStart.set(newBgRightStart);
+
+    // Clear and regenerate colors map with new level IDs
+    const newLevelIds = newLevels.map((level) => level.id);
+    pregenerateFallbackColorsMap(newLevelIds, $hueIds.value);
+  });
+
+  requestColorsRecalculation();
+}
+
+export function distributeContrastEvenly() {
+  const levelIds = $levelIds.value;
+  const levelCount = levelIds.length;
+
+  // Need at least 3 levels to distribute (keep first and last, distribute middle)
+  if (levelCount < 3) return;
+
+  const contrastModel = contrastModelStore.$lastValidValue.value;
+  const firstLevelId = levelIds[0];
+  const lastLevelId = levelIds[levelCount - 1];
+
+  if (!firstLevelId || !lastLevelId) return;
+
+  const firstLevel = levels.get(firstLevelId);
+  const lastLevel = levels.get(lastLevelId);
+
+  if (!firstLevel || !lastLevel) return;
+
+  // Get current contrast values from first and last levels
+  const minContrast = firstLevel.contrast.$lastValidValue.value;
+  const maxContrast = lastLevel.contrast.$lastValidValue.value;
+
+  // Distribute contrast linearly between first and last, keeping them unchanged
+  batch(() => {
+    for (const [index, levelId] of levelIds.entries()) {
+      // Skip first and last levels
+      if (index === 0 || index === levelCount - 1) continue;
+
+      const level = levels.get(levelId);
+      if (!level) continue;
+
+      // Calculate position from 0 (first) to 1 (last)
+      const normalizedPosition = index / (levelCount - 1);
+
+      // Linear distribution from first to last contrast
+      const contrastValue = minContrast + normalizedPosition * (maxContrast - minContrast);
+
+      // Round APCA to whole numbers, WCAG to 1 decimal place
+      const roundedValue =
+        contrastModel === "apca" ? Math.round(contrastValue) : Math.round(contrastValue * 10) / 10;
+
+      level.contrast.$raw.set(LevelContrast(roundedValue));
+    }
+  });
+
+  requestColorsRecalculation();
+}
+
+// Re-export chroma utilities
+export { copyChromaFromHue, $hueIds, getHue };
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 5a9dea8..07fd7ce 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -31,6 +31,7 @@ export {
   LevelId,
   LevelIndex,
   LevelName,
+  LevelStepsPreset,
   LightnessLevel,
 } from "@core/schemas/brand";
 
diff --git a/packages/core/src/utils/colors/calculateApcach.ts b/packages/core/src/utils/colors/calculateApcach.ts
index 7c38839..b787ebc 100644
--- a/packages/core/src/utils/colors/calculateApcach.ts
+++ b/packages/core/src/utils/colors/calculateApcach.ts
@@ -13,7 +13,7 @@ export function calculateApcach({
   hueAngle,
 }: ColorCalculationOptions): Apcach {
   const method = directionMode === "fgToBg" ? crToBg : crToFg;
-  const bg = method(toColor, contrastLevel, contrastModel, searchDirection);
+  const bg = method(toColor, contrastLevel, contrastModel, searchDirection as "lighter" | "darker");
 
   return apcach(bg, chroma, hueAngle, 100, colorSpace);
 }
diff --git a/packages/core/src/utils/colors/calculateColors.ts b/packages/core/src/utils/colors/calculateColors.ts
index b7168cb..b1f1b0b 100644
--- a/packages/core/src/utils/colors/calculateColors.ts
+++ b/packages/core/src/utils/colors/calculateColors.ts
@@ -18,7 +18,6 @@ import {
 import { ensureNonNullable } from "@core/utils/assertions/ensureNonNullable";
 
 import { calculateColorCell } from "./calculateColorCell";
-import { getBgMode } from "./getBgMode";
 import { maxCommonChroma } from "./maxCommonChroma";
 
 export type GenerateColorsPayload = {
@@ -70,8 +69,7 @@ export function calculateColors(
   for (const [levelIndex, level] of levels.entries()) {
     const isBgLeft = bgRightStart > levelIndex;
     const toColor = isBgLeft ? bgColorLeft : bgColorRight;
-    const bgMode = isBgLeft ? getBgMode(bgColorLeft) : getBgMode(bgColorRight);
-    const searchDirection = bgMode === "dark" ? "lighter" : "darker";
+    const searchDirection = "auto";
 
     const commonApcacheOptions = {
       colorSpace,
diff --git a/packages/core/src/utils/colors/hexToHueAngle.ts b/packages/core/src/utils/colors/hexToHueAngle.ts
new file mode 100644
index 0000000..21b2eeb
--- /dev/null
+++ b/packages/core/src/utils/colors/hexToHueAngle.ts
@@ -0,0 +1,30 @@
+import { toOklch } from "./toOklch";
+
+/**
+ * Parses a hex color string and returns its hue angle in OKLch color space.
+ * Accepts hex colors with or without # prefix.
+ * Returns null if the input is not a valid hex color.
+ */
+export function hexToHueAngle(input: string): number | null {
+  // Remove whitespace
+  const trimmed = input.trim();
+
+  // Check if it looks like a hex color (with or without #)
+  const hexPattern = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
+  if (!hexPattern.test(trimmed)) {
+    return null;
+  }
+
+  // Add # prefix if missing
+  const hex = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+
+  // Convert to OKLch
+  const oklch = toOklch(hex);
+
+  // Return null if conversion failed or hue is undefined (achromatic)
+  if (oklch?.h === undefined) {
+    return null;
+  }
+
+  return oklch.h;
+}
diff --git a/packages/core/src/utils/colors/types.ts b/packages/core/src/utils/colors/types.ts
index 2ee1609..208a703 100644
--- a/packages/core/src/utils/colors/types.ts
+++ b/packages/core/src/utils/colors/types.ts
@@ -10,7 +10,7 @@ import type {
   ColorSpace,
 } from "@core/types";
 
-export type SearchDirection = "lighter" | "darker";
+export type SearchDirection = "lighter" | "darker" | "auto";
 export type ColorCalculationOptions = {
   directionMode: DirectionMode;
   contrastModel: ContrastModel;

From 9af417ecc75099e1f8c87e1cfcff6819e2d3ed9b Mon Sep 17 00:00:00 2001
From: Yaroslav Lozhkin <yalozhkin@gmail.com>
Date: Fri, 5 Dec 2025 14:49:54 +0400
Subject: [PATCH 2/3] Handle subtle color calculation for low contrast values

Introduce a custom calculateSubtleColor function to generate subtle color variations for contrast values below 8, addressing the limitation where the apcach library returns a single color (white) for very low contrast. Update calculateApcach to use this new function for low contrast scenarios.
---
 .../core/src/utils/colors/calculateApcach.ts  | 19 ++++++
 .../src/utils/colors/calculateSubtleColor.ts  | 65 +++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 packages/core/src/utils/colors/calculateSubtleColor.ts

diff --git a/packages/core/src/utils/colors/calculateApcach.ts b/packages/core/src/utils/colors/calculateApcach.ts
index b787ebc..0c548bb 100644
--- a/packages/core/src/utils/colors/calculateApcach.ts
+++ b/packages/core/src/utils/colors/calculateApcach.ts
@@ -1,7 +1,10 @@
 import { type Apcach, crToBg, crToFg, apcach } from "apcach";
 
+import { calculateSubtleColor } from "./calculateSubtleColor";
 import type { ColorCalculationOptions } from "./types";
 
+const SUBTLE_CONTRAST_THRESHOLD = 8;
+
 export function calculateApcach({
   directionMode,
   contrastModel,
@@ -12,6 +15,22 @@ export function calculateApcach({
   chroma,
   hueAngle,
 }: ColorCalculationOptions): Apcach {
+  // For very low contrast values (< 8), use custom subtle color calculation
+  // because apcach library converts these to a single color (white)
+  if (contrastLevel < SUBTLE_CONTRAST_THRESHOLD) {
+    return calculateSubtleColor(
+      toColor,
+      contrastLevel,
+      hueAngle,
+      chroma,
+      searchDirection as "lighter" | "darker",
+      colorSpace,
+      directionMode,
+      contrastModel,
+    );
+  }
+
+  // Use apcach library for normal contrast values
   const method = directionMode === "fgToBg" ? crToBg : crToFg;
   const bg = method(toColor, contrastLevel, contrastModel, searchDirection as "lighter" | "darker");
 
diff --git a/packages/core/src/utils/colors/calculateSubtleColor.ts b/packages/core/src/utils/colors/calculateSubtleColor.ts
new file mode 100644
index 0000000..e797fcc
--- /dev/null
+++ b/packages/core/src/utils/colors/calculateSubtleColor.ts
@@ -0,0 +1,65 @@
+import type { Apcach, ChromaFunction } from "apcach";
+import { apcach, crToBg, crToFg } from "apcach";
+import { converter, parse } from "culori";
+
+import type {
+  ColorString,
+  ContrastModel,
+  DirectionMode,
+  HueAngle,
+  LevelContrast,
+} from "@core/types";
+
+const SUBTLE_CONTRAST_THRESHOLD = 8;
+
+/**
+ * Calculate subtle color variations for very low contrast values (< 8).
+ * The apcach library converts colors below contrast 8 to a single color (white),
+ * making it impossible to create subtle variations. This function provides
+ * a custom implementation by blending between the base color and what
+ * apcach would produce at the threshold (contrast 8).
+ */
+export function calculateSubtleColor(
+  baseColor: ColorString,
+  targetContrast: LevelContrast,
+  hueAngle: HueAngle,
+  chroma: number | ChromaFunction,
+  searchDirection: "lighter" | "darker",
+  colorSpace: "srgb" | "p3",
+  directionMode: DirectionMode,
+  contrastModel: ContrastModel,
+): Apcach {
+  const parsed = parse(baseColor);
+  if (!parsed) {
+    throw new Error(`Invalid base color: ${baseColor}`);
+  }
+
+  const toOklch = converter("oklch");
+  const baseOklch = toOklch(parsed);
+
+  // Calculate what apcach would return at the threshold (contrast 8)
+  const method = directionMode === "fgToBg" ? crToBg : crToFg;
+  const bgAtThreshold = method(
+    baseColor,
+    SUBTLE_CONTRAST_THRESHOLD,
+    contrastModel,
+    searchDirection,
+  );
+  const apcachAtThreshold = apcach(bgAtThreshold, chroma, hueAngle, 100, colorSpace);
+
+  // Blend factor: 0 at contrast 0, approaching 1 at contrast 8
+  const blendFactor = targetContrast / SUBTLE_CONTRAST_THRESHOLD;
+
+  // Interpolate between base color and threshold color
+  const newLightness = baseOklch.l + (apcachAtThreshold.lightness - baseOklch.l) * blendFactor;
+  const baseChroma = baseOklch.c || 0;
+  const newChroma = baseChroma + (apcachAtThreshold.chroma - baseChroma) * blendFactor;
+
+  return {
+    lightness: newLightness,
+    chroma: newChroma,
+    hue: hueAngle,
+    alpha: 1,
+    colorSpace,
+  };
+}

From 88a3c7c721bcc23a405599ca6509ff60091370ca Mon Sep 17 00:00:00 2001
From: Yaroslav Lozhkin <yalozhkin@gmail.com>
Date: Fri, 5 Dec 2025 15:23:56 +0400
Subject: [PATCH 3/3] Add lock feature for level contrast values

Introduces a 'locked' property to level data, allowing users to prevent automatic changes to contrast values (e.g., during 'distribute evenly'). Updates UI to display a lock button for each level, modifies export/import schemas for backward compatibility, and adjusts logic in settings and stores to respect locked levels during contrast distribution.
---
 .../Grid/GridCellLevelHeader.module.css       | 35 ++++++++
 .../components/Grid/GridCellLevelHeader.tsx   | 75 ++++++++++-------
 packages/core/src/schemas/exportConfig.ts     | 25 ++++--
 packages/core/src/stores/colors.ts            |  5 ++
 packages/core/src/stores/config.ts            |  1 +
 packages/core/src/stores/settings.ts          | 83 +++++++++++++------
 packages/core/src/stores/utils.ts             |  3 +
 packages/core/src/types.ts                    |  1 +
 .../core/src/utils/colors/calculateApcach.ts  |  4 +-
 .../src/utils/colors/calculateSubtleColor.ts  |  2 +-
 10 files changed, 169 insertions(+), 65 deletions(-)

diff --git a/packages/core/src/components/Grid/GridCellLevelHeader.module.css b/packages/core/src/components/Grid/GridCellLevelHeader.module.css
index 2a5e714..7b48c6a 100644
--- a/packages/core/src/components/Grid/GridCellLevelHeader.module.css
+++ b/packages/core/src/components/Grid/GridCellLevelHeader.module.css
@@ -62,6 +62,41 @@
   }
 }
 
+.contrastSection {
+  position: relative;
+}
+
+.lockButton {
+  position: absolute;
+  z-index: 1;
+  inset-block-end: 0;
+  inset-inline-end: 50%;
+  translate: 50% 50%;
+
+  opacity: 0;
+
+  transition: opacity 0.2s;
+
+  .cell:hover &,
+  .cell:has(:focus-visible) & {
+    opacity: 0.3;
+  }
+
+  .cell:hover &:hover,
+  .cell:has(:focus-visible) &:hover {
+    opacity: 0.8;
+  }
+
+  &.locked {
+    color: var(--color-primary);
+    opacity: 1;
+  }
+
+  &.locked:hover {
+    opacity: 1;
+  }
+}
+
 .chromaSection {
   margin-block-start: calc(var(--spacing) * 1.5);
 
diff --git a/packages/core/src/components/Grid/GridCellLevelHeader.tsx b/packages/core/src/components/Grid/GridCellLevelHeader.tsx
index d481ee8..b79dac8 100644
--- a/packages/core/src/components/Grid/GridCellLevelHeader.tsx
+++ b/packages/core/src/components/Grid/GridCellLevelHeader.tsx
@@ -4,6 +4,7 @@ import { useSignal, useSubscribe } from "@spred/react";
 import clsx from "clsx";
 
 import { Button } from "@core/components/Button/Button";
+import { MLock } from "@core/components/Icon/MLock";
 import { MPlus } from "@core/components/Icon/MPlus";
 import { withAutosize } from "@core/components/Input/enhancers/withAutosize";
 import { withNumericIncrementControls } from "@core/components/Input/enhancers/withNumericIncrementControls";
@@ -24,6 +25,7 @@ import {
   insertLevel,
   startChromaCopyPreview,
   stopChromaCopyPreview,
+  toggleLevelLocked,
   updateLevelchromaCap,
   updateLevelContrast,
   updateLevelName,
@@ -120,39 +122,56 @@ const ContrastInput = memo(function ContrastInput({ levelId }: LevelComponentPro
   const contrast = useSubscribe(level.contrast.$raw);
   const error = useSubscribe(level.contrast.$validationError);
   const contrastModel = useSubscribe(contrastModelStore.$lastValidValue);
+  const locked = useSubscribe(level.$locked);
 
   const tintColor = useSubscribe(level.$tintColor);
   const directionMode = useSubscribe(directionModeStore.$lastValidValue);
 
   return (
-    <LevelContrastInput
-      id={`level-contrast-${levelId}`}
-      size="xl"
-      kind="bordered"
-      customization={
-        directionMode === "fgToBg"
-          ? {
-              "--input-color": tintColor.css,
-              "--input-border-color": formatOklch(tintColor, 0.2),
-            }
-          : {
-              "--input-color": bgColorVariable,
-              "--input-border-color": tintColor.css,
-              "--input-bg-color": tintColor.css,
-            }
-      }
-      inputMode={contrastModel === "apca" ? "numeric" : "decimal"}
-      min={CONTRAST_MIN}
-      max={getContrastMaxLevel(contrastModel)}
-      step={getContrastStep(contrastModel)}
-      label={contrastModel.toUpperCase()}
-      showLabel="always"
-      placeholder={PLACEHOLDER_CONTRAST}
-      value={contrast}
-      title={directionMode === "fgToBg" ? HINT_FG_TO_BG_CONTRAST : HINT_BG_TO_FG_CONTRAST}
-      error={error}
-      onChange={(e) => updateLevelContrast(levelId, e.target.value)}
-    />
+    <div className={styles.contrastSection}>
+      <LevelContrastInput
+        id={`level-contrast-${levelId}`}
+        size="xl"
+        kind="bordered"
+        customization={
+          directionMode === "fgToBg"
+            ? {
+                "--input-color": tintColor.css,
+                "--input-border-color": formatOklch(tintColor, 0.2),
+              }
+            : {
+                "--input-color": bgColorVariable,
+                "--input-border-color": tintColor.css,
+                "--input-bg-color": tintColor.css,
+              }
+        }
+        inputMode={contrastModel === "apca" ? "numeric" : "decimal"}
+        min={CONTRAST_MIN}
+        max={getContrastMaxLevel(contrastModel)}
+        step={getContrastStep(contrastModel)}
+        label={contrastModel.toUpperCase()}
+        showLabel="always"
+        placeholder={PLACEHOLDER_CONTRAST}
+        value={contrast}
+        title={directionMode === "fgToBg" ? HINT_FG_TO_BG_CONTRAST : HINT_BG_TO_FG_CONTRAST}
+        error={error}
+        onChange={(e) => updateLevelContrast(levelId, e.target.value)}
+      />
+      <Button
+        size="m"
+        kind="ghost"
+        rounded
+        className={clsx(styles.lockButton, locked && styles.locked)}
+        icon={<MLock />}
+        onClick={() => toggleLevelLocked(levelId)}
+        title={
+          locked
+            ? "Unlock contrast (allow automatic changes)"
+            : "Lock contrast (prevent automatic changes)"
+        }
+        aria-label={locked ? "Unlock contrast" : "Lock contrast"}
+      />
+    </div>
   );
 });
 
diff --git a/packages/core/src/schemas/exportConfig.ts b/packages/core/src/schemas/exportConfig.ts
index 1163279..d426e00 100644
--- a/packages/core/src/schemas/exportConfig.ts
+++ b/packages/core/src/schemas/exportConfig.ts
@@ -30,6 +30,7 @@ export const exportConfigSchema = v.pipe(
         contrast: baseContrastSchema,
         chroma: levelChromaSchema,
         chromaCap: v.optional(levelChromaCapSchema),
+        locked: v.optional(v.boolean()),
       }),
     ),
     hues: v.array(v.object({ name: hueNameSchema, angle: hueAngleSchema })),
@@ -71,8 +72,8 @@ export function parseExportConfig(configString: string | Record<string, unknown>
 export const compactExportConfigSchema = v.pipe(
   v.tuple([
     v.pipe(
-      v.array(v.union([v.string(), v.number(), v.null()])),
-      v.description("Level name, contrast and chroma cap as a plain array"),
+      v.array(v.union([v.string(), v.number(), v.null(), v.boolean()])),
+      v.description("Level name, contrast, chroma cap and locked as a plain array"),
     ),
     v.pipe(
       v.array(v.union([v.string(), v.number()])),
@@ -101,10 +102,11 @@ export function parseCompactExportConfig(value: unknown): CompactExportConfig {
 
 export function toCompactExportConfig(config: ExportConfig): CompactExportConfig {
   return [
-    config.levels.flatMap<string | number | null>((level) => [
+    config.levels.flatMap<string | number | null | boolean>((level) => [
       level.name,
       level.contrast,
       level.chromaCap ?? null,
+      level.locked ?? false,
     ]),
     config.hues.flatMap((hue) => [hue.name, hue.angle]),
     [
@@ -124,12 +126,19 @@ export function toExportConfig(compactConfig: CompactExportConfig): ExportConfig
   const levels: ExportConfig["levels"] = [];
   const hues: ExportConfig["hues"] = [];
 
-  for (let i = 0; i < compactConfig[0].length; i += 3) {
-    const name = v.parse(levelNameSchema, compactConfig[0][i]);
-    const contrast = v.parse(getLevelContrastModel(contrastModel), compactConfig[0][i + 1]);
-    const chromaCap = v.parse(levelChromaCapSchema, compactConfig[0][i + 2]);
+  // Determine step size for backward compatibility
+  // Old format: [name, contrast, chromaCap] = 3 items per level
+  // New format: [name, contrast, chromaCap, locked] = 4 items per level
+  const levelsData = compactConfig[0];
+  const stepSize = levelsData.length % 4 === 0 ? 4 : 3;
 
-    levels.push({ name, contrast, chroma: LevelChroma(0), chromaCap });
+  for (let i = 0; i < levelsData.length; i += stepSize) {
+    const name = v.parse(levelNameSchema, levelsData[i]);
+    const contrast = v.parse(getLevelContrastModel(contrastModel), levelsData[i + 1]);
+    const chromaCap = v.parse(levelChromaCapSchema, levelsData[i + 2]);
+    const locked = stepSize === 4 ? (levelsData[i + 3] as boolean) : undefined;
+
+    levels.push({ name, contrast, chroma: LevelChroma(0), chromaCap, locked });
   }
 
   for (let i = 0; i < compactConfig[1].length; i += 2) {
diff --git a/packages/core/src/stores/colors.ts b/packages/core/src/stores/colors.ts
index 1c45e13..2fb1ea2 100644
--- a/packages/core/src/stores/colors.ts
+++ b/packages/core/src/stores/colors.ts
@@ -279,6 +279,11 @@ export function updateLevelchromaCap(id: LevelId, chroma: string | number | null
   requestColorsRecalculation([id]);
 }
 
+export function toggleLevelLocked(id: LevelId) {
+  const level = getLevel(id);
+  level.$locked.set(!level.$locked.value);
+}
+
 export function resetAllChroma() {
   batch(() => {
     for (const levelId of $levelIds.value) {
diff --git a/packages/core/src/stores/config.ts b/packages/core/src/stores/config.ts
index 9e99f76..5b1455d 100644
--- a/packages/core/src/stores/config.ts
+++ b/packages/core/src/stores/config.ts
@@ -50,6 +50,7 @@ export const $exportConfig = signal<ExportConfig>((get) => {
         contrast: get(level.contrast.$lastValidValue),
         chroma: get(level.chroma.$lastValidValue),
         chromaCap: get(level.chromaCap.$lastValidValue),
+        locked: get(level.$locked),
       };
     }),
     hues: get($hueIds).map((hueId) => {
diff --git a/packages/core/src/stores/settings.ts b/packages/core/src/stores/settings.ts
index 7d77f0e..6a2618b 100644
--- a/packages/core/src/stores/settings.ts
+++ b/packages/core/src/stores/settings.ts
@@ -274,44 +274,77 @@ export function distributeContrastEvenly() {
   const levelIds = $levelIds.value;
   const levelCount = levelIds.length;
 
-  // Need at least 3 levels to distribute (keep first and last, distribute middle)
-  if (levelCount < 3) return;
+  // Need at least 2 levels to distribute
+  if (levelCount < 2) return;
 
   const contrastModel = contrastModelStore.$lastValidValue.value;
-  const firstLevelId = levelIds[0];
-  const lastLevelId = levelIds[levelCount - 1];
 
-  if (!firstLevelId || !lastLevelId) return;
+  // Find all anchor points (locked levels, first, and last)
+  const anchorIndices: number[] = [];
 
-  const firstLevel = levels.get(firstLevelId);
-  const lastLevel = levels.get(lastLevelId);
+  for (const [index, levelId] of levelIds.entries()) {
+    const level = levels.get(levelId);
+    if (!level) continue;
 
-  if (!firstLevel || !lastLevel) return;
+    // First and last are always anchors, plus any locked level
+    const isAnchor = index === 0 || index === levelCount - 1 || level.$locked.value;
 
-  // Get current contrast values from first and last levels
-  const minContrast = firstLevel.contrast.$lastValidValue.value;
-  const maxContrast = lastLevel.contrast.$lastValidValue.value;
+    if (isAnchor) {
+      anchorIndices.push(index);
+    }
+  }
 
-  // Distribute contrast linearly between first and last, keeping them unchanged
+  // Need at least 2 anchors to create segments
+  if (anchorIndices.length < 2) return;
+
+  // Distribute within each segment
   batch(() => {
-    for (const [index, levelId] of levelIds.entries()) {
-      // Skip first and last levels
-      if (index === 0 || index === levelCount - 1) continue;
+    for (let segmentIndex = 0; segmentIndex < anchorIndices.length - 1; segmentIndex++) {
+      const startIndex = anchorIndices[segmentIndex];
+      const endIndex = anchorIndices[segmentIndex + 1];
+
+      if (startIndex === undefined || endIndex === undefined) continue;
+
+      const startLevelId = levelIds[startIndex];
+      const endLevelId = levelIds[endIndex];
+
+      if (!startLevelId || !endLevelId) continue;
+
+      const startLevel = levels.get(startLevelId);
+      const endLevel = levels.get(endLevelId);
 
-      const level = levels.get(levelId);
-      if (!level) continue;
+      if (!startLevel || !endLevel) continue;
 
-      // Calculate position from 0 (first) to 1 (last)
-      const normalizedPosition = index / (levelCount - 1);
+      const startContrast = startLevel.contrast.$lastValidValue.value;
+      const endContrast = endLevel.contrast.$lastValidValue.value;
 
-      // Linear distribution from first to last contrast
-      const contrastValue = minContrast + normalizedPosition * (maxContrast - minContrast);
+      const segmentLength = endIndex - startIndex;
 
-      // Round APCA to whole numbers, WCAG to 1 decimal place
-      const roundedValue =
-        contrastModel === "apca" ? Math.round(contrastValue) : Math.round(contrastValue * 10) / 10;
+      // Distribute levels between anchors (excluding anchors themselves)
+      for (let i = startIndex + 1; i < endIndex; i++) {
+        const levelId = levelIds[i];
+        if (!levelId) continue;
 
-      level.contrast.$raw.set(LevelContrast(roundedValue));
+        const level = levels.get(levelId);
+        if (!level) continue;
+
+        // Skip if this level is locked (shouldn't happen since we're between anchors)
+        if (level.$locked.value) continue;
+
+        // Calculate position within this segment (0 to 1)
+        const normalizedPosition = (i - startIndex) / segmentLength;
+
+        // Linear distribution from start to end contrast
+        const contrastValue = startContrast + normalizedPosition * (endContrast - startContrast);
+
+        // Round APCA to whole numbers, WCAG to 1 decimal place
+        const roundedValue =
+          contrastModel === "apca"
+            ? Math.round(contrastValue)
+            : Math.round(contrastValue * 10) / 10;
+
+        level.contrast.$raw.set(LevelContrast(roundedValue));
+      }
     }
   });
 
diff --git a/packages/core/src/stores/utils.ts b/packages/core/src/stores/utils.ts
index a68fd96..e3e02eb 100644
--- a/packages/core/src/stores/utils.ts
+++ b/packages/core/src/stores/utils.ts
@@ -233,6 +233,7 @@ export type LevelStore = {
   contrast: ValidationStore<string | number, LevelContrast>;
   chroma: ValidationStore<string | number, LevelChroma>;
   chromaCap: ValidationStore<string | number | null, LevelChroma | null>;
+  $locked: WritableSignal<boolean>;
   $tintColor: WritableSignal<ColorLevelTintData>;
 };
 
@@ -251,6 +252,7 @@ export function getLevelStore(data: PartialOptional<LevelData, "tintColor">) {
   const contrast = validationStore(data.contrast, $levelConstrastSchema);
   const chroma = validationStore(data.chroma, levelChromaSchema);
   const chromaCap = validationStore(data.chromaCap ?? null, levelChromaCapSchema);
+  const $locked = signal(data.locked ?? false);
   const $tintColor = signal(data.tintColor ?? FALLBACK_LEVEL_TINT_COLOR);
 
   return {
@@ -259,6 +261,7 @@ export function getLevelStore(data: PartialOptional<LevelData, "tintColor">) {
     contrast,
     chroma,
     chromaCap,
+    $locked,
     $tintColor,
   };
 }
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 07fd7ce..25d0d50 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -40,6 +40,7 @@ export type LevelData = {
   contrast: LevelContrast;
   chroma: LevelChroma;
   chromaCap?: LevelChroma | null; // Before we hadn't this field, so for back compatibility it's optional
+  locked?: boolean; // Prevents automatic contrast changes (e.g., from distribute evenly)
   tintColor: ColorLevelTintData;
 };
 export type Level = { id: LevelId } & LevelData;
diff --git a/packages/core/src/utils/colors/calculateApcach.ts b/packages/core/src/utils/colors/calculateApcach.ts
index 0c548bb..8439fb0 100644
--- a/packages/core/src/utils/colors/calculateApcach.ts
+++ b/packages/core/src/utils/colors/calculateApcach.ts
@@ -1,10 +1,8 @@
 import { type Apcach, crToBg, crToFg, apcach } from "apcach";
 
-import { calculateSubtleColor } from "./calculateSubtleColor";
+import { calculateSubtleColor, SUBTLE_CONTRAST_THRESHOLD } from "./calculateSubtleColor";
 import type { ColorCalculationOptions } from "./types";
 
-const SUBTLE_CONTRAST_THRESHOLD = 8;
-
 export function calculateApcach({
   directionMode,
   contrastModel,
diff --git a/packages/core/src/utils/colors/calculateSubtleColor.ts b/packages/core/src/utils/colors/calculateSubtleColor.ts
index e797fcc..183ce2c 100644
--- a/packages/core/src/utils/colors/calculateSubtleColor.ts
+++ b/packages/core/src/utils/colors/calculateSubtleColor.ts
@@ -10,7 +10,7 @@ import type {
   LevelContrast,
 } from "@core/types";
 
-const SUBTLE_CONTRAST_THRESHOLD = 8;
+export const SUBTLE_CONTRAST_THRESHOLD = 8;
 
 /**
  * Calculate subtle color variations for very low contrast values (< 8).