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.

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

@@ -9,6 +9,7 @@ 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;
@@ -64,7 +65,7 @@ function alignSrc(v: string) {
 }
 
 export function LayerRow(props: LayerRowProps) {
-  const sortable = createSortable(props.index);
+  const sortable = createSortable(props.sortableId);
   const [dndState] = useDragDropContext()!;
   const [fontOpen, setFontOpen] = createSignal(false);
   let fontRef: HTMLDivElement | undefined;
@@ -89,11 +90,12 @@ export function LayerRow(props: LayerRowProps) {
 
   return (
     <div
-      ref={sortable}
+      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,
+        "transition-transform":
+          !!dndState.active.draggable && !sortable.isActiveDraggable,
       }}
       onMouseEnter={() => props.onHoverChange(props.index)}
       onMouseLeave={() => props.onHoverChange(null)}