fix(layer-editor): use stable _key for drag-and-drop sorting

Add a unique `_key` to each layer config to maintain stable sortable IDs
across reorder operations. Update LayerRow to use the sortableId prop
and the `use:sortable` directive. Refactor layer-crud utilities to
generate and propagate `_key` values on creation and initialization.

content/deck-test.md

@@ -2,6 +2,8 @@
 
 :md-deck[./names.csv]{size="54x86" grid="5x8" bleed="1" padding="2" layers="name1:1,1-2,2f12 name2:4,7-5,8f12s num1:1,3-2,4f12 num2:4,5-5,6f12s"}
 
+:md-deck[./names.csv]{size="54x86" grid="5x8" layers="num1:1,1-2,2 num2:4,5-5,6f12s name1:1,1-2,2 name2:1,1-2,2 name1:1,1-2,2" }
+
 ## 使用 yaml/tag 语法创建 md-deck
 
 ```yaml/tag

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@modelcontextprotocol/sdk": "^0.5.0",
         "@solidjs/router": "^0.15.0",
+        "@thisbeyond/solid-dnd": "^0.7.5",
         "@types/three": "^0.183.1",
         "chokidar": "^5.0.0",
         "commander": "^14.0.3",
@@ -2867,6 +2868,19 @@
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/@thisbeyond/solid-dnd": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@thisbeyond/solid-dnd/-/solid-dnd-0.7.5.tgz",
+      "integrity": "sha512-DfI5ff+yYGpK9M21LhYwIPlbP2msKxN2ARwuu6GF8tT1GgNVDTI8VCQvH4TJFoVApP9d44izmAcTh/iTCH2UUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0",
+        "pnpm": ">=8.6.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.5"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",

package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "@modelcontextprotocol/sdk": "^0.5.0",
     "@solidjs/router": "^0.15.0",
+    "@thisbeyond/solid-dnd": "^0.7.5",
     "@types/three": "^0.183.1",
     "chokidar": "^5.0.0",
     "commander": "^14.0.3",

src/components/md-deck/CardLayer.tsx

@@ -1,11 +1,11 @@
-import { createMemo, For, Show } from 'solid-js';
+import { createMemo, For, Show } from "solid-js";
-import { parseMarkdown } from '../../markdown';
+import { parseMarkdown } from "../../markdown";
-import { getLayerStyle } from './hooks/dimensions';
+import { getLayerStyle } from "./hooks/dimensions";
-import type { CardData, CardSide, LayerConfig } from './types';
+import type { CardData, CardSide, LayerConfig } from "./types";
 import { DeckStore } from "./hooks/deckStore";
 import { processVariables } from "../utils/csv-loader";
 import { resolvePath } from "../utils/path";
-import type { LayerInteractionHandlers } from './hooks/useLayerInteraction';
+import type { LayerInteractionHandlers } from "./hooks/useLayerInteraction";
 
 export interface CardLayerProps {
   cardData: CardData;
@@ -15,28 +15,35 @@ export interface CardLayerProps {
 }
 
 export function CardLayer(props: CardLayerProps) {
-  const side = () => props.side || 'front';
+  const side = () => props.side || "front";
   const layers = createMemo(() =>
-    side() === 'front' 
+    side() === "front"
       ? props.store.state.frontLayerConfigs.filter((l) => l.visible)
-      : props.store.state.backLayerConfigs.filter((l) => l.visible)
+      : props.store.state.backLayerConfigs.filter((l) => l.visible),
   );
   const dimensions = () => props.store.state.dimensions!;
   const selectedLayer = () => props.store.state.selectedLayer;
   const draggingState = () => props.store.state.draggingState;
 
   function renderLayerContent(content: string) {
-    const iconPath = resolvePath(props.store.state.cards.sourcePath, props.cardData.iconPath ?? "./assets");
+    const iconPath = resolvePath(
-    return parseMarkdown(processVariables(content, props.cardData, props.store.state.cards), iconPath) as string;
+      props.store.state.cards.sourcePath,
+      props.cardData.iconPath ?? "./assets",
+    );
+    return parseMarkdown(
+      processVariables(content, props.cardData, props.store.state.cards),
+      iconPath,
+    ) as string;
   }
 
-  const getAlignStyle = (align?: 'l' | 'c' | 'r') => {
+  const getAlignStyle = (align?: "l" | "c" | "r") => {
-    if (align === 'l') return 'left';
+    if (align === "l") return "left";
-    if (align === 'r') return 'right';
+    if (align === "r") return "right";
-    return 'center';
+    return "center";
   };
 
-  const isLayerSelected = (layer: LayerConfig) => selectedLayer() === layer.prop;
+  const isLayerSelected = (layerIndex: number) =>
+    selectedLayer() === layerIndex;
 
   const getFrameBounds = (layer: LayerConfig) => {
     const dims = dimensions();
@@ -47,17 +54,17 @@ export function CardLayer(props: CardLayerProps) {
     return { left, top, width, height };
   };
 
-  const handleLayerClick = (layerProp: string, e: MouseEvent) => {
+  const handleLayerClick = (layerIndex: number, e: MouseEvent) => {
     if (props.interaction) {
-      props.interaction.onLayerClick(layerProp, e);
+      props.interaction.onLayerClick(layerIndex, e);
     }
   };
 
   const handleFrameMouseDown = (
-    action: 'drag' | 'resize-corner' | 'resize-edge',
+    action: "drag" | "resize-corner" | "resize-edge",
-    anchor?: 'nw' | 'ne' | 'sw' | 'se',
+    anchor?: "nw" | "ne" | "sw" | "se",
-    edge?: 'n' | 's' | 'e' | 'w',
+    edge?: "n" | "s" | "e" | "w",
-    e?: MouseEvent
+    e?: MouseEvent,
   ) => {
     if (props.interaction) {
       props.interaction.onFrameMouseDown(action, anchor, edge, e);
@@ -66,24 +73,25 @@ export function CardLayer(props: CardLayerProps) {
 
   return (
     <For each={layers()}>
-      {(layer) => {
+      {(layer, index) => {
         const bounds = () => getFrameBounds(layer);
-        const isSelected = () => isLayerSelected(layer);
+        const isSelected = () => isLayerSelected(index());
 
         return (
           <>
-<article
+            <article
               class="absolute flex flex-col items-stretch justify-center prose prose-sm cursor-pointer"
               classList={{
-                'ring-2 ring-blue-500 ring-offset-1': isSelected() && !draggingState()
+                "ring-2 ring-blue-500 ring-offset-1":
+                  isSelected() && !draggingState(),
               }}
               style={{
                 ...getLayerStyle(layer, dimensions()),
-                'font-size': `${layer.fontSize || 3}mm`,
+                "font-size": `${layer.fontSize || 3}mm`,
-                'text-align': getAlignStyle(layer.align)
+                "text-align": getAlignStyle(layer.align),
               }}
               innerHTML={renderLayerContent(props.cardData[layer.prop])}
-              onClick={(e) => handleLayerClick(layer.prop, e)}
+              onClick={(e) => handleLayerClick(index(), e)}
             />
             <Show when={isSelected()}>
               <div
@@ -92,7 +100,7 @@ export function CardLayer(props: CardLayerProps) {
                   left: `${bounds().left}mm`,
                   top: `${bounds().top}mm`,
                   width: `${bounds().width}mm`,
-                  height: `${bounds().height}mm`
+                  height: `${bounds().height}mm`,
                 }}
               />
               <div
@@ -101,78 +109,98 @@ export function CardLayer(props: CardLayerProps) {
                   left: `${bounds().left}mm`,
                   top: `${bounds().top}mm`,
                   width: `${bounds().width}mm`,
-                  height: `${bounds().height}mm`
+                  height: `${bounds().height}mm`,
                 }}
-                onMouseDown={(e) => handleFrameMouseDown('drag', undefined, undefined, e)}
+                onMouseDown={(e) =>
+                  handleFrameMouseDown("drag", undefined, undefined, e)
+                }
               />
-              <Show when={!draggingState() || draggingState()?.action !== 'drag'}>
+              <Show
+                when={!draggingState() || draggingState()?.action !== "drag"}
+              >
                 <div
                   class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nwse-resize pointer-events-auto z-20"
                   style={{
                     left: `${bounds().left - 2}mm`,
-                    top: `${bounds().top - 2}mm`
+                    top: `${bounds().top - 2}mm`,
                   }}
-                  onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'nw', undefined, e)}
+                  onMouseDown={(e) =>
+                    handleFrameMouseDown("resize-corner", "nw", undefined, e)
+                  }
                 />
                 <div
                   class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nesw-resize pointer-events-auto z-20"
                   style={{
                     left: `${bounds().left + bounds().width - 2}mm`,
-                    top: `${bounds().top - 2}mm`
+                    top: `${bounds().top - 2}mm`,
                   }}
-                  onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'ne', undefined, e)}
+                  onMouseDown={(e) =>
+                    handleFrameMouseDown("resize-corner", "ne", undefined, e)
+                  }
                 />
                 <div
                   class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nesw-resize pointer-events-auto z-20"
                   style={{
                     left: `${bounds().left - 2}mm`,
-                    top: `${bounds().top + bounds().height - 2}mm`
+                    top: `${bounds().top + bounds().height - 2}mm`,
                   }}
-                  onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'sw', undefined, e)}
+                  onMouseDown={(e) =>
+                    handleFrameMouseDown("resize-corner", "sw", undefined, e)
+                  }
                 />
                 <div
                   class="absolute w-4 h-4 bg-white border-2 border-blue-500 rounded-sm cursor-nwse-resize pointer-events-auto z-20"
                   style={{
                     left: `${bounds().left + bounds().width - 2}mm`,
-                    top: `${bounds().top + bounds().height - 2}mm`
+                    top: `${bounds().top + bounds().height - 2}mm`,
                   }}
-                  onMouseDown={(e) => handleFrameMouseDown('resize-corner', 'se', undefined, e)}
+                  onMouseDown={(e) =>
+                    handleFrameMouseDown("resize-corner", "se", undefined, e)
+                  }
                 />
                 <div
                   class="absolute h-2 cursor-ns-resize pointer-events-auto z-10"
                   style={{
                     left: `${bounds().left}mm`,
                     top: `${bounds().top - 1}mm`,
-                    width: `${bounds().width}mm`
+                    width: `${bounds().width}mm`,
                   }}
-                  onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'n', e)}
+                  onMouseDown={(e) =>
+                    handleFrameMouseDown("resize-edge", undefined, "n", e)
+                  }
                 />
                 <div
                   class="absolute h-2 cursor-ns-resize pointer-events-auto z-10"
                   style={{
                     left: `${bounds().left}mm`,
                     top: `${bounds().top + bounds().height - 1}mm`,
-                    width: `${bounds().width}mm`
+                    width: `${bounds().width}mm`,
                   }}
-                  onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 's', e)}
+                  onMouseDown={(e) =>
+                    handleFrameMouseDown("resize-edge", undefined, "s", e)
+                  }
                 />
                 <div
                   class="absolute w-2 cursor-ew-resize pointer-events-auto z-10"
                   style={{
                     left: `${bounds().left - 1}mm`,
                     top: `${bounds().top}mm`,
-                    height: `${bounds().height}mm`
+                    height: `${bounds().height}mm`,
                   }}
-                  onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'w', e)}
+                  onMouseDown={(e) =>
+                    handleFrameMouseDown("resize-edge", undefined, "w", e)
+                  }
                 />
                 <div
                   class="absolute w-2 cursor-ew-resize pointer-events-auto z-10"
                   style={{
                     left: `${bounds().left + bounds().width - 1}mm`,
                     top: `${bounds().top}mm`,
-                    height: `${bounds().height}mm`
+                    height: `${bounds().height}mm`,
                   }}
-                  onMouseDown={(e) => handleFrameMouseDown('resize-edge', undefined, 'e', e)}
+                  onMouseDown={(e) =>
+                    handleFrameMouseDown("resize-edge", undefined, "e", e)
+                  }
                 />
               </Show>
             </Show>

src/components/md-deck/DeckHeader.tsx

@@ -1,5 +1,5 @@
-import { For } from 'solid-js';
+import { For } from "solid-js";
-import type { DeckStore } from './hooks/deckStore';
+import type { DeckStore } from "./hooks/deckStore";
 
 export interface DeckHeaderProps {
   store: DeckStore;
@@ -18,11 +18,11 @@ export function DeckHeader(props: DeckHeaderProps) {
         onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
         class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
           store.state.isEditing && !store.state.fixed
-            ? 'bg-blue-100 text-blue-600'
+            ? "bg-blue-100 text-blue-600"
-            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            : "bg-gray-100 text-gray-600 hover:bg-gray-200"
         }`}
       >
-        {store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
+        {store.state.isEditing ? "✓ 编辑中" : "✏️ 编辑"}
       </button>
 
       {/* 导出 PDF 按钮 */}
@@ -39,10 +39,10 @@ export function DeckHeader(props: DeckHeaderProps) {
           {(card, index) => (
             <button
               onClick={() => store.actions.setActiveTab(index())}
-              class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
+              class={`font-medium transition-colors shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
                 store.state.activeTab === index()
-                  ? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
+                  ? "bg-blue-100 text-blue-600 border-b-2 border-blue-600"
-                  : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+                  : "text-gray-500 hover:text-gray-700 hover:bg-gray-100"
               }`}
             >
               {card.label || card.name || `Card ${index() + 1}`}

src/components/md-deck/editor-panel/DataEditorPanel.tsx

@@ -1,10 +1,10 @@
-import { For } from 'solid-js';
+import { For } from "solid-js";
-import type { DeckStore } from '../hooks/deckStore';
+import type { DeckStore } from "../hooks/deckStore";
 
 export interface DataEditorPanelProps {
   activeTab: number;
-  cards: DeckStore['state']['cards'];
+  cards: DeckStore["state"]["cards"];
-  updateCardData: DeckStore['actions']['updateCardData'];
+  updateCardData: DeckStore["actions"]["updateCardData"];
 }
 
 /**
@@ -12,18 +12,22 @@ export interface DataEditorPanelProps {
  */
 export function DataEditorPanel(props: DataEditorPanelProps) {
   return (
-    <div class="w-64 flex-shrink-0">
+    <div class="w-64 shrink-0">
       <h3 class="font-bold mb-2">卡牌数据</h3>
       <div class="space-y-2 max-h-96 overflow-y-auto">
         <For each={Object.keys(props.cards[props.activeTab] || {})}>
           {(key) => (
             <div>
-              <label class="block text-sm font-medium text-gray-700">{key}</label>
+              <label class="block text-sm font-medium text-gray-700">
+                {key}
+              </label>
               <textarea
                 class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
                 rows={3}
-                value={props.cards[props.activeTab]?.[key] || ''}
+                value={props.cards[props.activeTab]?.[key] || ""}
-                onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
+                onInput={(e) =>
+                  props.updateCardData(props.activeTab, key, e.target.value)
+                }
               />
             </div>
           )}

src/components/md-deck/editor-panel/LayerEditorPanel.tsx

@@ -1,269 +1,150 @@
-import { For, createSignal, onCleanup, onMount } from 'solid-js';
+import { For, createSignal, createMemo, onCleanup, onMount } from "solid-js";
-import type { DeckStore } from '../hooks/deckStore';
+import {
-import alignLeftIcon from './icons/align-left.png';
+  DragDropProvider,
-import alignCenterIcon from './icons/align-center.png';
+  DragDropSensors,
-import alignRightIcon from './icons/align-right.png';
+  SortableProvider,
+  closestCenter,
+} from "@thisbeyond/solid-dnd";
+import type { DeckStore } from "../hooks/deckStore";
+import { toSortableId } from "../hooks/layer-crud";
+import { LayerRow } from "./LayerRow";
 
 export interface LayerEditorPanelProps {
   store: DeckStore;
 }
 
-const ORIENTATION_OPTIONS = [
-  { value: 'n', label: '↑ 北' },
-  { value: 'e', label: '→ 东' },
-  { value: 's', label: '↓ 南' },
-  { value: 'w', label: '← 西' }
-] as const;
-
-const ALIGN_OPTIONS = [
-  { value: '', label: '默认', icon: alignCenterIcon },
-  { value: 'l', label: '左对齐', icon: alignLeftIcon },
-  { value: 'c', label: '居中', icon: alignCenterIcon },
-  { value: 'r', label: '右对齐', icon: alignRightIcon }
-] as const;
-
-const FONT_PRESETS = [3, 5, 8, 12] as const;
-
-function OrientationIcon(value: string): string {
-  switch (value) {
-    case 'n': return '↑';
-    case 'e': return '→';
-    case 's': return '↓';
-    case 'w': return '←';
-    default: return '↑';
-  }
-}
-
-function AlignIconSrc(value: string): string {
-  switch (value) {
-    case 'l': return alignLeftIcon;
-    case 'r': return alignRightIcon;
-    default: return alignCenterIcon;
-  }
-}
-
 function LayerEditorPanel(props: LayerEditorPanelProps) {
   const { store } = props;
   const [openDropdown, setOpenDropdown] = createSignal<string | null>(null);
-  let dropdownRef: HTMLDivElement | undefined;
+  const [hoveredIndex, setHoveredIndex] = createSignal<number | null>(null);
+  const [addMenuOpen, setAddMenuOpen] = createSignal(false);
+  let addMenuRef: HTMLDivElement | undefined;
 
-  const currentLayerConfigs = () => 
+  const side = () => store.state.activeSide;
-    store.state.activeSide === 'front' 
+  const layers = () =>
+    side() === "front"
       ? store.state.frontLayerConfigs
       : store.state.backLayerConfigs;
 
-  const updateLayerOrientation = (layerProp: string, orientation: 'n' | 's' | 'e' | 'w') => {
+  // Stable IDs from _key — don't change on reorder
-    const updateFn = store.state.activeSide === 'front' 
+  const sortableIds = createMemo(() =>
-      ? store.actions.updateFrontLayerConfig 
+    layers().map((l, i) => toSortableId(l, i)),
-      : store.actions.updateBackLayerConfig;
-    updateFn(layerProp, { orientation });
-    setOpenDropdown(null);
-  };
-
-  const updateLayerFontSize = (layerProp: string, fontSize?: number) => {
-    const updateFn = store.state.activeSide === 'front' 
-      ? store.actions.updateFrontLayerConfig 
-      : store.actions.updateBackLayerConfig;
-    updateFn(layerProp, { fontSize });
-  };
-
-  const updateLayerAlign = (layerProp: string, align?: 'l' | 'c' | 'r') => {
-    const updateFn = store.state.activeSide === 'front' 
-      ? store.actions.updateFrontLayerConfig 
-      : store.actions.updateBackLayerConfig;
-    updateFn(layerProp, { align });
-    setOpenDropdown(null);
-  };
-
-  const toggleLayerVisible = (layerProp: string) => {
-    const toggleFn = store.state.activeSide === 'front' 
-      ? store.actions.toggleFrontLayerVisible 
-      : store.actions.toggleBackLayerVisible;
-    toggleFn(layerProp);
-  };
-
-  const selectLayer = (layerProp: string) => {
-    store.actions.setSelectedLayer(
-      store.state.selectedLayer === layerProp ? null : layerProp
   );
-  };
+  // Lookup: sortable string ID → current array index
+  const idToIndex = createMemo(() => {
+    const map = new Map<string, number>();
+    layers().forEach((l, i) => map.set(toSortableId(l, i), i));
+    return map;
+  });
 
-  const handleDropdownClick = (e: MouseEvent) => {
+  const updater = () =>
-    e.stopPropagation();
+    side() === "front"
-  };
+      ? store.actions.updateFrontLayerConfig
+      : store.actions.updateBackLayerConfig;
 
-  const handleClickOutside = (e: MouseEvent) => {
+  const availableFields = createMemo(() => {
-    if (dropdownRef && !dropdownRef.contains(e.target as Node)) {
+    const cards = store.state.cards;
-      setOpenDropdown(null);
+    if (!cards?.length) return [];
-    }
+    return Object.keys(cards[0]).filter((k) => k !== "label");
+  });
+
+  const update = (
+    index: number,
+    patch: Partial<import("../types").LayerConfig>,
+    closeDropdown = false,
+  ) => {
+    updater()(index, patch);
+    if (closeDropdown) setOpenDropdown(null);
   };
 
   onMount(() => {
-    document.addEventListener('click', handleClickOutside);
+    const h = (e: MouseEvent) => {
+      if (addMenuRef && !addMenuRef.contains(e.target as Node))
+        setAddMenuOpen(false);
+    };
+    document.addEventListener("click", h);
+    onCleanup(() => document.removeEventListener("click", h));
   });
 
-  onCleanup(() => {
-    document.removeEventListener('click', handleClickOutside);
-  });
-
-  const layerCount = () => currentLayerConfigs().length;
-
   return (
-    <div class="w-64 flex-shrink-0">
+    <div class="w-64 shrink-0">
       <h3 class="font-bold mb-2 mt-0">
-        图层 ({store.state.activeSide === 'front' ? '正面' : '背面'})
+        图层 ({side() === "front" ? "正面" : "背面"})
       </h3>
 
-      <div ref={dropdownRef}>
+      <div class="relative mb-2" ref={addMenuRef}>
-        <For each={currentLayerConfigs()}>
+        <button
+          onClick={() => setAddMenuOpen(!addMenuOpen())}
+          class="w-full flex items-center gap-2 px-3 py-1.5 text-sm rounded cursor-pointer border border-dashed border-gray-300 bg-gray-50 hover:bg-gray-100 text-gray-600"
+        >
+          <span class="text-lg leading-none">+</span>
+          <span>添加图层</span>
+        </button>
+        {addMenuOpen() && (
+          <div
+            class="absolute top-full left-0 mt-1 w-full bg-white border border-gray-300 rounded shadow-lg z-20 max-h-48 overflow-y-auto"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <For each={availableFields()}>
+              {(f) => (
+                <button
+                  onClick={() => {
+                    store.actions.addLayer(side(), f);
+                    setAddMenuOpen(false);
+                  }}
+                  class="block w-full text-left px-3 py-1.5 text-sm hover:bg-blue-50 hover:text-blue-600 cursor-pointer"
+                >
+                  {f}
+                </button>
+              )}
+            </For>
+          </div>
+        )}
+      </div>
+
+      <DragDropProvider
+        onDragEnd={({ draggable, droppable }) => {
+          if (!droppable) return;
+          const from = idToIndex().get(draggable.id as string);
+          const to = idToIndex().get(droppable.id as string);
+          if (from !== undefined && to !== undefined && from !== to) {
+            store.actions.reorderLayers(side(), from, to);
+          }
+        }}
+        collisionDetector={closestCenter}
+      >
+        <DragDropSensors>
+          <SortableProvider ids={sortableIds()}>
+            <For each={layers()}>
               {(layer, index) => (
-            <div 
+                <LayerRow
-              class={`flex items-center gap-1 py-1.5 px-1 ${
+                  store={store}
-                index() < layerCount() - 1 ? 'border-b border-gray-200' : ''
+                  index={index()}
-              } ${
+                  sortableId={toSortableId(layer, index())}
-                store.state.selectedLayer === layer.prop ? 'bg-blue-50' : ''
+                  layer={layer}
-              }`}
+                  hovered={hoveredIndex() === index()}
-            >
+                  onHoverChange={setHoveredIndex}
-              <input
+                  openDropdown={openDropdown()}
-                type="checkbox"
+                  setOpenDropdown={setOpenDropdown}
-                checked={layer.visible}
+                  onUpdateOrientation={(o) =>
-                onChange={() => toggleLayerVisible(layer.prop)}
+                    update(index(), { orientation: o }, true)
-                class="cursor-pointer"
+                  }
+                  onUpdateFontSize={(fs) => update(index(), { fontSize: fs })}
+                  onUpdateAlign={(a) => update(index(), { align: a }, true)}
+                  onSelect={() =>
+                    store.actions.setSelectedLayer(
+                      store.state.selectedLayer === index() ? null : index(),
+                    )
+                  }
+                  onRemove={() => store.actions.removeLayer(side(), index())}
                 />
-              <span 
-                class="text-sm flex-1 truncate cursor-pointer hover:text-blue-600"
-                onClick={() => selectLayer(layer.prop)}
-              >
-                {layer.prop}
-              </span>
-              <div class="relative">
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setOpenDropdown(openDropdown() === `orient-${layer.prop}` ? null : `orient-${layer.prop}`);
-                  }}
-                  class={`w-7 h-7 text-sm rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${
-                    !layer.visible ? 'invisible pointer-events-none' : ''
-                  }`}
-                  title="方向"
-                >
-                  {OrientationIcon(layer.orientation || 'n')}
-                </button>
-                {openDropdown() === `orient-${layer.prop}` && (
-                  <div 
-                    class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10"
-                    onClick={handleDropdownClick}
-                  >
-                    <For each={ORIENTATION_OPTIONS}>
-                      {(opt) => (
-                        <button
-                          onClick={() => updateLayerOrientation(layer.prop, opt.value)}
-                          class="block w-full text-left px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
-                        >
-                          {opt.label}
-                        </button>
               )}
             </For>
-                  </div>
+          </SortableProvider>
-                )}
+        </DragDropSensors>
-              </div>
+      </DragDropProvider>
-
-              <div class="relative">
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setOpenDropdown(openDropdown() === `align-${layer.prop}` ? null : `align-${layer.prop}`);
-                  }}
-                  class={`w-7 h-7 rounded cursor-pointer flex items-center justify-center bg-gray-200 hover:bg-gray-300 ${
-                    !layer.visible ? 'invisible pointer-events-none' : ''
-                  }`}
-                  title="对齐"
-                >
-                  <img src={AlignIconSrc(layer.align || '')} alt="align" class="w-5 h-5 not-prose" />
-                </button>
-                {openDropdown() === `align-${layer.prop}` && (
-                  <div 
-                    class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10"
-                    onClick={handleDropdownClick}
-                  >
-                    <For each={ALIGN_OPTIONS}>
-                      {(opt) => (
-                        <button
-                          onClick={() => updateLayerAlign(layer.prop, opt.value as 'l' | 'c' | 'r' | undefined || undefined)}
-                          class="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
-                        >
-                          <img src={opt.icon} alt="" class="w-4 h-4 not-prose max-w-none" />
-                        </button>
-                      )}
-                    </For>
-                  </div>
-                )}
-              </div>
-
-              <div class="relative">
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setOpenDropdown(openDropdown() === `font-${layer.prop}` ? null : `font-${layer.prop}`);
-                  }}
-                  class={`w-7 h-7 text-xs rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${
-                    !layer.visible ? 'invisible pointer-events-none' : ''
-                  }`}
-                  title="字体大小 (mm)"
-                >
-                  {layer.fontSize ?? 3}
-                </button>
-                {openDropdown() === `font-${layer.prop}` && (
-                  <div 
-                    class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10 p-2"
-                    onClick={handleDropdownClick}
-                  >
-                    <div class="flex items-center gap-1 mb-2">
-                      <input
-                        type="number"
-                        value={layer.fontSize ?? 3}
-                        onChange={(e) => {
-                          const value = e.target.value;
-                          updateLayerFontSize(layer.prop, value ? Number(value) : undefined);
-                        }}
-                        class="w-14 text-xs px-1.5 py-1 rounded border border-gray-300"
-                        step="0.1"
-                        min="0.1"
-                      />
-                      <span class="text-xs text-gray-500">mm</span>
-                    </div>
-                    <div class="flex gap-1">
-                      <For each={FONT_PRESETS}>
-                        {(preset) => (
-                          <button
-                            onClick={() => updateLayerFontSize(layer.prop, preset)}
-                            class={`px-2 py-1 text-xs rounded cursor-pointer ${
-                              (layer.fontSize ?? 3) === preset
-                                ? 'bg-blue-500 text-white'
-                                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-                            }`}
-                          >
-                            {preset}
-                          </button>
-                        )}
-                      </For>
-                    </div>
-                    <button
-                      onClick={() => updateLayerFontSize(layer.prop, undefined)}
-                      class="mt-2 w-full text-xs text-gray-500 hover:text-gray-700 cursor-pointer"
-                    >
-                      重置
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </For>
-      </div>
 
       <hr class="my-4" />
-
       <button
         onClick={() => store.actions.copyCode()}
         class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer flex items-center gap-2 justify-center"

src/components/md-deck/editor-panel/LayerRow.tsx

@@ -0,0 +1,279 @@
+import { For, createSignal, onCleanup, onMount } from "solid-js";
+import { createSortable, useDragDropContext } from "@thisbeyond/solid-dnd";
+import type { DeckStore } from "../hooks/deckStore";
+import type { LayerConfig } from "../types";
+import alignLeftIcon from "./icons/align-left.png";
+import alignCenterIcon from "./icons/align-center.png";
+import alignRightIcon from "./icons/align-right.png";
+
+export interface LayerRowProps {
+  store: DeckStore;
+  index: number;
+  sortableId: string;
+  layer: LayerConfig;
+  hovered: boolean;
+  onHoverChange: (idx: number | null) => void;
+  openDropdown: string | null;
+  setOpenDropdown: (val: string | null) => void;
+  onUpdateOrientation: (o: "n" | "s" | "e" | "w") => void;
+  onUpdateFontSize: (fs?: number) => void;
+  onUpdateAlign: (a?: "l" | "c" | "r") => void;
+  onSelect: () => void;
+  onRemove: () => void;
+}
+
+const ORIENTATIONS = [
+  { value: "n" as const, label: "↑ 北" },
+  { value: "e" as const, label: "→ 东" },
+  { value: "s" as const, label: "↓ 南" },
+  { value: "w" as const, label: "← 西" },
+];
+
+const ALIGNS = [
+  { value: "" as const, icon: alignCenterIcon },
+  { value: "l" as const, icon: alignLeftIcon },
+  { value: "c" as const, icon: alignCenterIcon },
+  { value: "r" as const, icon: alignRightIcon },
+];
+
+const FONT_PRESETS = [3, 5, 8, 12] as const;
+
+function orientChar(v: string) {
+  switch (v) {
+    case "n":
+      return "↑";
+    case "e":
+      return "→";
+    case "s":
+      return "↓";
+    case "w":
+      return "←";
+    default:
+      return "↑";
+  }
+}
+
+function alignSrc(v: string) {
+  switch (v) {
+    case "l":
+      return alignLeftIcon;
+    case "r":
+      return alignRightIcon;
+    default:
+      return alignCenterIcon;
+  }
+}
+
+export function LayerRow(props: LayerRowProps) {
+  const sortable = createSortable(props.sortableId);
+  const [dndState] = useDragDropContext()!;
+  const [fontOpen, setFontOpen] = createSignal(false);
+  let fontRef: HTMLDivElement | undefined;
+
+  const selected = () => props.store.state.selectedLayer === props.index;
+
+  onMount(() => {
+    const h = (e: MouseEvent) => {
+      if (fontRef && !fontRef.contains(e.target as Node)) setFontOpen(false);
+    };
+    document.addEventListener("click", h);
+    onCleanup(() => document.removeEventListener("click", h));
+  });
+
+  const toggleVisible = () => {
+    const fn =
+      props.store.state.activeSide === "front"
+        ? props.store.actions.toggleFrontLayerVisible
+        : props.store.actions.toggleBackLayerVisible;
+    fn(props.index);
+  };
+
+  return (
+    <div
+      use:sortable={sortable}
+      class={`flex items-center gap-1 py-1.5 px-1 relative group border-b border-gray-100 ${selected() ? "bg-blue-50" : ""}`}
+      classList={{
+        "opacity-25": sortable.isActiveDraggable,
+        "transition-transform":
+          !!dndState.active.draggable && !sortable.isActiveDraggable,
+      }}
+      onMouseEnter={() => props.onHoverChange(props.index)}
+      onMouseLeave={() => props.onHoverChange(null)}
+    >
+      <button
+        {...sortable.dragActivators}
+        class="cursor-grab text-gray-400 hover:text-gray-600 text-sm px-0.5 select-none shrink-0"
+        title="拖动排序"
+      >
+        ⠿
+      </button>
+
+      <button
+        onClick={toggleVisible}
+        class="shrink-0 text-sm cursor-pointer select-none"
+        title={props.layer.visible ? "隐藏" : "显示"}
+      >
+        {props.layer.visible ? "👁" : "👁‍🗨"}
+      </button>
+
+      <span
+        class="text-sm flex-1 truncate cursor-pointer hover:text-blue-600 select-none"
+        onClick={props.onSelect}
+      >
+        {props.layer.prop}
+      </span>
+
+      <DropdownButton
+        icon={orientChar(props.layer.orientation || "n")}
+        visible={props.layer.visible}
+        open={props.openDropdown === `orient-${props.index}`}
+        onToggle={() =>
+          props.setOpenDropdown(
+            props.openDropdown === `orient-${props.index}`
+              ? null
+              : `orient-${props.index}`,
+          )
+        }
+        title="方向"
+      >
+        <For each={ORIENTATIONS}>
+          {(o) => (
+            <button
+              onClick={() => props.onUpdateOrientation(o.value)}
+              class="block w-full text-left px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
+            >
+              {o.label}
+            </button>
+          )}
+        </For>
+      </DropdownButton>
+
+      <DropdownButton
+        icon={
+          <img
+            src={alignSrc(props.layer.align || "")}
+            alt="align"
+            class="w-5 h-5 not-prose"
+          />
+        }
+        visible={props.layer.visible}
+        open={props.openDropdown === `align-${props.index}`}
+        onToggle={() =>
+          props.setOpenDropdown(
+            props.openDropdown === `align-${props.index}`
+              ? null
+              : `align-${props.index}`,
+          )
+        }
+        title="对齐"
+      >
+        <For each={ALIGNS}>
+          {(o) => (
+            <button
+              onClick={() => props.onUpdateAlign(o.value || undefined)}
+              class="flex items-center gap-2 w-full px-3 py-1.5 text-sm hover:bg-gray-100 cursor-pointer whitespace-nowrap"
+            >
+              <img src={o.icon} alt="" class="w-4 h-4 not-prose max-w-none" />
+            </button>
+          )}
+        </For>
+      </DropdownButton>
+
+      <div class="relative" ref={fontRef}>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            setFontOpen(!fontOpen());
+          }}
+          class={`w-7 h-7 text-xs rounded cursor-pointer flex items-center justify-center bg-gray-200 text-gray-700 hover:bg-gray-300 ${!props.layer.visible ? "invisible pointer-events-none" : ""}`}
+          title="字体大小 (mm)"
+        >
+          {props.layer.fontSize ?? 3}
+        </button>
+        {fontOpen() && (
+          <div
+            class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10 p-2"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div class="flex items-center gap-1 mb-2">
+              <input
+                type="number"
+                value={props.layer.fontSize ?? 3}
+                onChange={(e) =>
+                  props.onUpdateFontSize(
+                    e.target.value ? Number(e.target.value) : undefined,
+                  )
+                }
+                class="w-14 text-xs px-1.5 py-1 rounded border border-gray-300"
+                step="0.1"
+                min="0.1"
+              />
+              <span class="text-xs text-gray-500">mm</span>
+            </div>
+            <div class="flex gap-1">
+              <For each={FONT_PRESETS}>
+                {(p) => (
+                  <button
+                    onClick={() => props.onUpdateFontSize(p)}
+                    class={`px-2 py-1 text-xs rounded cursor-pointer ${(props.layer.fontSize ?? 3) === p ? "bg-blue-500 text-white" : "bg-gray-100 hover:bg-gray-200 text-gray-700"}`}
+                  >
+                    {p}
+                  </button>
+                )}
+              </For>
+            </div>
+            <button
+              onClick={() => props.onUpdateFontSize(undefined)}
+              class="mt-2 w-full text-xs text-gray-500 hover:text-gray-700 cursor-pointer"
+            >
+              重置
+            </button>
+          </div>
+        )}
+      </div>
+
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onRemove();
+        }}
+        class={`shrink-0 w-5 h-5 text-xs rounded cursor-pointer flex items-center justify-center text-red-400 hover:text-red-600 hover:bg-red-50 transition-opacity ${props.hovered ? "opacity-100" : "opacity-0"}`}
+        title="删除图层"
+      >
+        ✕
+      </button>
+    </div>
+  );
+}
+
+function DropdownButton(props: {
+  icon: import("solid-js").JSX.Element;
+  visible: boolean;
+  open: boolean;
+  onToggle: () => void;
+  title: string;
+  children: import("solid-js").JSX.Element;
+}) {
+  return (
+    <div class="relative">
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          props.onToggle();
+        }}
+        class={`w-7 h-7 rounded cursor-pointer flex items-center justify-center bg-gray-200 hover:bg-gray-300 ${!props.visible ? "invisible pointer-events-none" : ""}`}
+        title={props.title}
+      >
+        {props.icon}
+      </button>
+      {props.open && (
+        <div
+          class="absolute top-full right-0 mt-1 bg-white border border-gray-300 rounded shadow-lg z-10"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {props.children}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,8 +1,15 @@
-import { createStore } from 'solid-js/store';
+import { createStore } from "solid-js/store";
-import { calculateDimensions } from './dimensions';
+import { calculateDimensions } from "./dimensions";
-import { loadCSV, CSV } from '../../utils/csv-loader';
+import { loadCSV, CSV } from "../../utils/csv-loader";
-import { initLayerConfigs, formatLayers, initLayerConfigsForSide } from './layer-parser';
+import { formatLayers, initLayerConfigsForSide } from "./layer-parser";
-import type { CardData, LayerConfig, Dimensions, CardSide, CardShape } from '../types';
+import * as layerCrud from "./layer-crud";
+import type {
+  CardData,
+  LayerConfig,
+  Dimensions,
+  CardSide,
+  CardShape,
+} from "../types";
 
 export const DECK_DEFAULTS = {
   SIZE_W: 54,
@@ -11,14 +18,14 @@ export const DECK_DEFAULTS = {
   GRID_H: 8,
   BLEED: 1,
   PADDING: 2,
-  CORNER_RADIUS: 3
+  CORNER_RADIUS: 3,
 } as const;
 
 export interface DraggingState {
-  layer: string;
+  layer: number;
-  action: 'drag' | 'resize-corner' | 'resize-edge';
+  action: "drag" | "resize-corner" | "resize-edge";
-  anchor?: 'nw' | 'ne' | 'sw' | 'se';
+  anchor?: "nw" | "ne" | "sw" | "se";
-  edge?: 'n' | 's' | 'e' | 'w';
+  edge?: "n" | "s" | "e" | "w";
   startX: number;
   startY: number;
   startGrid: { x1: number; y1: number; x2: number; y2: number };
@@ -46,7 +53,7 @@ export interface DeckState {
   backLayerConfigs: LayerConfig[];
 
   isEditing: boolean;
-  selectedLayer: string | null;
+  selectedLayer: number | null;
   activeSide: CardSide;
 
   isSelecting: boolean;
@@ -62,7 +69,7 @@ export interface DeckState {
   exportProgress: number;
   exportError: string | null;
 
-  printOrientation: 'portrait' | 'landscape';
+  printOrientation: "portrait" | "landscape";
   printFrontOddPageOffsetX: number;
   printFrontOddPageOffsetY: number;
   printDoubleSided: boolean;
@@ -83,15 +90,22 @@ export interface DeckActions {
   updateCardData: (index: number, key: string, value: string) => void;
 
   setFrontLayerConfigs: (configs: LayerConfig[]) => void;
-  updateFrontLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
+  updateFrontLayerConfig: (
-  toggleFrontLayerVisible: (prop: string) => void;
+    index: number,
+    updates: Partial<LayerConfig>,
+  ) => void;
+  toggleFrontLayerVisible: (index: number) => void;
 
   setBackLayerConfigs: (configs: LayerConfig[]) => void;
-  updateBackLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
+  updateBackLayerConfig: (index: number, updates: Partial<LayerConfig>) => void;
-  toggleBackLayerVisible: (prop: string) => void;
+  toggleBackLayerVisible: (index: number) => void;
+
+  addLayer: (side: CardSide, prop: string) => void;
+  removeLayer: (side: CardSide, index: number) => void;
+  reorderLayers: (side: CardSide, fromIndex: number, toIndex: number) => void;
 
   setIsEditing: (editing: boolean) => void;
-  setSelectedLayer: (layer: string | null) => void;
+  setSelectedLayer: (layer: number | null) => void;
   setActiveSide: (side: CardSide) => void;
 
   setIsSelecting: (selecting: boolean) => void;
@@ -100,11 +114,32 @@ export interface DeckActions {
   cancelSelection: () => void;
 
   setDraggingState: (state: DraggingState | null) => void;
-  moveLayer: (layerProp: string, dxGrid: number, dyGrid: number, startGrid?: { x1: number; y1: number; x2: number; y2: number }) => void;
+  moveLayer: (
-  resizeLayerCorner: (layerProp: string, anchor: 'nw' | 'ne' | 'sw' | 'se', dxGrid: number, dyGrid: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => void;
+    index: number,
-  resizeLayerEdge: (layerProp: string, edge: 'n' | 's' | 'e' | 'w', delta: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => void;
+    dxGrid: number,
+    dyGrid: number,
+    startGrid?: { x1: number; y1: number; x2: number; y2: number },
+  ) => void;
+  resizeLayerCorner: (
+    index: number,
+    anchor: "nw" | "ne" | "sw" | "se",
+    dxGrid: number,
+    dyGrid: number,
+    startGrid: { x1: number; y1: number; x2: number; y2: number },
+  ) => void;
+  resizeLayerEdge: (
+    index: number,
+    edge: "n" | "s" | "e" | "w",
+    delta: number,
+    startGrid: { x1: number; y1: number; x2: number; y2: number },
+  ) => void;
 
-  loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
+  loadCardsFromPath: (
+    path: string,
+    rawSrc: string,
+    layersStr?: string,
+    backLayersStr?: string,
+  ) => Promise<void>;
   setError: (error: string | null) => void;
   clearError: () => void;
 
@@ -117,7 +152,7 @@ export interface DeckActions {
   setExportError: (error: string | null) => void;
   clearExportError: () => void;
 
-  setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
+  setPrintOrientation: (orientation: "portrait" | "landscape") => void;
   setPrintFrontOddPageOffsetX: (offset: number) => void;
   setPrintFrontOddPageOffsetY: (offset: number) => void;
   setPrintDoubleSided: (doubleSided: boolean) => void;
@@ -128,9 +163,7 @@ export interface DeckStore {
   actions: DeckActions;
 }
 
-export function createDeckStore(
+export function createDeckStore(initialSrc: string = ""): DeckStore {
-  initialSrc: string = '',
-): DeckStore {
   const [state, setState] = createStore<DeckState>({
     sizeW: DECK_DEFAULTS.SIZE_W,
     sizeH: DECK_DEFAULTS.SIZE_H,
@@ -139,7 +172,7 @@ export function createDeckStore(
     bleed: DECK_DEFAULTS.BLEED,
     padding: DECK_DEFAULTS.PADDING,
     cornerRadius: DECK_DEFAULTS.CORNER_RADIUS,
-    shape: 'rectangle',
+    shape: "rectangle",
     fixed: false,
     src: initialSrc,
     rawSrc: initialSrc,
@@ -150,7 +183,7 @@ export function createDeckStore(
     backLayerConfigs: [],
     isEditing: false,
     selectedLayer: null,
-    activeSide: 'front',
+    activeSide: "front",
     isSelecting: false,
     selectStart: null,
     selectEnd: null,
@@ -160,10 +193,10 @@ export function createDeckStore(
     isExporting: false,
     exportProgress: 0,
     exportError: null,
-    printOrientation: 'portrait',
+    printOrientation: "portrait",
     printFrontOddPageOffsetX: 0,
     printFrontOddPageOffsetY: 0,
-    printDoubleSided: false
+    printDoubleSided: false,
   });
 
   const updateDimensions = () => {
@@ -173,7 +206,7 @@ export function createDeckStore(
       gridW: state.gridW,
       gridH: state.gridH,
       bleed: state.bleed,
-      padding: state.padding
+      padding: state.padding,
     });
     setState({ dimensions: dims });
   };
@@ -212,105 +245,205 @@ export function createDeckStore(
   const setCards = (cards: CSV<CardData>) => setState({ cards, activeTab: 0 });
   const setActiveTab = (index: number) => setState({ activeTab: index });
   const updateCardData = (index: number, key: string, value: string) => {
-    setState('cards', index, key, value);
+    setState("cards", index, key, value);
   };
 
-  const setFrontLayerConfigs = (configs: LayerConfig[]) => setState({ frontLayerConfigs: configs });
+  const setFrontLayerConfigs = (configs: LayerConfig[]) =>
-  const updateFrontLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
+    setState({ frontLayerConfigs: configs });
-    setState('frontLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
+  const updateFrontLayerConfig = (
+    index: number,
+    updates: Partial<LayerConfig>,
+  ) => {
+    setState("frontLayerConfigs", index, (config) => ({
+      ...config,
+      ...updates,
+    }));
   };
-  const toggleFrontLayerVisible = (prop: string) => {
+  const toggleFrontLayerVisible = (index: number) => {
-    setState('frontLayerConfigs', (prev) => prev.map((config) =>
+    setState("frontLayerConfigs", index, "visible", (v) => !v);
-      config.prop === prop ? { ...config, visible: !config.visible } : config
-    ));
   };
 
-  const setBackLayerConfigs = (configs: LayerConfig[]) => setState({ backLayerConfigs: configs });
+  const setBackLayerConfigs = (configs: LayerConfig[]) =>
-  const updateBackLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
+    setState({ backLayerConfigs: configs });
-    setState('backLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
+  const updateBackLayerConfig = (
+    index: number,
+    updates: Partial<LayerConfig>,
+  ) => {
+    setState("backLayerConfigs", index, (config) => ({
+      ...config,
+      ...updates,
+    }));
   };
-  const toggleBackLayerVisible = (prop: string) => {
+  const toggleBackLayerVisible = (index: number) => {
-    setState('backLayerConfigs', (prev) => prev.map((config) =>
+    setState("backLayerConfigs", index, "visible", (v) => !v);
-      config.prop === prop ? { ...config, visible: !config.visible } : config
+  };
-    ));
+
+  const getLayerConfigs = (side: CardSide): LayerConfig[] =>
+    side === "front" ? state.frontLayerConfigs : state.backLayerConfigs;
+
+  const setLayerConfigs = (side: CardSide, configs: LayerConfig[]) => {
+    if (side === "front") setFrontLayerConfigs(configs);
+    else setBackLayerConfigs(configs);
+  };
+
+  const addLayer = (side: CardSide, prop: string) => {
+    const configs = getLayerConfigs(side);
+    setLayerConfigs(side, layerCrud.addLayer(configs, prop));
+    setState({
+      selectedLayer: layerCrud.adjustSelectedLayer(
+        state.selectedLayer,
+        "add",
+        configs.length,
+      ),
+    });
+  };
+
+  const removeLayer = (side: CardSide, index: number) => {
+    setLayerConfigs(side, layerCrud.removeLayer(getLayerConfigs(side), index));
+    setState({
+      selectedLayer: layerCrud.adjustSelectedLayer(
+        state.selectedLayer,
+        "remove",
+        index,
+      ),
+    });
+  };
+
+  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 });
-  const setSelectedLayer = (layer: string | null) => setState({ selectedLayer: layer });
+  const setSelectedLayer = (layer: number | null) =>
+    setState({ selectedLayer: layer });
   const setActiveSide = (side: CardSide) => setState({ activeSide: side });
 
-  const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
+  const setIsSelecting = (selecting: boolean) =>
-  const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
+    setState({ isSelecting: selecting });
-  const setSelectEnd = (pos: { x: number; y: number } | null) => setState({ selectEnd: pos });
+  const setSelectStart = (pos: { x: number; y: number } | null) =>
+    setState({ selectStart: pos });
+  const setSelectEnd = (pos: { x: number; y: number } | null) =>
+    setState({ selectEnd: pos });
   const cancelSelection = () => {
     setState({ isSelecting: false, selectStart: null, selectEnd: null });
   };
 
-  const setDraggingState = (draggingState: DraggingState | null) => setState({ draggingState });
+  const setDraggingState = (draggingState: DraggingState | null) =>
+    setState({ draggingState });
 
-  const getLayerConfig = (layerProp: string): LayerConfig | undefined => {
+  const getLayerConfig = (index: number): LayerConfig | undefined => {
-    const configs = state.activeSide === 'front' ? state.frontLayerConfigs : state.backLayerConfigs;
+    const configs =
-    return configs.find(c => c.prop === layerProp);
+      state.activeSide === "front"
+        ? state.frontLayerConfigs
+        : state.backLayerConfigs;
+    return configs[index];
   };
 
-  const updateLayerConfig = (layerProp: string, updates: Partial<LayerConfig>) => {
+  const updateLayerConfig = (index: number, updates: Partial<LayerConfig>) => {
-    if (state.activeSide === 'front') {
+    if (state.activeSide === "front") {
-      updateFrontLayerConfig(layerProp, updates);
+      updateFrontLayerConfig(index, updates);
     } else {
-      updateBackLayerConfig(layerProp, updates);
+      updateBackLayerConfig(index, updates);
     }
   };
 
-  const moveLayer = (layerProp: string, dxGrid: number, dyGrid: number, startGrid?: { x1: number; y1: number; x2: number; y2: number }) => {
+  const moveLayer = (
-    const layer = getLayerConfig(layerProp);
+    index: number,
+    dxGrid: number,
+    dyGrid: number,
+    startGrid?: { x1: number; y1: number; x2: number; y2: number },
+  ) => {
+    const layer = getLayerConfig(index);
     if (!layer) return;
 
-    const grid = startGrid ?? { x1: layer.x1, y1: layer.y1, x2: layer.x2, y2: layer.y2 };
+    const grid = startGrid ?? {
+      x1: layer.x1,
+      y1: layer.y1,
+      x2: layer.x2,
+      y2: layer.y2,
+    };
 
-    updateLayerConfig(layerProp, {
+    updateLayerConfig(index, {
       x1: grid.x1 + dxGrid,
       x2: grid.x2 + dxGrid,
       y1: grid.y1 + dyGrid,
-      y2: grid.y2 + dyGrid
+      y2: grid.y2 + dyGrid,
     });
   };
 
-  const resizeLayerCorner = (layerProp: string, anchor: 'nw' | 'ne' | 'sw' | 'se', dxGrid: number, dyGrid: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => {
+  const resizeLayerCorner = (
-    const layer = getLayerConfig(layerProp);
+    index: number,
+    anchor: "nw" | "ne" | "sw" | "se",
+    dxGrid: number,
+    dyGrid: number,
+    startGrid: { x1: number; y1: number; x2: number; y2: number },
+  ) => {
+    const layer = getLayerConfig(index);
     if (!layer) return;
 
     const updates: Partial<LayerConfig> = {};
-    if (anchor === 'nw') {
+    if (anchor === "nw") {
       updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dxGrid);
       updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
-    } else if (anchor === 'ne') {
+    } else if (anchor === "ne") {
       updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
       updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
-    } else if (anchor === 'sw') {
+    } else if (anchor === "sw") {
       updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dxGrid);
       updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
-    } else if (anchor === 'se') {
+    } else if (anchor === "se") {
       updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
       updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
     }
-    updateLayerConfig(layerProp, updates);
+    updateLayerConfig(index, updates);
   };
 
-  const resizeLayerEdge = (layerProp: string, edge: 'n' | 's' | 'e' | 'w', delta: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => {
+  const resizeLayerEdge = (
-    const layer = getLayerConfig(layerProp);
+    index: number,
+    edge: "n" | "s" | "e" | "w",
+    delta: number,
+    startGrid: { x1: number; y1: number; x2: number; y2: number },
+  ) => {
+    const layer = getLayerConfig(index);
     if (!layer) return;
 
     const updates: Partial<LayerConfig> = {};
-    if (edge === 'n') updates.y1 = Math.min(startGrid.y2, Math.max(1, startGrid.y1 + delta));
+    if (edge === "n")
-    if (edge === 's') updates.y2 = Math.max(startGrid.y1, Math.min(state.gridH, startGrid.y2 + delta));
+      updates.y1 = Math.min(startGrid.y2, Math.max(1, startGrid.y1 + delta));
-    if (edge === 'w') updates.x1 = Math.min(startGrid.x2, Math.max(1, startGrid.x1 + delta));
+    if (edge === "s")
-    if (edge === 'e') updates.x2 = Math.max(startGrid.x1, Math.min(state.gridW, startGrid.x2 + delta));
+      updates.y2 = Math.max(
-    updateLayerConfig(layerProp, updates);
+        startGrid.y1,
+        Math.min(state.gridH, startGrid.y2 + delta),
+      );
+    if (edge === "w")
+      updates.x1 = Math.min(startGrid.x2, Math.max(1, startGrid.x1 + delta));
+    if (edge === "e")
+      updates.x2 = Math.max(
+        startGrid.x1,
+        Math.min(state.gridW, startGrid.x2 + delta),
+      );
+    updateLayerConfig(index, updates);
   };
 
-  const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
+  const loadCardsFromPath = async (
+    path: string,
+    rawSrc: string,
+    layersStr: string = "",
+    backLayersStr: string = "",
+  ) => {
     if (!path) {
-      setState({ error: '未指定 CSV 文件路径' });
+      setState({ error: "未指定 CSV 文件路径" });
       return;
     }
 
@@ -322,7 +455,7 @@ export function createDeckStore(
       if (data.length === 0) {
         setState({
           error: `CSV ${path} 文件为空或格式不正确`,
-          isLoading: false
+          isLoading: false,
         });
         return;
       }
@@ -330,15 +463,19 @@ export function createDeckStore(
       setState({
         cards: data,
         activeTab: 0,
-        frontLayerConfigs: initLayerConfigsForSide(data, layersStr),
+        frontLayerConfigs: layerCrud.withKeys(
-        backLayerConfigs: initLayerConfigsForSide(data, backLayersStr),
+          initLayerConfigsForSide(data, layersStr),
-        isLoading: false
+        ),
+        backLayerConfigs: layerCrud.withKeys(
+          initLayerConfigsForSide(data, backLayersStr),
+        ),
+        isLoading: false,
       });
       updateDimensions();
     } catch (err) {
       setState({
-        error: `加载 CSV ${path} 失败：${err instanceof Error ? err.message : '未知错误'}`,
+        error: `加载 CSV ${path} 失败：${err instanceof Error ? err.message : "未知错误"}`,
-        isLoading: false
+        isLoading: false,
       });
     }
   };
@@ -348,11 +485,12 @@ export function createDeckStore(
 
   const generateCode = (backLayersStr?: string) => {
     const frontLayersStr = formatLayers(state.frontLayerConfigs);
-    const backLayersString = backLayersStr || formatLayers(state.backLayerConfigs);
+    const backLayersString =
+      backLayersStr || formatLayers(state.backLayerConfigs);
     const parts = [
       `:md-deck[${state.rawSrc || state.src}]`,
       `{size="${state.sizeW}x${state.sizeH}" `,
-      `grid="${state.gridW}x${state.gridH}" `
+      `grid="${state.gridW}x${state.gridH}" `,
     ];
 
     if (state.bleed !== DECK_DEFAULTS.BLEED) {
@@ -361,7 +499,7 @@ export function createDeckStore(
     if (state.padding !== DECK_DEFAULTS.PADDING) {
       parts.push(`padding="${state.padding}" `);
     }
-    if (state.shape !== 'rectangle') {
+    if (state.shape !== "rectangle") {
       parts.push(`shape="${state.shape}" `);
     }
 
@@ -369,34 +507,37 @@ export function createDeckStore(
     if (backLayersString) {
       parts.push(`back-layers="${backLayersString}" `);
     }
-    parts.push('}');
+    parts.push("}");
-    return parts.join('');
+    return parts.join("");
   };
 
   const copyCode = async (backLayersStr?: string) => {
     const code = generateCode(backLayersStr);
     try {
       await navigator.clipboard.writeText(code);
-      alert('已复制到剪贴板！');
+      alert("已复制到剪贴板！");
     } catch (err) {
-      console.error('复制失败:', err);
+      console.error("复制失败:", err);
-      alert('复制失败，请手动复制');
+      alert("复制失败，请手动复制");
     }
   };
 
-  const setExporting = (exporting: boolean) => setState({ isExporting: exporting });
+  const setExporting = (exporting: boolean) =>
+    setState({ isExporting: exporting });
 
   const exportDeck = () => {
     setState({ isExporting: true, exportProgress: 0, exportError: null });
   };
 
-  const setExportProgress = (progress: number) => setState({ exportProgress: progress });
+  const setExportProgress = (progress: number) =>
+    setState({ exportProgress: progress });
 
-  const setExportError = (error: string | null) => setState({ exportError: error });
+  const setExportError = (error: string | null) =>
+    setState({ exportError: error });
 
   const clearExportError = () => setState({ exportError: null });
 
-  const setPrintOrientation = (orientation: 'portrait' | 'landscape') => {
+  const setPrintOrientation = (orientation: "portrait" | "landscape") => {
     setState({ printOrientation: orientation });
   };
 
@@ -430,6 +571,9 @@ export function createDeckStore(
     setBackLayerConfigs,
     updateBackLayerConfig,
     toggleBackLayerVisible,
+    addLayer,
+    removeLayer,
+    reorderLayers,
     setIsEditing,
     setSelectedLayer,
     setActiveSide,
@@ -454,7 +598,7 @@ export function createDeckStore(
     setPrintOrientation,
     setPrintFrontOddPageOffsetX,
     setPrintFrontOddPageOffsetY,
-    setPrintDoubleSided
+    setPrintDoubleSided,
   };
 
   return { state, actions };

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

@@ -0,0 +1,79 @@
+import type { LayerConfig } from "../types";
+
+let nextKey = 1;
+
+export function resetKeyCounter(value = 1) {
+  nextKey = value;
+}
+
+/** Creates a new LayerConfig with default placement and a stable _key. */
+export function createDefaultLayer(prop: string): LayerConfig {
+  return { prop, visible: true, x1: 1, y1: 1, x2: 2, y2: 2, _key: nextKey++ };
+}
+
+/** Assign stable _key to layers that don't have one (e.g. parsed from string). */
+export function withKeys(layers: LayerConfig[]): LayerConfig[] {
+  return layers.map((l) => (l._key ? l : { ...l, _key: nextKey++ }));
+}
+
+/** 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;
+}
+
+/**
+ * Convert layer _key to flake ID (unique string) for SortableProvider.
+ * Allows multiple instances of the same field name.
+ */
+export function toSortableId(layer: LayerConfig, index: number): string {
+  return layer._key ? `layer-${layer._key}` : `layer-idx-${index}`;
+}
+
+/**
+ * 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;
+  }
+
+  return currentSelected;
+}

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

@@ -1,5 +1,5 @@
-import type { Layer, LayerConfig } from '../types';
+import type { Layer, LayerConfig } from "../types";
-import {CSV} from "../../utils/csv-loader";
+import { CSV } from "../../utils/csv-loader";
 
 /**
  * 解析 layers 字符串
@@ -11,7 +11,8 @@ export function parseLayers(layersStr: string): Layer[] {
 
   const layers: Layer[] = [];
   // 匹配：prop:x1,y1-x2,y2[ffontSize][direction][align]
-  const regex = /([^: ]+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?([lcr])?/g;
+  const regex =
+    /([^: ]+):(\d+),(\d+)-(\d+),(\d+)(?:f([\d.]+))?([nsew])?([lcr])?/g;
   let match;
 
   while ((match = regex.exec(layersStr)) !== null) {
@@ -22,8 +23,8 @@ export function parseLayers(layersStr: string): Layer[] {
       x2: parseInt(match[4]),
       y2: parseInt(match[5]),
       fontSize: match[6] ? parseFloat(match[6]) : undefined,
-      orientation: match[7] as 'n' | 's' | 'e' | 'w' | undefined,
+      orientation: match[7] as "n" | "s" | "e" | "w" | undefined,
-      align: match[8] as 'l' | 'c' | 'r' | undefined
+      align: match[8] as "l" | "c" | "r" | undefined,
     });
   }
 
@@ -35,13 +36,13 @@ export function parseLayers(layersStr: string): Layer[] {
  */
 export function formatLayers(layers: LayerConfig[]): string {
   return layers
-    .filter(l => l.visible)
+    .filter((l) => l.visible)
-    .map(l => {
+    .map((l) => {
       let str = `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`;
       if (l.fontSize) {
         str += `f${l.fontSize}`;
       }
-      if (l.orientation && l.orientation !== 'n') {
+      if (l.orientation && l.orientation !== "n") {
         str += l.orientation;
       }
       if (l.align) {
@@ -49,33 +50,29 @@ export function formatLayers(layers: LayerConfig[]): string {
       }
       return str;
     })
-    .join(' ');
+    .join(" ");
 }
 
 /**
  * 初始化图层配置（用于特定面）
  */
 export function initLayerConfigsForSide(
-  data: CSV<any>,
+  _data: CSV<any>,
-  layersStr: string
+  layersStr: string,
 ): LayerConfig[] {
   const parsed = parseLayers(layersStr);
-  const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
 
-  return allProps.map(prop => {
+  return parsed.map((layer) => ({
-    const existing = parsed.find(l => l.prop === prop);
+    prop: layer.prop,
-    return {
+    visible: true,
-      prop,
+    x1: layer.x1 || 1,
-      visible: !!existing,
+    y1: layer.y1 || 1,
-      x1: existing?.x1 || 1,
+    x2: layer.x2 || 2,
-      y1: existing?.y1 || 1,
+    y2: layer.y2 || 2,
-      x2: existing?.x2 || 2,
+    orientation: layer.orientation,
-      y2: existing?.y2 || 2,
+    fontSize: layer.fontSize,
-      orientation: existing?.orientation,
+    align: layer.align,
-      fontSize: existing?.fontSize,
+  }));
-      align: existing?.align
-    };
-  });
 }
 
 /**
@@ -83,7 +80,7 @@ export function initLayerConfigsForSide(
  */
 export function initLayerConfigs(
   data: CSV<any>,
-  existingLayersStr: string
+  existingLayersStr: string,
 ): LayerConfig[] {
   return initLayerConfigsForSide(data, existingLayersStr);
 }

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

@@ -1,6 +1,6 @@
-import { createMemo } from 'solid-js';
+import { createMemo } from "solid-js";
-import type { DeckStore, DraggingState } from './deckStore';
+import type { DeckStore, DraggingState } from "./deckStore";
-import type { LayerConfig } from '../types';
+import type { LayerConfig } from "../types";
 
 export interface LayerClickInfo {
   layerProp: string;
@@ -9,21 +9,38 @@ export interface LayerClickInfo {
 }
 
 export interface LayerInteractionHandlers {
-  onLayerClick: (layerProp: string, e: MouseEvent) => void;
+  onLayerClick: (index: number, e: MouseEvent) => void;
-  onFrameMouseDown: (action: 'drag' | 'resize-corner' | 'resize-edge', anchor?: 'nw' | 'ne' | 'sw' | 'se', edge?: 'n' | 's' | 'e' | 'w', e?: MouseEvent) => void;
+  onFrameMouseDown: (
+    action: "drag" | "resize-corner" | "resize-edge",
+    anchor?: "nw" | "ne" | "sw" | "se",
+    edge?: "n" | "s" | "e" | "w",
+    e?: MouseEvent,
+  ) => void;
   onCardMouseMove: (e: MouseEvent, cardEl: HTMLElement) => void;
   onCardMouseUp: () => void;
   onCardClick: (e: MouseEvent, cardEl: HTMLElement) => void;
   getOverlappingLayers: (gridX: number, gridY: number) => LayerConfig[];
 }
 
-export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers {
+export function useLayerInteraction(
-  let clickStack: { gridX: number; gridY: number; layers: string[]; currentIndex: number } | null = null;
+  store: DeckStore,
+): LayerInteractionHandlers {
+  let clickStack: {
+    gridX: number;
+    gridY: number;
+    layers: number[];
+    currentIndex: number;
+  } | null = null;
 
   const currentLayerConfigs = () =>
-    store.state.activeSide === 'front'
+    store.state.activeSide === "front"
-      ? store.state.frontLayerConfigs.filter(l => l.visible)
+      ? store.state.frontLayerConfigs.filter((l) => l.visible)
-      : store.state.backLayerConfigs.filter(l => l.visible);
+      : store.state.backLayerConfigs.filter((l) => l.visible);
+
+  const allLayerConfigs = () =>
+    store.state.activeSide === "front"
+      ? store.state.frontLayerConfigs
+      : store.state.backLayerConfigs;
 
   const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement) => {
     const dims = store.state.dimensions;
@@ -36,31 +53,46 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
     const offsetY = (e.clientY - rect.top) / mmToPxRatio;
 
     const gridX = Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1;
-    const gridY = Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1;
+    const gridY =
+      Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1;
 
     return {
       gridX: Math.max(1, Math.min(dims.gridW, gridX)),
-      gridY: Math.max(1, Math.min(dims.gridH, gridY))
+      gridY: Math.max(1, Math.min(dims.gridH, gridY)),
     };
   };
 
-  const isPointInLayer = (gridX: number, gridY: number, layer: LayerConfig): boolean => {
+  const isPointInLayer = (
-    return gridX >= layer.x1 && gridX <= layer.x2 && gridY >= layer.y1 && gridY <= layer.y2;
+    gridX: number,
+    gridY: number,
+    layer: LayerConfig,
+  ): boolean => {
+    return (
+      gridX >= layer.x1 &&
+      gridX <= layer.x2 &&
+      gridY >= layer.y1 &&
+      gridY <= layer.y2
+    );
   };
 
-  const getOverlappingLayers = (gridX: number, gridY: number): LayerConfig[] => {
+  const getOverlappingLayers = (
-    return currentLayerConfigs().filter(layer => isPointInLayer(gridX, gridY, layer));
+    gridX: number,
+    gridY: number,
+  ): LayerConfig[] => {
+    return currentLayerConfigs().filter((layer) =>
+      isPointInLayer(gridX, gridY, layer),
+    );
   };
 
-  const handleLayerClick = (layerProp: string, e: MouseEvent) => {
+  const handleLayerClick = (index: number, e: MouseEvent) => {
     e.stopPropagation();
 
     const currentlySelected = store.state.selectedLayer;
 
-    if (currentlySelected === layerProp) {
+    if (currentlySelected === index) {
       store.actions.setSelectedLayer(null);
     } else {
-      store.actions.setSelectedLayer(layerProp);
+      store.actions.setSelectedLayer(index);
     }
 
     clickStack = null;
@@ -78,40 +110,55 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
       return;
     }
 
-    const overlappingProps = overlapping.map(l => l.prop);
+    const allConfigs = allLayerConfigs();
+    const overlappingIndices = overlapping
+      .map((l) => allConfigs.findIndex((c) => c.prop === l.prop && c.visible))
+      .filter((i) => i !== -1);
 
-    if (clickStack && clickStack.gridX === gridX && clickStack.gridY === gridY) {
+    if (overlappingIndices.length === 0) {
-      clickStack.currentIndex = (clickStack.currentIndex + 1) % overlappingProps.length;
+      store.actions.setSelectedLayer(null);
-      const nextLayer = overlappingProps[clickStack.currentIndex];
+      clickStack = null;
-      store.actions.setSelectedLayer(nextLayer);
+      return;
+    }
+
+    if (
+      clickStack &&
+      clickStack.gridX === gridX &&
+      clickStack.gridY === gridY
+    ) {
+      clickStack.currentIndex =
+        (clickStack.currentIndex + 1) % overlappingIndices.length;
+      const nextIndex = overlappingIndices[clickStack.currentIndex];
+      store.actions.setSelectedLayer(nextIndex);
     } else {
       clickStack = {
         gridX,
         gridY,
-        layers: overlappingProps,
+        layers: overlappingIndices,
-        currentIndex: 0
+        currentIndex: 0,
       };
-      store.actions.setSelectedLayer(overlappingProps[0]);
+      store.actions.setSelectedLayer(overlappingIndices[0]);
     }
   };
 
   const handleFrameMouseDown = (
-    action: 'drag' | 'resize-corner' | 'resize-edge',
+    action: "drag" | "resize-corner" | "resize-edge",
-    anchor?: 'nw' | 'ne' | 'sw' | 'se',
+    anchor?: "nw" | "ne" | "sw" | "se",
-    edge?: 'n' | 's' | 'e' | 'w',
+    edge?: "n" | "s" | "e" | "w",
-    e?: MouseEvent
+    e?: MouseEvent,
   ) => {
-    if (!store.state.selectedLayer) return;
+    if (store.state.selectedLayer === null) return;
     if (e) e.stopPropagation();
 
-    const layer = currentLayerConfigs().find(l => l.prop === store.state.selectedLayer);
+    const index = store.state.selectedLayer;
+    const layer = allLayerConfigs()[index];
     if (!layer) return;
 
     const startX = e?.clientX ?? 0;
     const startY = e?.clientY ?? 0;
 
     const draggingState: DraggingState = {
-      layer: store.state.selectedLayer,
+      layer: index,
       action,
       anchor,
       edge,
@@ -121,8 +168,8 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
         x1: layer.x1,
         y1: layer.y1,
         x2: layer.x2,
-        y2: layer.y2
+        y2: layer.y2,
-      }
+      },
     };
 
     store.actions.setDraggingState(draggingState);
@@ -149,24 +196,42 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
 
     const startGrid = dragging.startGrid;
 
-    if (dragging.action === 'drag') {
+    if (dragging.action === "drag") {
-      store.actions.moveLayer(dragging.layer, Math.round(deltaGridX), Math.round(deltaGridY), startGrid);
+      store.actions.moveLayer(
-    } else if (dragging.action === 'resize-corner' && dragging.anchor) {
+        dragging.layer,
-      store.actions.resizeLayerCorner(dragging.layer, dragging.anchor, Math.round(deltaGridX), Math.round(deltaGridY), startGrid);
+        Math.round(deltaGridX),
-    } else if (dragging.action === 'resize-edge' && dragging.edge) {
+        Math.round(deltaGridY),
-      const delta = dragging.edge === 'n' || dragging.edge === 's' ? Math.round(deltaGridY) : Math.round(deltaGridX);
+        startGrid,
-      store.actions.resizeLayerEdge(dragging.layer, dragging.edge, delta, startGrid);
+      );
+    } else if (dragging.action === "resize-corner" && dragging.anchor) {
+      store.actions.resizeLayerCorner(
+        dragging.layer,
+        dragging.anchor,
+        Math.round(deltaGridX),
+        Math.round(deltaGridY),
+        startGrid,
+      );
+    } else if (dragging.action === "resize-edge" && dragging.edge) {
+      const delta =
+        dragging.edge === "n" || dragging.edge === "s"
+          ? Math.round(deltaGridY)
+          : Math.round(deltaGridX);
+      store.actions.resizeLayerEdge(
+        dragging.layer,
+        dragging.edge,
+        delta,
+        startGrid,
+      );
     }
   };
 
   const handleCardMouseUp = () => {
     if (store.state.draggingState) {
-      const layer = store.state.draggingState.layer;
       const dragging = store.state.draggingState;
 
       store.actions.setDraggingState(null);
 
-      const newLayerConfig = currentLayerConfigs().find(l => l.prop === layer);
+      const newLayerConfig = allLayerConfigs()[dragging.layer];
       if (newLayerConfig && dragging.startGrid) {
         store.actions.setDraggingState({
           ...dragging,
@@ -174,8 +239,8 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
             x1: newLayerConfig.x1,
             y1: newLayerConfig.y1,
             x2: newLayerConfig.x2,
-            y2: newLayerConfig.y2
+            y2: newLayerConfig.y2,
-          }
+          },
         });
         store.actions.setDraggingState(null);
       }
@@ -188,6 +253,6 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
     onCardMouseMove: handleCardMouseMove,
     onCardMouseUp: handleCardMouseUp,
     onCardClick: handleCardClick,
-    getOverlappingLayers
+    getOverlappingLayers,
   };
 }

src/components/md-deck/types.ts

@@ -2,9 +2,9 @@ export interface CardData {
   [key: string]: string;
 }
 
-export type CardSide = 'front' | 'back';
+export type CardSide = "front" | "back";
 
-export type { CardShape } from '../../plotcutter/contour';
+export type { CardShape } from "../../plotcutter/contour";
 
 export interface Layer {
   prop: string;
@@ -12,9 +12,9 @@ export interface Layer {
   y1: number;
   x2: number;
   y2: number;
-  orientation?: 'n' | 's' | 'e' | 'w';
+  orientation?: "n" | "s" | "e" | "w";
   fontSize?: number;
-  align?: 'l' | 'c' | 'r';
+  align?: "l" | "c" | "r";
 }
 
 export interface LayerConfig {
@@ -24,9 +24,10 @@ export interface LayerConfig {
   y1: number;
   x2: number;
   y2: number;
-  orientation?: 'n' | 's' | 'e' | 'w';
+  orientation?: "n" | "s" | "e" | "w";
   fontSize?: number;
-  align?: 'l' | 'c' | 'r';
+  align?: "l" | "c" | "r";
+  _key?: number;
 }
 
 export interface Dimensions {

src/solid-dnd.directives.d.ts

@@ -0,0 +1,12 @@
+import "solid-js";
+
+declare module "solid-js" {
+  namespace JSX {
+    interface Directives {
+      sortable: (
+        el: HTMLElement,
+        accessor: () => boolean | { skipTransform?: boolean } | undefined,
+      ) => void;
+    }
+  }
+}