refactor(editor-panel): extract LayerRow and layer crud logic

src/components/md-deck/hooks/deckStore.ts

@@ -1,11 +1,8 @@
 import { createStore } from "solid-js/store";
 import { calculateDimensions } from "./dimensions";
 import { loadCSV, CSV } from "../../utils/csv-loader";
-import {
-  initLayerConfigs,
-  formatLayers,
-  initLayerConfigsForSide,
-} from "./layer-parser";
+import { formatLayers, initLayerConfigsForSide } from "./layer-parser";
+import * as layerCrud from "./layer-crud";
 import type {
   CardData,
   LayerConfig,
@@ -290,53 +287,41 @@ export function createDeckStore(initialSrc: string = ""): DeckStore {
   };
 
   const addLayer = (side: CardSide, prop: string) => {
-    const newLayer: LayerConfig = {
-      prop,
-      visible: true,
-      x1: 1,
-      y1: 1,
-      x2: 2,
-      y2: 2,
-    };
     const configs = getLayerConfigs(side);
-    setLayerConfigs(side, [...configs, newLayer]);
+    setLayerConfigs(side, layerCrud.addLayer(configs, prop));
+    setState({
+      selectedLayer: layerCrud.adjustSelectedLayer(
+        state.selectedLayer,
+        "add",
+        configs.length,
+      ),
+    });
   };
 
   const removeLayer = (side: CardSide, index: number) => {
-    const configs = getLayerConfigs(side);
-    setLayerConfigs(
-      side,
-      configs.filter((_, i) => i !== index),
-    );
-    if (state.selectedLayer === index) {
-      setState({ selectedLayer: null });
-    } else if (
-      state.selectedLayer !== null &&
-      (state.selectedLayer as number) > index
-    ) {
-      setState({ selectedLayer: (state.selectedLayer as number) - 1 });
-    }
+    setLayerConfigs(side, layerCrud.removeLayer(getLayerConfigs(side), index));
+    setState({
+      selectedLayer: layerCrud.adjustSelectedLayer(
+        state.selectedLayer,
+        "remove",
+        index,
+      ),
+    });
   };
 
-  const reorderLayers = (
-    side: CardSide,
-    fromIndex: number,
-    toIndex: number,
-  ) => {
-    const configs = [...getLayerConfigs(side)];
-    const [item] = configs.splice(fromIndex, 1);
-    configs.splice(toIndex, 0, item);
-    setLayerConfigs(side, configs);
-    if (state.selectedLayer === fromIndex) {
-      setState({ selectedLayer: toIndex });
-    } else if (state.selectedLayer !== null) {
-      const sel = state.selectedLayer as number;
-      if (fromIndex < toIndex && sel > fromIndex && sel <= toIndex) {
-        setState({ selectedLayer: sel - 1 });
-      } else if (fromIndex > toIndex && sel >= toIndex && sel < fromIndex) {
-        setState({ selectedLayer: sel + 1 });
-      }
-    }
+  const reorderLayers = (side: CardSide, from: number, to: number) => {
+    setLayerConfigs(
+      side,
+      layerCrud.reorderLayers(getLayerConfigs(side), from, to),
+    );
+    setState({
+      selectedLayer: layerCrud.adjustSelectedLayer(
+        state.selectedLayer,
+        "reorder",
+        from,
+        to,
+      ),
+    });
   };
 
   const setIsEditing = (editing: boolean) => setState({ isEditing: editing });

src/components/md-deck/hooks/layer-crud.ts

@@ -0,0 +1,52 @@
+import type { CardSide, LayerConfig } from "../types";
+
+/** Creates a new LayerConfig with default placement. */
+export function createDefaultLayer(prop: string): LayerConfig {
+  return { prop, visible: true, x1: 1, y1: 1, x2: 2, y2: 2 };
+}
+
+/** Insert a layer and return the new array. */
+export function addLayer(configs: LayerConfig[], prop: string): LayerConfig[] {
+  return [...configs, createDefaultLayer(prop)];
+}
+
+/** Remove a layer by index and return the new array. */
+export function removeLayer(configs: LayerConfig[], index: number): LayerConfig[] {
+  return configs.filter((_, i) => i !== index);
+}
+
+/** Reorder a layer within the array. Returns new array. */
+export function reorderLayers(configs: LayerConfig[], from: number, to: number): LayerConfig[] {
+  const next = [...configs];
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  return next;
+}
+
+/**
+ * Recalculate selectedLayer after a structural change (add/remove/reorder).
+ * Returns the new selectedLayer index, or null.
+ */
+export function adjustSelectedLayer(
+  currentSelected: number | null,
+  action: "add" | "remove" | "reorder",
+  from: number,
+  to?: number,
+): number | null {
+  if (currentSelected === null) return null;
+
+  if (action === "remove") {
+    if (currentSelected === from) return null;
+    return currentSelected > from ? currentSelected - 1 : currentSelected;
+  }
+
+  if (action === "reorder" && to !== undefined) {
+    if (currentSelected === from) return to;
+    if (from < to && currentSelected > from && currentSelected <= to) return currentSelected - 1;
+    if (from > to && currentSelected >= to && currentSelected < from) return currentSelected + 1;
+    return currentSelected;
+  }
+
+  // "add" — doesn't affect existing indices
+  return currentSelected;
+}