creo que estoy con esto

Front/src/Componentes/ModalNotificacion.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    let {onCancel, onConfirm}: {onCancel:()=>void, onConfirm:(message:string)=>void} = $props();
+    
+    let message:string = $state("");
+    const maxLength = $state(100);
+    
+    function handleConfirm(e:Event) {
+        e.preventDefault();
+        if (message.length <= maxLength) {
+            onConfirm(message);
+            onCancel();
+        }
+    }
+  
+</script>
+  
+  <div
+    class="modal fade show d-block"
+    tabindex="-1"
+    style="background-color: rgba(0, 0, 0, 0.5);"
+  >
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Confirmar acción</h5>
+          <button type="button" class="btn-close" aria-label="Close" onclick={onCancel}></button>
+        </div>
+        <div class="modal-body">
+          <form onsubmit={(e)=>handleConfirm(e)}>
+            <div class="mb-3">
+              <label for="message" class="form-label">Mensaje</label>
+              <input
+                type="text"
+                id="message"
+                class="form-control"
+                bind:value={message}
+                maxlength={maxLength}
+                required
+              />
+              <div class="form-text">
+                Caracteres restantes: {maxLength - message.length}
+            </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer d-flex justify-content-between">
+          <button type="button" class="btn btn-secondary" onclick={onCancel}>
+            Cancelar
+          </button>
+          <button type="button" class="btn btn-primary" onclick={(e)=>handleConfirm(e)}>
+            Confirmar
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>