fix(settings): open settings with reactive color schemes

apps/desktop/src/lib/__tests__/dataGrid/dataGridTypeColorScheme.spec.ts

@@ -1,10 +1,12 @@
 import { readFileSync } from "node:fs";
+import { reactive } from "vue";
 import { describe, expect, it } from "vitest";
 import {
   DATA_GRID_TYPE_COLOR_KEYS,
   DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID,
   DEFAULT_DATA_GRID_TYPE_COLORS_DARK,
   DEFAULT_DATA_GRID_TYPE_COLORS_LIGHT,
+  cloneDataGridTypeColorSchemes,
   dataGridTypeColorCssVar,
   defaultDataGridTypeColors,
   normalizeActiveDataGridTypeColorSchemeId,
@@ -55,6 +57,16 @@ describe("data grid type color keys", () => {
 });
 
 describe("data grid type color normalization", () => {
+  it("clones Vue reactive schemes into detached plain data", () => {
+    const schemes = reactive([scheme("mine", { integer: "#123456" })]);
+
+    const cloned = cloneDataGridTypeColorSchemes(schemes);
+
+    expect(cloned).toEqual(schemes);
+    cloned[0].colors.integer = "#abcdef";
+    expect(schemes[0].colors.integer).toBe("#123456");
+  });
+
   it("keeps valid six-digit hex values", () => {
     expect(normalizeDataGridTypeColors({ ...DEFAULT_DATA_GRID_TYPE_COLORS_LIGHT, integer: "#ABCDEF" }).integer).toBe("#ABCDEF");
   });

apps/desktop/src/lib/dataGrid/dataGridTypeColorScheme.ts

@@ -16,6 +16,18 @@ export const DATA_GRID_TYPE_COLOR_KEYS = DATA_GRID_TYPE_VISUAL_KINDS.filter((kin
 /** Sentinel scheme id meaning "leave the stylesheet defaults alone and follow light/dark". */
 export const DATA_GRID_TYPE_COLOR_SCHEME_AUTO_ID = "auto";
 
+/**
+ * @param schemes Schemes from persisted settings, Vue reactive state, or dialog drafts
+ * @return Plain detached copies safe to keep in another reactive buffer
+ */
+export function cloneDataGridTypeColorSchemes(schemes: readonly DataGridTypeColorScheme[]): DataGridTypeColorScheme[] {
+  return schemes.map((scheme) => ({
+    id: scheme.id,
+    name: scheme.name,
+    colors: { ...scheme.colors },
+  }));
+}
+
 // Keep these in sync with the :root / :root.dark blocks in styles/globals.css.
 // dataGridTypeColorScheme.spec.ts asserts the two stay identical.
 export const DEFAULT_DATA_GRID_TYPE_COLORS_LIGHT: DataGridTypeColors = {